Update some stuff

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;
 }
 

Exercise 7/todo.html

@@ -11,7 +11,7 @@
 
   <h1 id="title">Todo-list</h1>
   <textarea id="todoField" cols="60" rows="2" autofocus ></textarea>
-  <button id="todoButton">Add task</button>
+  <button id="todoButton">Add task (Enter)</button>
   <div id="todoSummary"></div>
   <ul id="todoList"></ul>
   

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);
+/**
+ * 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);