bartekus · missvader · Oct 20, 2022 · Oct 20, 2022 · Oct 20, 2022 · Oct 20, 2022
diff --git a/css/style.css b/css/style.css
@@ -1,7 +1,7 @@
 /* Basic Style */
 body {
   background: #fff;
-  color: #333;
+  color:salmon;
   font-family: Lato, sans-serif;
 }
 .container {
@@ -10,8 +10,8 @@ body {
   margin: 100px auto 0;
 }
 ul {
-  margin: 0;
-  padding: 0;
+
+  padding: 10px;
 }
 li * {
   float: left;

diff --git a/index.html b/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Todo list App</title>
+    <title>Waka-Waka App</title>
     <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/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>
+        <label for="new-task">New item</label><input id="new-task" type="text"><button>Add</button>
       </p>
 
       <h3>Todo</h3>
@@ -18,9 +18,9 @@ <h3>Todo</h3>
 
       </ul>
 
-      <h3>Completed</h3>
+      <h3><i>Completed</i></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>
+        <li><input type="checkbox" checked><label>See the Dr.</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
       </ul>
     </div>
 

diff --git a/js/app.js b/js/app.js
@@ -1,16 +1,16 @@
                                                                           // Vanila JavaScript todo list app
-var taskInput = document.getElementById("new-task");                      // New-task
-var addButton = document.getElementsByTagName("button")[0];               // First button
-var incompleteTasksHolder = document.getElementById("incomplete-tasks");  // Incomplete-tasks
-var completedTasksHolder = document.getElementById("completed-tasks");    // Completed-tasks
+let taskInput = document.getElementById("new-task");                      // New-task
+let addButton = document.getElementsByTagName("button")[0];               // First button
+let incompleteTasksHolder = document.getElementById("incomplete-tasks");  // Incomplete-tasks
+let completedTasksHolder = document.getElementById("completed-tasks");    // Completed-tasks
 
-var createNewTaskElement = function(taskString) {       // New Task List Item
-  var listItem = document.createElement("li");          // Create List Item
-  var checkBox = document.createElement("input");       // Input (checkbox)
-  var label = document.createElement("label");          // Label
-  var editInput = document.createElement("input");      // Input (text)
-  var editButton = document.createElement("button");    // Button.edit
-  var deleteButton = document.createElement("button");  // Button.delete
+let createNewTaskElement = function(taskString) {       // New Task List Item
+  let listItem = document.createElement("li");          // Create List Item
+  let checkBox = document.createElement("input");       // Input (checkbox)
+  let label = document.createElement("label");          // Label
+  let editInput = document.createElement("input");      // Input (text)
+  let editButton = document.createElement("button");    // Button.edit
+  let deleteButton = document.createElement("button");  // Button.delete
 
   checkBox.type = "checkbox";         // Each element needs to be modified
   editInput.type = "text";            //
@@ -29,21 +29,21 @@ var createNewTaskElement = function(taskString) {       // New Task List Item
   return listItem;
 };
 
-var addTask = function() {                            // Add a new task
-  var listItemName = taskInput.value || "New Item";   // We hold the current value or provide the default one
-  var listItem = createNewTaskElement(listItemName);  // Create a new list item with the text from #new-task
+let addTask = function() {                            // Add a new task
+  let listItemName = taskInput.value || "New Item";   // We hold the current value or provide the default one
+  let listItem = createNewTaskElement(listItemName);  // Create a new list item with the text from #new-task
   incompleteTasksHolder.appendChild(listItem);        // Append listItem to incompleteTasksHolder
   bindTaskEvents(listItem, taskCompleted);            // We bind it to the incomplete holder
   taskInput.value = "";                               // Resets the field
 };
 
-var editTask = function() {                                     // Edit an existing task
-  var listItem = this.parentNode;                               // Create List Item
-  var editInput = listItem.querySelector("input[type=text");    // Input (text)
-  var label = listItem.querySelector("label");                  // Label
-  var button = listItem.getElementsByTagName("button")[0];      // Button
+let editTask = function() {                                     // Edit an existing task
+  let listItem = this.parentNode;                               // Create List Item
+  let editInput = listItem.querySelector("input[type=text");    // Input (text)
+  let label = listItem.querySelector("label");                  // Label
+  let button = listItem.getElementsByTagName("button")[0];      // Button
 
-  var containsClass = listItem.classList.contains("editMode");  // We check for .editMode and assign it a variable
+  let containsClass = listItem.classList.contains("editMode");  // We check for .editMode and assign it a letiable
   if(containsClass) {                                           // Switch from .editMode
       label.innerText = editInput.value;                        // Label text become the input's value
       button.innerText = "Edit";                                // Buttons name modified to Edit
@@ -54,44 +54,44 @@ var editTask = function() {                                     // Edit an exist
     listItem.classList.toggle("editMode");                      // Toggle .editMode on the parent
 };
 
-var deleteTask = function() {      // Delete an existing task
-  var listItem = this.parentNode;  // We use parentNode to target the object containing the delete button
-  var ul = listItem.parentNode;    // We use parentNode again to target the list containing the task
+let deleteTask = function() {      // Delete an existing task
+  let listItem = this.parentNode;  // We use parentNode to target the object containing the delete button
+  let ul = listItem.parentNode;    // We use parentNode again to target the list containing the task
   ul.removeChild(listItem);        // Remove the parent list item from the ul
 };
 
-var taskCompleted = function() {               // Mark a task as complete
-  var listItem = this.parentNode;              // We assign it for readability
+let taskCompleted = function() {               // Mark a task as complete
+  let listItem = this.parentNode;              // We assign it for readability
   completedTasksHolder.appendChild(listItem);  // Append the task list item to the #completed-tasks
   bindTaskEvents(listItem, taskIncomplete);    // We bind it to the opposite holder
 };
 
-var taskIncomplete = function() {               // Mark a task as incomplete
-  var listItem = this.parentNode;               // We assign it for readability
+let taskIncomplete = function() {               // Mark a task as incomplete
+  let listItem = this.parentNode;               // We assign it for readability
   incompleteTasksHolder.appendChild(listItem);  // Append the task list item to the #incomplete-tasks
   bindTaskEvents(listItem, taskCompleted);      // We bind it to the opposite holder
 };
 
-var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {   // Select it's children
-  var checkBox = taskListItem.querySelector("input[type=checkbox]");  //
-  var editButton = taskListItem.querySelector("button.edit");         //
-  var deleteButton = taskListItem.querySelector("button.delete");     //
+let bindTaskEvents = function(taskListItem, checkBoxEventHandler) {   // Select it's children
+  let checkBox = taskListItem.querySelector("input[type=checkbox]");  //
+  let editButton = taskListItem.querySelector("button.edit");         //
+  let deleteButton = taskListItem.querySelector("button.delete");     //
   editButton.onclick = editTask;                                      // Bind editTask to edit button
   deleteButton.onclick = deleteTask;                                  // Bind deleteTask to delete button
   checkBox.onchange = checkBoxEventHandler;                           // Bind checkBoxEventHandler to checkbox
 };
 
-var ajaxRequest = function() {
+let ajaxRequest = function() {
   console.log("AJAX request");
 };
 
 addButton.addEventListener("click", addTask);      // Adds event listener for the click handler to the addTask function
 addButton.addEventListener("click", ajaxRequest);  // Adds an event listener for AJAX
 
-for(var i = 0; i < incompleteTasksHolder.children.length; i++) {     // Cycle over incompleteTasksHolder ul list items
+for(let i = 0; i < incompleteTasksHolder.children.length; i++) {     // Cycle over incompleteTasksHolder ul list items
   bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);  // Bind events to list item's children (taskCompleted)
 }
 
-for(var i = 0; i < completedTasksHolder.children.length; i++) {      // Cycle over completedTasksHolder ul list items
+for(let i = 0; i < completedTasksHolder.children.length; i++) {      // Cycle over completedTasksHolder ul list items
   bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);   // Bind events to list item's children (taskIncomplete)
 }