Hey guys, are you thinking about a project to make in JavaScript to boost your knowledge of the DOM in JavaScript, you have come to the right place. Today, we will be building a to-do list using HTML, CSS and JavaScript.

Create a form in your HTML document and a heading.

Sweet, next style your CSS. I’m sure you’ve noticed line 47 to line 56 do not exist in the HTML document. We will be adding that with JavaScript using Dom. With that being said let’s move straight to the JavaScript.

THE DOM

The Dom stands for document object model and it is used to select, manipulate and create HTML elements with Js(JavaScript). For example the menu button in a website responds to you clicking on it by bringing out a menu. to do that we used to DOM.

line 1–3. We use document, get element by ID then the ID of the HTML element to add it to the JavaScript and then store it in a variable. When they are stored in a variable you can perform several JavaScript method on them an example of this method is add event listener.

Line 5–9. The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target. I recommend you read this article to learn more about it. developer.mozilla.org/en-US/docs/Web/API/Ev..

So let’s create the function and set the variable call to the text to the value of the input. Line 14–17. We will check if the to do text has an input. If so the second if block will be executed.

Line 18–26 we use document create element and the name of the elements to create and element and pass the value of the input to the li and add the form in the HTML element using “document.appendChild” {line 23} the styles of the li have already been defined in the style.css line 47.

Hope you enjoyed it. Keep coding…..