JavaScript continued Are you having trouble remembering what you have to do? Great news everyone! In this assignment you will make a todo list.
computer science
Description
Assignment 7:
JavaScript continued
Are you having trouble remembering what you have to do? Great news everyone! In this
assignment you will make a todo list.
Your submission shall consist of two files, an HTML page named todo.html and a JavaScript
file named todo.js . Go ahead and create them, and we will get along with this exciting
exercise.
Part 1: Prepare the HTML file (10%)
The HTML page should consist of a title, one button for adding tasks, a correlating input field,
an output element, and a list where the tasks are presented. Make sure to add IDs on the
appropriate places.
When the user enters the page, the input field shall automatically get the focus.
Connect your HTML page with the JavaScript file. The rest of the task, except part 4, should
be done in the JavaScript file.
Hint: The button and input field could both be input elements. An input element, with type set
to submit, could act as the button.
Part 2: Implementing Functionalities (20%)
Now you will start to implement some functionality.
When the user writes a task in the input field and clicks the add button, the task shall be
added to the empty list with a checkbox in front of it. Make a JavaScript function named
"addTask()" that does this. Place the newest task on the top of the list.
Hint: Use eventlisteners to listen on button clicks.
Hinter: You can remove the list bullet using CSS if you wish to do so.
Hintest: Use preventDefault() so that the page does not reload itself if you use a form.
