Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add files via upload #36

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add files via upload #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8d947cb
Add files via upload
Shiva942 Oct 13, 2019
152fe27
Add files via upload
sachin9018 Oct 30, 2019
8d6e0dd
Merge pull request #1 from sachin9018/master
Shiva942 Oct 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My TODOS</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="icon" sizes="192x192" href="icon.png">
<link rel="stylesheet" href="styles.css">
</head>
Expand All @@ -14,12 +18,12 @@
<img src="icon.png" height="30px"><h1>To-Do APP</h1>
</div>

<div class="wrapper">
<div class="wrapper container-fluid">

<div class="controls">
<div class="control-group add-item">
<div class="control-group-buttons">
<button id="btn" onclick="handler.addTodos()">Add</button>
<button id="btn" class="btn btn-outline-primary" onclick="handler.addTodos()">Add</button>
</div>
<div class="control-group-inputs">
<input class="effect" type="text" id="todoAddTextInput" placeholder="New Item">
Expand All @@ -28,7 +32,7 @@

<div class="control-group rename-item">
<div class="control-group-buttons">
<button id="btn" onclick="handler.changeTodos()">Change</button>
<button id="btn" class="btn btn-outline-primary" onclick="handler.changeTodos()">Change</button>
</div>
<div class="control-group-inputs">
<input class="effect" type="number" min="0" id="todoChangePositionInput" placeholder="Item Index">
Expand All @@ -38,7 +42,7 @@

<div class="control-group delete-item">
<div class="control-group-buttons">
<button id="btn" onclick="handler.deleteTodos()" class="danger">Delete</button>
<button id="btn" onclick="handler.deleteTodos()" class="btn btn-outline-danger">Delete</button>
</div>
<div class="control-group-inputs">
<input class="effect" type="number" min="0" id="todoDeletePositionInput" placeholder="Item Index">
Expand All @@ -47,7 +51,7 @@

<div class="control-group toggle-item">
<div class="control-group-buttons">
<button id="btn" onclick="handler.toggleCompleted()" class="success">Toggle</button>
<button id="btn" onclick="handler.toggleCompleted()" class="btn btn-outline-success">Toggle</button>
</div>
<div class="control-group-inputs">
<input class="effect" type="number" min="0" id="todoTogglePositionInput" placeholder="Item Index">
Expand All @@ -56,13 +60,13 @@

<div class="control-group toggle-all-items">
<div class="control-group-buttons">
<button id="btn" onclick="handler.toggleAll()" class="success">Toggle All</button>
<button id="btn" onclick="handler.toggleAll()" class=" btn-outline-success">Toggle All</button>
</div>
</div>
</div>

<div class="todos-container">
<h2>Open Tasks</h2>
<h2>On-going Tasks</h2>
<ul></ul>
</div>

Expand Down
23 changes: 23 additions & 0 deletions sachin9018/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# To-Dos
My first JavaScript project - To-Do's .

## About
This is a Todo List project in javascript based upon the course: [Practical JS by Gorden Zhu](https://watchandcode.com/p/practical-javascript). The Code here has various extended features from the one in the course like 'empty input handler' and each function is enclosed in an object.

## Description
The todos.js is the scripting file called in the index.html and have **three objects** :
### 1. todoList:
Contains an array of object for todo items having two properties: text(string) and completed(boolean). It also contains all the functions on the todo item array like adding, deleteing, changing text of existing todo, toggle completed property and toggle all.
### 2. handler:
It is an object having all the functions called by the events like button clicking. It also has the handlers for generating alert when empty or unaccepted input is given.
### 3. view:
The functions of this object are used by handler for creating and updating the html which is viewed to the user. The methods are for displaying todo items and for creating a delete and toggle button for each item seperatly.

## NOTE:
**TOGGLE AND DELETE CAN BE DONE EITHER VIA SEPERATE BUTTONS FOR EACH ITEM OR BY SPECIFING INDEX IN THE INPUT FIELD AND THE INDEXING IS DONE FROM 0!**

## Acceptable Changes (PRs)
1. Most important changes are welcomed in UI(Obviously!).
2. Any improvement in JS file for adding or improving thing are also appreciated.

**Also, If you have an idea regarding any improvement you can create an issue so that other interested ones can work open it.**
Binary file added sachin9018/icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions sachin9018/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<html>
<head>
<title>Todo App</title>
<!-- <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<p>
<label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
</p>

<h3>Todo</h3>
<ul id="incomplete-tasks">
<li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
<li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Edit</button><button class="delete">Delete</button></li>

</ul>

<h3>Completed</h3>
<ul id="completed-tasks">
<li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
</ul>
</div>

<script type="text/javascript" src="app.js"></script>

</body>
</html>
120 changes: 120 additions & 0 deletions sachin9018/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
/* Basic Style */
body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}
.container {
display: block;
width: 400px;
margin: 100px auto 0;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li, h3 {
clear:both;
list-style:none;
}
input, button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
/* Heading */
h3,
label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}
input[type="text"]:focus {
color: #333;
}

/* New Task */
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task {
float: left;
width: 318px;
}
p > button:hover {
color: #0FC57C;
}

/* Task list */
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li > input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li > label {
font-size: 18px;
line-height: 40px;
width: 237px;
padding: 0 0 0 11px;
}
li > input[type="text"] {
width: 226px;
}
li > .delete:hover {
color: #CF2323;
}

/* Completed */
#completed-tasks label {
text-decoration: line-through;
color: #888;
}

/* Edit Task */
ul li input[type=text] {
display:none;
}

ul li.editMode input[type=text] {
display:block;
}

ul li.editMode label {
display:none;
}
Loading