dlydellf · dlydellf · May 31, 2021 · May 29, 2021 · May 29, 2021 · May 30, 2021
diff --git a/AJAX/ajax_basic.html b/AJAX/ajax_basic.html
@@ -26,9 +26,9 @@ <h2>Get The Latest Content:</h2>
             }
 
             // Step 4: Send the AJAX request for data:
-            function getContent() {}
+            function getContent() {
                 ajax.send()
-                document.getElementById("btn-content").style.display = "none"; // <<<< 'style.display=none' removes this element from display
+                document.getElementById("btn-content").style.display = "none";} // <<<< 'style.display=none' removes this element from display
 		</script>
     </body>
 </html>
diff --git a/Calculator/CSS/Calculator_CSS.css b/Calculator/CSS/Calculator_CSS.css
@@ -1,6 +1,6 @@
 /* Sets .html's elements' font size; any added padding/border gets included in element's total size */
 html {
-  font-size: 70%;
+  font-size: 1vw;
   box-sizing: border-box;
 }
 

diff --git a/ToDo_App/ToDo_CSS/ToDo.css b/ToDo_App/ToDo_CSS/ToDo.css
@@ -0,0 +1,43 @@
+html {
+  font-family: "Avenir Next", Helvetica, sans-serif;
+  text-align: center;
+}
+
+body {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+input {
+  padding-top: 30px;
+  width: 500px;
+  height: 60px;
+  font-size: 40px;
+  border: 0;
+}
+
+input:focus {
+  outline: none;
+}
+
+li {
+  text-align: left;
+  font-size: 40px;
+  list-style: none;
+  margin: 0;
+}
+
+ul {
+  text-align: center;
+}
+
+footer {
+  border: 1px solid grey;
+  position: fixed;
+  bottom: 0;
+}
+
+/* Adds padding between items in the array once one has been deleted */
+.remove {
+  padding-bottom: 5px;
+}
diff --git a/ToDo_App/ToDo_JS/ToDo.js b/ToDo_App/ToDo_JS/ToDo.js
@@ -0,0 +1,64 @@
+// This function gets the task from input:
+function get_todos() {
+  // This creates an array of tasks that are inputed:
+  var todos = new Array();
+  // This pulls the task that was saved in the web browser's memory:
+  var todos_str = localStorage.getItem("todo");
+  /* If input !== null, then "JSON.parse()" will communicate with the web browser to make the task a JS object: */
+  if (todos_str !== null) {
+    todos = JSON.parse(todos_str);
+  }
+  return todos;
+}
+/* This function adds the inputed task to the "get_todos()" array: */
+function add() {
+  // This takes the inputed task & creates a variable of it: */
+  var task = document.getElementById("task").value;
+  var todos = get_todos();
+  // This adds a new task to the array's end:
+  todos.push(task);
+  // This converts the task input to a JSON string:
+  localStorage.setItem("todo", JSON.stringify(todos));
+  document.getElementById("task").value = "";
+  show();
+  return false;
+}
+
+// This function keeps the tasks permanetly displayed on the screen:
+function show() {
+  // This sets the task that was retrieved as a variable:
+  var todos = get_todos();
+  // This sets up each task as an unordered list:
+  var html = "<ui>";
+  // This displays a task to the list in the order that it was inputed:
+  for (var i = 0; i < todos.length; i++) {
+    /* This also displays the task as a list, and creates the button with the "x": */
+    html += `<li> ${todos[i]}. <button class="remove" id=${[i]}>x</button></li>`;
+  }
+  html += "</ui>";
+  // This displays the task as a list:
+  document.getElementById("todos").innerHTML = html;
+  /* THis tells the browser how to display the todo array after an item has been removed: */
+  var buttons = document.getElementsByClassName("remove");
+  for (var i = 0; i < buttons.length; i++) {
+    buttons[i].addEventListener("click", remove);
+  }
+}
+// This displays the inputed task when the "Add Item" button is clicked:
+document.getElementById("add").addEventListener("click", add);
+// This will keep the inputs displayed permanently on the screen:
+show();
+
+/* ==============================================
+    Step 421 ToDo Assignment
+  ============================================ */
+function remove() {
+  var id = this.getAttribute("id");
+  var todos = get_todos();
+  todos.splice(id, 1);
+  localStorage.setItem("todo", JSON.stringify(todos));
+  /* This looks in the show() how to display a removed item on the screen: */
+  show();
+
+  return false;
+}
diff --git a/ToDo_App/index.html b/ToDo_App/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="./ToDo_CSS/ToDo.css" />
+    <title>ToDo App Assignment</title>
+  </head>
+  <body>
+    <input id="task" style="border: 1px solid grey"/><button id="add">Add Item</button>
+    <hr />
+    <div id="todos"></div>
+
+    <script src="ToDo_JS/ToDo.js"></script>
+    <footer>
+      <div>
+        www.ToDoApp.com &nbsp;|&nbsp; &#169 2021
+      </div>
+    </footer>
+  </body>
+</html>