diff --git a/app.js b/app.js
index ab737a6002..af599748d1 100644
--- a/app.js
+++ b/app.js
@@ -10,7 +10,7 @@
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 incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incompleteTasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
@@ -33,27 +33,30 @@ var createNewTaskElement=function(taskString){
var deleteButtonImg=document.createElement("img");//delete button image
label.innerText=taskString;
- label.className='task';
+ label.className='todo-app__label--task todo-app__label';
//Each elements, needs appending
checkBox.type="checkbox";
+ checkBox.className="todo-app__input todo-app__input--checkbox"
editInput.type="text";
- editInput.className="task";
+ editInput.className="todo-app__input todo-app__input--text";
editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
- editButton.className="edit";
+ editButton.className="edit todo-app__button";
- deleteButton.className="delete";
+ deleteButton.className="delete todo-app__button";
deleteButtonImg.src='./remove.svg';
+ deleteButtonImg.className="todo-app__icon";
deleteButton.appendChild(deleteButtonImg);
-
+
//and appending.
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
+ listItem.className="todo-app__item";
return listItem;
}
@@ -82,10 +85,10 @@ var editTask=function(){
var listItem=this.parentNode;
- var editInput=listItem.querySelector('input[type=text]');
+ var editInput=listItem.querySelector('.todo-app__input--text');
var label=listItem.querySelector("label");
var editBtn=listItem.querySelector(".edit");
- var containsClass=listItem.classList.contains("editMode");
+ var containsClass=listItem.classList.contains("edit-mode");
//If class of the parent is .editmode
if(containsClass){
@@ -99,7 +102,7 @@ var editTask=function(){
}
//toggle .editmode on the parent.
- listItem.classList.toggle("editMode");
+ listItem.classList.toggle("edit-mode");
};
@@ -155,7 +158,7 @@ addButton.addEventListener("click",ajaxRequest);
var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
console.log("bind list item events");
//select ListItems children
- var checkBox=taskListItem.querySelector("input[type=checkbox]");
+ var checkBox=taskListItem.querySelector(".todo-app__input--checkbox");
var editButton=taskListItem.querySelector("button.edit");
var deleteButton=taskListItem.querySelector("button.delete");
diff --git a/index.html b/index.html
index ef4aa1f60c..02342db4ef 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,71 @@
+
-Todo App
-
-
-
-
-
-
-
Todo
-
Completed
-
Todo
+
+ Completed
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
index ab36227705..3b9e5ccb9e 100644
--- a/style.css
+++ b/style.css
@@ -1,148 +1,176 @@
/* Basic Style */
-body {
- background-color: #f8f8f8;
- color: #333;
- font-family: Lato, sans-serif;
+.page {
+ background-color: #f8f8f8;
+ color: #333;
+ font-family: Lato, sans-serif;
}
-.aaa {
- width: 500px;
- margin: 0 auto;
- display: block;
- text-align: right;
+
+.eisenhower-matrix {
+ width: 500px;
+ margin: 0 auto;
+ display: block;
+ text-align: right;
}
-.aaa img {
- width: 100%;
+
+.eisenhower-matrix__h1 {
+ visibility: hidden;
+ position: absolute;
}
-.aaa .more_inf {
- font-family: fantasy, cursive;
+
+.eisenhower-matrix__img {
+ width: 100%;
}
-@media (max-width:768px) {
-.aaa { text-align: center;
+.eisenhower-matrix__link {
+ font-family: fantasy, cursive;
}
+
+@media (max-width: 768px) {
+ .eisenhower-matrix {
+ text-align: center;
+ }
}
-.centered-main-page-element {
- display: block;
- width: 500px;
- margin: 0 auto 0;
+
+.todo-app {
+ display: block;
+ width: 500px;
+ margin: 0 auto 0;
}
-.task {
- width: 56%;
- display: inline-block;
- flex-grow: 1
+
+.todo-app__label--task,
+.todo-app__input--text {
+ width: 56%;
+ display: inline-block;
+ flex-grow: 1;
}
-.task-row-wrapper {
- display: flex;
+
+.todo-app__wrapper {
+ display: flex;
}
-ul {
- margin:0;
- padding: 0px;
+
+.todo-app__list {
+ margin: 0;
+ padding: 0;
}
-li, h3 {
- list-style:none;
+
+.todo-app__item,
+.todo-app__title {
+ list-style: none;
}
-input,button{
- outline:none;
+
+.todo-app__input,
+.todo-app__button {
+ outline: none;
}
-button {
- background: none;
- border: 0px;
- color: #888;
- font-size: 15px;
- width: 60px;
- font-family: Lato, sans-serif;
- cursor: pointer;
+
+.todo-app__button {
+ background: none;
+ border: 0px;
+ color: #888;
+ font-size: 15px;
+ width: 60px;
+ font-family: Lato, sans-serif;
+ cursor: pointer;
}
-button:hover {
- color: #3a3A3a;
+
+.todo-app__button:hover {
+ color: #3a3a3a;
}
+
/* 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;
+.todo-app__title,
+.todo-app__label--new {
+ color: #333;
+ font-weight: 700;
+ font-size: 15px;
+ border-bottom: 2px solid #333;
+ padding: 30px 0 10px;
+ margin: 0;
+ text-transform: uppercase;
+}
+
+.todo-app__input--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;
+}
+
+.todo-app__input--text:focus {
+ color: #333;
}
/* New Task */
-label[for='new-task'] {
- display: block;
- margin: 0 0 20px;
+.todo-app__label--new {
+ display: block;
+ margin: 0 0 20px;
}
-input#new-task {
- width: 318px;
+
+#new-task {
+ width: 318px;
}
/* Task list */
-li {
- overflow: hidden;
- padding: 20px 0;
- border-bottom: 1px solid #eee;
-
- display: flex;
- justify-content: space-between;
- align-items: center;
+.todo-app__item {
+ overflow: hidden;
+ padding: 20px 0;
+ border-bottom: 1px solid #eee;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
}
-li > * {
- vertical-align: middle;
+
+.todo-app__item > * {
+ vertical-align: middle;
}
-li > input[type="checkbox"] {
- margin: 0 10px;
+.todo-app__item > .todo-app__input--checkbox {
+ margin: 0 10px;
}
-li > label {
- padding-left: 10px;
- box-sizing: border-box;
- font-size: 18px;
- width: 226px;
+
+.todo-app__item > .todo-app__label {
+ padding-left: 10px;
+ box-sizing: border-box;
+ font-size: 18px;
+ width: 226px;
}
-li > input[type="text"] {
- width: 226px
+
+.todo-app__item > .todo-app__input--text {
+ width: 226px;
}
-button.delete img {
- height: 2em;
- transform: rotateZ(45deg);
- transition: transform 200ms ease-in;
+
+.todo-app__button.delete .todo-app__icon{
+ height: 2em;
+ transform: rotateZ(45deg);
+ transition: transform 200ms ease-in;
}
-button.delete img:hover {
- transform: rotateZ(0);
+
+.todo-app__button.delete .todo-app__icon:hover {
+ transform: rotateZ(0);
}
/* Completed */
-ul#completed-tasks label {
- text-decoration: line-through
- color: #888;
+.todo-app__list#completed-tasks .todo-app__label {
+ text-decoration: line-through;
+ color: #888;
}
/* Edit Task */
-ul li input[type=text] {
- display:none
+.todo-app__item .todo-app__input--text {
+ display: none;
}
-ul li.editMode input[type=text] {
- display:inline-block;
- width:224px
+.todo-app__item.edit-mode .todo-app__input--text {
+ display: inline-block;
+ width: 224px;
}
-ul li.editMode label {
- display:none;
+.todo-app__item.edit-mode .todo-app__label {
+ display: none;
}
\ No newline at end of file
Want more details?