oscarplatoon · ankur-cp · Jun 21, 2021
diff --git a/script.js b/script.js
@@ -0,0 +1,84 @@
+let nextListId = 0
+let taskList = []
+const taskListKey = "tasks"
+
+localStorage.setItem("some_number", "7")
+
+initializeData()
+
+
+
+function initializeData() {
+  let stringData = localStorage.getItem(taskListKey)
+  if (stringData) {
+    // convert string stored in local storage to JS array
+    taskList = JSON.parse(stringData)
+
+    // add each task name to an unordered list on the page
+    for (let i = 0; i < taskList.length; i++) {
+      addTaskToPage(taskList[i])
+    }
+  }
+}
+
+
+function addTask() {
+  // find input element
+  let input = document.getElementById("input-task")
+  if (!input) {
+    return
+  }
+
+  // grab text from input
+  let taskName = input.value
+
+  addTaskToPage(taskName)
+
+  // add task to localStorage
+  taskList.push(taskName)
+  stringData = JSON.stringify(taskList)
+  localStorage.setItem(taskListKey, stringData)
+
+  input.value = ""
+}
+
+
+function addTaskToPage(taskName) {
+
+  // find existing parent list element
+  let taskListElement = document.getElementById("to-do-list")
+  if (!taskListElement) {
+    return
+  }
+
+  // create a new list item
+  let newListItem = document.createElement("li")
+  newListItem.id = "list-item-" + nextListId
+  nextListId += 1
+  newListItem.className = "task-list-item"
+  newListItem.addEventListener("click", toggleItemState)
+
+  // add text to new list item
+  newListItem.innerHTML = taskName
+
+  // add list item to existing list
+  taskListElement.appendChild(newListItem)
+}
+
+
+function toggleItemState(event) {
+  // get item
+  let listItem = document.getElementById(event.target.id)
+  if (!listItem)
+    return
+
+  // change strike-through state
+  let isCheckedOff = listItem.style.textDecoration === "line-through"
+
+  listItem.style.textDecoration = isCheckedOff 
+    ? "none"
+    : "line-through"
+  listItem.style.color = isCheckedOff 
+    ? "#000000"
+    : "#DD0000"
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,16 @@
+ body {
+   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+ }
+
+ .strike {
+  text-decoration: line-through;
+ }
+
+.btn-warning {
+  border: 4px dotted black;
+  color: white;
+}
+
+.task-list-item {
+  cursor: pointer;
+}
diff --git a/todo.html b/todo.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Todo List</title>
+
+  <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="stylesheet" type="text/css" href="styles.css">
+
+  <script src="script.js" defer></script>
+</head>
+<body>
+  <nav id="body-nav">
+
+  </nav>
+  <main id="body-main">
+    <h1>My To Do List</h1>
+    <div id="main-container">
+      <div id="list-container">
+        <ul id="to-do-list">
+        </ul>
+      </div>
+      <div id="input-container">
+        <input id="input-task" placeholder="new task"></input>
+        <button id="add-button" class="btn btn-warning" onclick="addTask();" >Add</button>
+      </div>
+    </div>
+  </main>
+  <footer id="body-footer">
+
+  </footer>
+</body>
+</html>