Now it gets more exiting. We are going to create a very simple TODO app where users can add tasks and check tasks as completed.
You will learn how to:
- Declare functions and handle events from the browser
- Create and insert a set of elements with attributes and text into the webpage
The webpage for this example set up using separate files for JavaScript and CSS, to separate styling and scripts from the markup. the css
folder contains the styles, and scripts
folder contains the JavaScript.
Open bonus1.html
in Chrome and Visual Studio Code.
Functions in JavaScript are so called first-class, which means they are objects and can be manipulated and passed around just like any other object.
The browser emits various types of events based on user actions (scrolling, clicking, hovering, etc), incidents occurring while the page is preparing to be displayed (DOM finished parsing, images and resources done loading), and much more.
To make our code respond to events we need to declare a function to handle the event.
For example:
function buttonClickHandler(event) {
alert("Click event!");
console.log("event:", event);
event.preventDefault();
}
❗ Tip: event.preventDefault()
tells the browser not to execute the normal action, which in the case of a <input />
of type submit
, would be to submit the form and refresh the page.
This is the html for a submit button:
<input type="submit" value="Add" />
The DOM API has some convenient functions for manipulating and interacting with the page, such as:
var list = document.querySelector("ul"); // Gets the first ul element found in the DOM
var listItem = document.createElement("li"); // Create a new li element
list.appendChild(listItem); // Adds the li element as a child of the ul element
To register buttonClickHandler
as a event listener:
function buttonClickHandler(clickEvent) {
console.log("In click event");
}
var buttonElement = document.querySelector('input[type="submit"]');
buttonElement.addEventListener("click", buttonClickHandler);
Use the examples above when solving the tasks below.
We told the browser to send click
events from the "Add" button to the buttonClickHandler
function we declared earlier. The browser passed in the event which triggered the handler to the handler, and we printed out a message to console containing the event.
❗ Before starting, delete the code we added to task-1.js
in the last exercise. Also review the bonus1.html
and bonus1.js
files to understand how it currently works and what is missing.
✏️ In bonus1.js
, do the following:
- Find out how to query the DOM for
ul
(list) elements and assign the result to a variable. - Do the same for the text field (the
input
-field of typetext
) element. - Do the same for the
form
element as well. - Declare a function called
submitFormHandler
that takes anevent
parameter and logs it to the console. - ❗ in the
submitFormHandler
function, callevent.preventDefault()
as the last action in the function. This is to prevent the submit event from "bubbling up" to the browser and refreshing the page. _ Register thesubmitFormHandler
you just declared as an event listener on theform
element, listening forsubmit
events. _console.log
the output of the event. See if you can find a way to extract the value of the text-field. (Hint: Check outevent.target
). _ Once you have identified the source of the content for the text-field, print its content usingconsole.log
, inside of yoursubmitFormHandler
. _ Write something into the input box and click "Add". You should see the text you typed in to the input box displayed in the JavaScript console. * Find out how to query theul
element in the DOM, and try appending a value to the list (Create a new<li>
element, and append it to theul
element).
You will see that just appending text to the list does not look very nice. We will dynamically create <li>
-elements which contain a checkbox and a label, like the entries you can see in the bonus1.html
.
❗ Tip: Check out the setAttribute
-function on DOM-elements. MDN Docs.
✏️ To do this, add a new function called createTaskElement
which takes the description (the user input) as a parameter. Inside the function:
_ Create a new list element (<li>
)
_ Create a new input element of type checkbox
_ Create a new label element (this is the text for the checkbox)
_ The label must have a child node with text (the todo-description text the user inputs)
_ Append the checkbox element and the label element to the list element
_ Return the list element from the function.
This function needs to be called each time the submit
event is calling the submitFormHandler
function.
✏️ In the submitFormHandler
function, add:
_ Call the createTaskElement
function
_ Append the list element (return object from createTaskElement) to the task list (<ul>
) * Reset the value (text) of the input element to a empty string.
✏️ Try out the new code. You should be able to add tasks to the list. ✏️ Try inspecting the markup using the browser dev tools while adding tasks to see what happens to the DOM.