From d6acf623c0ea78adbefff742d812d2ddb8340095 Mon Sep 17 00:00:00 2001 From: h7x4 Date: Tue, 20 Oct 2020 00:14:33 +0200 Subject: [PATCH] Add assignment 7 --- Exercise 7/todo.css | 67 +++++++++++++++++++++++++++++++++++ Exercise 7/todo.html | 19 ++++++++++ Exercise 7/todo.js | 83 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 169 insertions(+) create mode 100644 Exercise 7/todo.css create mode 100644 Exercise 7/todo.html create mode 100644 Exercise 7/todo.js diff --git a/Exercise 7/todo.css b/Exercise 7/todo.css new file mode 100644 index 0000000..1384b60 --- /dev/null +++ b/Exercise 7/todo.css @@ -0,0 +1,67 @@ +body { + background-color: #272822; + color: #F8F8F8; + margin: 5% 20%; +} + +#title { + text-align: center; + color: #A6E22E; + font-size: 4em; +} + +#todoField { + display: block; + padding: 1em; + margin: 0 auto; + color: #F8F8F8; + background-color: #494b41; + font-size: 2em; + resize: none; +} + +#todoButton { + display: block; + padding: 1em; + margin: 1em auto; + color: black; + background-color: #FD971F; + font-size: 1.5em; + filter: drop-shadow(0.5em 0.5em 2px #191a16); +} + +#todoSummary { + font-size: 3em; + text-align: center; +} + +#todoList { + list-style-type: none; +} + +input[type=checkbox] { + width: 2em; + height: 2em; + margin-right: 2em; +} + +#todoList>li>span { + font-size: 3em; +} + +#todoList>li { + margin-bottom: 1.5em; +} + +/* Monokai rainbow list :DDD */ +#todoList>li:nth-child(7n+1) {color: #F92672;} +#todoList>li:nth-child(7n+2) {color: #FD971F;} +#todoList>li:nth-child(7n+3) {color: #E69F66;} +#todoList>li:nth-child(7n+4) {color: #E6DB74;} +#todoList>li:nth-child(7n+5) {color: #A6E22E;} +#todoList>li:nth-child(7n+6) {color: #66D9EF;} +#todoList>li:nth-child(7n) {color: #AE81FF;} + +.strikethrough { + text-decoration: line-through; +} diff --git a/Exercise 7/todo.html b/Exercise 7/todo.html new file mode 100644 index 0000000..027545d --- /dev/null +++ b/Exercise 7/todo.html @@ -0,0 +1,19 @@ + + + + + + Todo + + + + + +

Todo-list

+ + +
+ + + + \ No newline at end of file diff --git a/Exercise 7/todo.js b/Exercise 7/todo.js new file mode 100644 index 0000000..462cdfe --- /dev/null +++ b/Exercise 7/todo.js @@ -0,0 +1,83 @@ +const todoField = document.getElementById("todoField"); +const todoButton = document.getElementById("todoButton"); +const todoSummary = document.getElementById("todoSummary"); +const todoList = document.getElementById("todoList"); + +/** + * A task for the todolist + * @typedef {Object} Task + * @property {number} createdAt - Timestamp of the time that the task was created. + * @property {string} description - Description of the task. + * @property {boolean} isCompleted - Whether or not the task is completed. + */ + +const tasks = []; + +/** + * Add task to both tasks and DOM + */ +addTask = () => { + tasks.push({ + createdAt: Date.now(), + description: todoField.value, + completed: false + }); + + const taskElement = createTaskElement(tasks[tasks.length - 1]); + todoList.prepend(taskElement); + + todoField.value = ''; + + updateSummary(); +}; + +/** + * Generate HTML element for a task + * @param {Task} task - The task to be converted into an html element + * @return {HTMLLIElement} The
  • element + */ +createTaskElement = (task) => { + const listItem = document.createElement('li'); + + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.name = tasks.length - 1 + checkbox.addEventListener('change', updateCheckbox); + listItem.appendChild(checkbox); + + const description = document.createElement('span'); + description.innerText = task.description; + listItem.appendChild(description); + + return listItem; +} + +/** + * Function to react to change on a checkbox + * @param {Event} event - the event raised by the eventlistener + */ +updateCheckbox = (event) => { + const index = tasks.length - event.target.name - 1; + tasks[index].isCompleted = event.target.checked; + console.log(event); + + const descriptionSpanClasses = todoList + .children[index] + .getElementsByTagName('span')[0] + .classList + + if (event.target.checked) descriptionSpanClasses.add('strikethrough'); + else descriptionSpanClasses.remove('strikethrough'); + + updateSummary(); +} + +/** + * Update the summary span with new task values + */ +updateSummary = () => { + const tasksCompleted = tasks.filter(task => task.isCompleted).length; + todoSummary.innerText = `${tasksCompleted}/${tasks.length} completed.`; +} + +todoButton.addEventListener('click', addTask); \ No newline at end of file