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