Add assignment 7
This commit is contained in:
parent
0983b959ab
commit
d6acf623c0
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Todo</title>
|
||||
<link rel="stylesheet" href="./todo.css">
|
||||
<script src="./todo.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="title">Todo-list</h1>
|
||||
<textarea id="todoField" cols="60" rows="2" autofocus ></textarea>
|
||||
<button id="todoButton">Add task</button>
|
||||
<div id="todoSummary"></div>
|
||||
<ul id="todoList"></ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 <li> 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);
|
||||
Loading…
Reference in New Issue