diff --git a/AJAX/ajax_basic.html b/AJAX/ajax_basic.html index b364586..9d1941e 100644 --- a/AJAX/ajax_basic.html +++ b/AJAX/ajax_basic.html @@ -26,9 +26,9 @@

Get The Latest Content:

} // 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 \ No newline at end of file diff --git a/Calculator/CSS/Calculator_CSS.css b/Calculator/CSS/Calculator_CSS.css index 556aac9..e8031bf 100644 --- 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 new file mode 100644 index 0000000..a59df32 --- /dev/null +++ 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 new file mode 100644 index 0000000..7637daf --- /dev/null +++ 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 = ""; + // 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 += `
  • ${todos[i]}.
  • `; + } + html += "
    "; + // 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 new file mode 100644 index 0000000..e7cb998 --- /dev/null +++ b/ToDo_App/index.html @@ -0,0 +1,22 @@ + + + + + + + + ToDo App Assignment + + + +
    +
    + + + + +