From 9d40086d858e0039427f9c51bed725cd62a7ef7d Mon Sep 17 00:00:00 2001 From: Tac82 Date: Wed, 9 Mar 2022 17:52:31 -0800 Subject: [PATCH] java lab4 --- Code/Jose/javascript/lab04/index.html | 33 +++++++++++++++ Code/Jose/javascript/lab04/static/index.css | 8 ++++ Code/Jose/javascript/lab04/static/todolist.js | 40 +++++++++++++++++++ 3 files changed, 81 insertions(+) create mode 100644 Code/Jose/javascript/lab04/index.html create mode 100644 Code/Jose/javascript/lab04/static/index.css create mode 100644 Code/Jose/javascript/lab04/static/todolist.js diff --git a/Code/Jose/javascript/lab04/index.html b/Code/Jose/javascript/lab04/index.html new file mode 100644 index 00000000..27848699 --- /dev/null +++ b/Code/Jose/javascript/lab04/index.html @@ -0,0 +1,33 @@ + + + + + + + + + + + To do list + + + + +

To do list

+ +
+ + +
+

To do:

+ + +

Completed:

+ + + + + \ No newline at end of file diff --git a/Code/Jose/javascript/lab04/static/index.css b/Code/Jose/javascript/lab04/static/index.css new file mode 100644 index 00000000..c21a5f8d --- /dev/null +++ b/Code/Jose/javascript/lab04/static/index.css @@ -0,0 +1,8 @@ +body { + background-color: #8fbc8f; + font-family: sans-serif; +} + +#completedList { + text-decoration: line-through; +} diff --git a/Code/Jose/javascript/lab04/static/todolist.js b/Code/Jose/javascript/lab04/static/todolist.js new file mode 100644 index 00000000..82d2e05c --- /dev/null +++ b/Code/Jose/javascript/lab04/static/todolist.js @@ -0,0 +1,40 @@ +let todoInput, addTodo, iList, cList, todoText, completedButton, deleteButton, li, todoTextDiv + +todoInput = document.querySelector('#todoInput'); +addTodo = document.querySelector('#addTodo'); +iList = document.querySelector('#incompletedList'); +cList = document.querySelector('#completedList'); + + +addTodo.onclick = function(){ + todoText = todoInput.value; + todoInput.value = ''; + + + li = document.createElement('li'); + li.classList.add('todo'); + todoTextDiv = document.createElement('div'); + todoTextDiv.innerHTML = todoText; + + + completedButton = document.createElement('button'); + completedButton.innerHTML = '✓'; + + completedButton.onclick = function(){ + iList.removeChild(this.parentElement); + li = document.createElement('li'); + li.innerText = todoText; + cList.appendChild(li); + }; + + deleteButton = document.createElement('button'); + deleteButton.innerHTML = '✗'; + deleteButton.onclick = function(){ + iList.removeChild(this.parentElement); + }; + + li.appendChild(todoTextDiv); + li.appendChild(completedButton); + li.appendChild(deleteButton); + iList.appendChild(li); +}; \ No newline at end of file