diff --git a/Exercise 7/todo.css b/Exercise 7/todo.css index 1384b60..206c102 100644 --- a/Exercise 7/todo.css +++ b/Exercise 7/todo.css @@ -28,6 +28,7 @@ body { background-color: #FD971F; font-size: 1.5em; filter: drop-shadow(0.5em 0.5em 2px #191a16); + cursor: pointer; } #todoSummary { @@ -43,9 +44,12 @@ input[type=checkbox] { width: 2em; height: 2em; margin-right: 2em; + vertical-align: middle; + cursor: pointer; } #todoList>li>span { + display: inline-block; font-size: 3em; } diff --git a/Exercise 7/todo.html b/Exercise 7/todo.html index 027545d..230cbf8 100644 --- a/Exercise 7/todo.html +++ b/Exercise 7/todo.html @@ -11,7 +11,7 @@

Todo-list

- +
diff --git a/Exercise 7/todo.js b/Exercise 7/todo.js index 462cdfe..f6cfde1 100644 --- a/Exercise 7/todo.js +++ b/Exercise 7/todo.js @@ -20,13 +20,14 @@ addTask = () => { tasks.push({ createdAt: Date.now(), description: todoField.value, - completed: false + isCompleted: false }); const taskElement = createTaskElement(tasks[tasks.length - 1]); todoList.prepend(taskElement); todoField.value = ''; + todoField.focus(); updateSummary(); }; @@ -59,7 +60,6 @@ createTaskElement = (task) => { updateCheckbox = (event) => { const index = tasks.length - event.target.name - 1; tasks[index].isCompleted = event.target.checked; - console.log(event); const descriptionSpanClasses = todoList .children[index] @@ -80,4 +80,12 @@ updateSummary = () => { todoSummary.innerText = `${tasksCompleted}/${tasks.length} completed.`; } -todoButton.addEventListener('click', addTask); \ No newline at end of file +/** + * Handle the global keypresses and react on certain ones. + */ +handleKeys = (event) => { + if (event.which === 13 && document.activeElement === todoField) addTask(); +} + +todoButton.addEventListener('click', addTask); +document.addEventListener('keyup', handleKeys); \ No newline at end of file