diff --git a/app.js b/app.js index ab737a60027..0397c852d0d 100644 --- a/app.js +++ b/app.js @@ -9,8 +9,8 @@ // Event handling, user interaction is what starts the code execution. var taskInput=document.getElementById("new-task");//Add a new task. -var addButton=document.getElementsByTagName("button")[0];//first button -var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks +var addButton=document.querySelector(".task-add__btn");//first button +var incompleteTaskHolder=document.getElementById("incompleted-tasks");//ul of #incompleteTasks var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks @@ -18,7 +18,7 @@ var completedTasksHolder=document.getElementById("completed-tasks");//completed- var createNewTaskElement=function(taskString){ var listItem=document.createElement("li"); - + listItem.classList='task'; //input (checkbox) var checkBox=document.createElement("input");//checkbx //label @@ -33,18 +33,21 @@ var createNewTaskElement=function(taskString){ var deleteButtonImg=document.createElement("img");//delete button image label.innerText=taskString; - label.className='task'; + label.className='task__name'; //Each elements, needs appending checkBox.type="checkbox"; + checkBox.className='task__checkbox'; editInput.type="text"; - editInput.className="task"; + editInput.className="task__input"; editButton.innerText="Edit"; //innerText encodes special characters, HTML does not. - editButton.className="edit"; + editButton.className="task__btn_edit"; - deleteButton.className="delete"; + deleteButton.className="task__btn_delete"; deleteButtonImg.src='./remove.svg'; + deleteButtonImg.alt = 'task delete button'; + deleteButtonImg.classList='task__del-btn-icon'; deleteButton.appendChild(deleteButtonImg); @@ -81,15 +84,14 @@ var editTask=function(){ var listItem=this.parentNode; - var editInput=listItem.querySelector('input[type=text]'); var label=listItem.querySelector("label"); - var editBtn=listItem.querySelector(".edit"); - var containsClass=listItem.classList.contains("editMode"); - //If class of the parent is .editmode + var editBtn=listItem.querySelector(".task__btn_edit"); + var containsClass=listItem.classList.contains("edit-mode"); + //If class of the parent is .edit-mode if(containsClass){ - //switch to .editmode + //switch to .edit-mode //label becomes the inputs value. label.innerText=editInput.value; editBtn.innerText="Edit"; @@ -98,8 +100,8 @@ var editTask=function(){ editBtn.innerText="Save"; } - //toggle .editmode on the parent. - listItem.classList.toggle("editMode"); + //toggle .edit-mode on the parent. + listItem.classList.toggle("edit-mode"); }; @@ -147,7 +149,7 @@ var ajaxRequest=function(){ //Set the click handler to the addTask function. -addButton.onclick=addTask; +// addButton.onclick=addTask; addButton.addEventListener("click",addTask); addButton.addEventListener("click",ajaxRequest); @@ -156,8 +158,8 @@ var bindTaskEvents=function(taskListItem,checkBoxEventHandler){ console.log("bind list item events"); //select ListItems children var checkBox=taskListItem.querySelector("input[type=checkbox]"); - var editButton=taskListItem.querySelector("button.edit"); - var deleteButton=taskListItem.querySelector("button.delete"); + var editButton=taskListItem.querySelector(".task__btn_edit"); + var deleteButton=taskListItem.querySelector(".task__btn_delete"); //Bind editTask to edit button. diff --git a/index.html b/index.html index ef4aa1f60ca..ea2afdef23a 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,52 @@ - -Todo App - - - - -
Want more details?
-

-

Todo

-

Completed

-
- - + + + + + + + + + Todo App + + +
+ matrix + Want more details? +
+
+

Add Item

+
+ + +
+

Todo

+ +

Completed

+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css index ab36227705e..c2e158f6e35 100644 --- a/style.css +++ b/style.css @@ -1,148 +1,182 @@ -/* Basic Style */ -body { - background-color: #f8f8f8; - color: #333; - font-family: Lato, sans-serif; +input, +button { + outline: none; } -.aaa { - width: 500px; - margin: 0 auto; - display: block; - text-align: right; + +.wrapper { + background-color: #f8f8f8; + color: #333; + font-family: Lato, sans-serif; } -.aaa img { - width: 100%; + +.header { + width: 500px; + margin: 0 auto; + display: block; + text-align: right; } -.aaa .more_inf { - font-family: fantasy, cursive; + +.header__img { + width: 100%; } -@media (max-width:768px) { -.aaa { text-align: center; +.header__more-link { + font-family: fantasy, cursive; } + +@media (max-width:768px) { + + .header { + text-align: center; + } + } -.centered-main-page-element { - display: block; - width: 500px; - margin: 0 auto 0; + +.main { + display: block; + width: 500px; + margin: 0 auto; } -.task { - width: 56%; - display: inline-block; - flex-grow: 1 + +/* Heading */ + +.main__title { + color: #333; + font-weight: 700; + font-size: 15px; + border-bottom: 2px solid #333; + padding: 30px 0 10px; + margin: 0; + text-transform: uppercase; } -.task-row-wrapper { - display: flex; + +.main__add-task, +.main__incomplate-task, +.main__complate-task { + margin: 0px; + padding: 0px; } -ul { - margin:0; - padding: 0px; + +.main__add-task { + margin-top: 20px; } -li, h3 { - list-style:none; + +/* New Task */ + +.task-add { + display: flex; } -input,button{ - outline:none; + +.task-add__input { + width: 318px; + margin: 0; + font-size: 18px; + line-height: 18px; + height: 21px; + padding: 0 9px; + border: 1px solid #dDd; + background: #FFF; + border-radius: 6px; + font-family: Lato, sans-serif; + color: #888; } -button { - background: none; - border: 0px; - color: #888; - font-size: 15px; - width: 60px; - font-family: Lato, sans-serif; - cursor: pointer; + +.task__name, +.task__input, +.task-add__input { + width: 56%; + display: inline-block; + flex-grow: 1; } -button:hover { - color: #3a3A3a; + +.task-add__btn, +.task__btn_edit, +.task__btn_delete { + background: none; + border: 0px; + color: #888; + font-size: 15px; + width: 60px; + font-family: Lato, sans-serif; + cursor: pointer; } -/* 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: 21px; - padding: 0 9px; - border: 1px solid #dDd; - background: #FFF; - border-radius: 6px; - font-family: Lato, sans-serif; - color: #888; -} -input[type="text"]:focus { - color: #333; + +.task-add__btn:hover, +.task__btn_edit:hover, +.task__btn_delete:hover { + color: #3a3A3a; } -/* New Task */ -label[for='new-task'] { - display: block; - margin: 0 0 20px; +.task__input { + margin: 0px; + font-size: 18px; + line-height: 18px; + height: 21px; + padding: 0 9px; + border: 1px solid #dDd; + background: #FFF; + border-radius: 6px; + font-family: Lato, sans-serif; + color: #888; } -input#new-task { - width: 318px; + +.task__input:focus { + color: #333; } /* Task list */ -li { - overflow: hidden; - padding: 20px 0; - border-bottom: 1px solid #eee; - - display: flex; - justify-content: space-between; - align-items: center; -} -li > * { - vertical-align: middle; +.task { + overflow: hidden; + padding: 20px 0; + border-bottom: 1px solid #eee; + list-style: none; + display: flex; + justify-content: space-between; + align-items: center; + vertical-align: middle; } -li > input[type="checkbox"] { - margin: 0 10px; +.task__checkbox { + margin: 0 10px; } -li > label { - padding-left: 10px; - box-sizing: border-box; - font-size: 18px; - width: 226px; + +.task__name { + padding-left: 10px; + box-sizing: border-box; + font-size: 18px; + width: 226px; } -li > input[type="text"] { - width: 226px + +.task__input { + width: 226px; } -button.delete img { - height: 2em; - transform: rotateZ(45deg); - transition: transform 200ms ease-in; + +.task__del-btn-icon { + height: 2em; + transform: rotateZ(45deg); + transition: transform 200ms ease-in; } -button.delete img:hover { - transform: rotateZ(0); + +.task__del-btn-icon:hover { + transform: rotateZ(0); } /* Completed */ -ul#completed-tasks label { - text-decoration: line-through - color: #888; +.main__complate-task .task__name { + text-decoration: line-through; + color: #888; } /* Edit Task */ -ul li input[type=text] { - display:none +.task__input { + display: none; } -ul li.editMode input[type=text] { - display:inline-block; - width:224px +.edit-mode .task__input { + display: inline-block; + width: 224px; } -ul li.editMode label { - display:none; +.edit-mode .task__name { + display: none; } \ No newline at end of file