shecodestooiq · sanguine-dreams · Jul 6, 2023 · Jul 10, 2023 · Jul 12, 2023 · Jul 12, 2023
diff --git a/Screen Recording.mov b/Screen Recording.mov
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,92 @@
+body {
+    background-color: antiquewhite;
+    font-family: 'Permanent Marker', cursive;
+    margin-left: 3rem;
+    margin-right: 3rem;
+}
+
+form {
+    display: flex;
+}
+
+input {
+    border: 0;
+    background: none;
+    width: 100%;
+}
+
+input[type=text] {
+    border-bottom: 3px;
+    border-style: dashed;
+    border-bottom-color: black;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    color: rgba(0, 0, 0, 0.769);
+    font-family: 'Permanent Marker', cursive;
+}
+
+input[type=text]:focus {
+    outline: none;
+    color: rgba(0, 0, 0, 0.769);
+    font-family: 'Permanent Marker', cursive;
+
+}
+
+li {
+    display: flex;
+    border-bottom: 3px;
+    border-style: groove;
+    border-bottom-color: black;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.737);
+    font-size: large;
+
+
+}
+
+.todo-checkbox:checked+.checked-label {
+    text-decoration: line-through
+}
+
+input[type=checkbox] {
+    margin: 1rem;
+    background-color: blue;
+    accent-color: green;
+    width: 30px;
+    height: 30px;
+    border: 3px solid rgb(189, 18, 18);
+}
+
+button {
+    background-color: transparent;
+    border: 0;
+    font-family: 'Permanent Marker', cursive;
+    color: rgb(19, 143, 101);
+    font-size: larger;
+}
+
+::placeholder {
+    font-family: 'Permanent Marker', cursive;
+}
+
+h1 {
+    display: flex;
+    border-bottom: 3px;
+    border-style: groove;
+    border-bottom-color: black;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    align-items: center;
+    color: rgba(0, 0, 0, 0.765);
+}
+
+#sig {
+    position: relative;
+   bottom: 0;
+   float: right;
+}
diff --git a/images/kitties.png b/images/kitties.png
diff --git a/index.html b/index.html
@@ -1,19 +1,34 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <title>Todo List</title>
-  <link rel="stylesheet" type="text/css" href="style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>To do List</title>
+  <link rel="stylesheet" type="text/css" href="css/styles.css">
 </head>
+
 <body>
   <div class="container">
-    <h1>Todo List</h1>
+    <h1>To do List</h1> 
+    <button type="button" onclick="saveState()">Save for next time! </button>
+
+
     <form id="todoForm">
       <input type="text" id="todoInput" placeholder="Enter a task">
-      <button type="submit">Add</button>
+      <button type="submit" id="add">Add</button>
     </form>
+
+
     <ul id="todoList"></ul>
   </div>
-
-  <script src="script.js"></script>
+  <footer>
+    <img src="images/kitties.png" id="sig">
+  </footer>
+  <script src="js/scripts.js" defer></script>
 </body>
-</html>
+
+</html>
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,70 @@
+document.getElementById('add').addEventListener('click', function (event) {
+  event.preventDefault();
+  addItem();
+});
+
+// Function to add an item to the todo list
+function addItem() {
+  var todoInput = document.getElementById('todoInput');
+  var todoList = document.getElementById('todoList');
+
+  if (todoInput.value !== '') {
+      var listItem = document.createElement('li');
+
+      // Create a checkbox input element
+      var checkbox = document.createElement('input');
+      checkbox.type = 'checkbox';
+      checkbox.className = 'todo-checkbox';
+
+      // Create a label for the checkbox
+      var label = document.createElement('label');
+      label.textContent = todoInput.value;
+      label.className = 'checked-label';
+
+      // Append the checkbox and label to the list item
+      listItem.appendChild(checkbox);
+      listItem.appendChild(label);
+
+      // Append the list item to the todoList
+      todoList.appendChild(listItem);
+
+      // Clear the input field
+      todoInput.value = '';
+
+      saveState(); // Save the state after adding an item
+  }
+}
+
+// Function to save the state
+function saveState() {
+  var todos = [];
+  var todoItems = document.querySelectorAll("#todoList li");
+
+  // Iterate over the todo items and store their text content
+  for (var i = 0; i < todoItems.length; i++) {
+      todos.push(todoItems[i].textContent);
+  }
+
+  // Save the state in local storage
+  localStorage.setItem("savedTodos", JSON.stringify(todos));
+}
+
+// Function to load the saved state
+function loadState() {
+  var savedTodos = localStorage.getItem("savedTodos");
+
+  if (savedTodos) {
+      var todos = JSON.parse(savedTodos);
+
+      // Create and append list items for each saved todo
+      var todoList = document.getElementById("todoList");
+      for (var i = 0; i < todos.length; i++) {
+          var listItem = document.createElement("li");
+          listItem.innerHTML = '<input type="checkbox" class="todo-checkbox"><label class="checked-label">' + todos[i] + '</label>';
+          todoList.appendChild(listItem);
+      }
+  }
+}
+
+// Call the loadState function when the page loads
+window.onload = loadState;