Note: This blog has an accompanying video available at my YouTube channel here: . If you are more of an audio and visual learner, or if you just want to see the code as it is written, check it out here. Thanks!
The main purpose of front end web development is being able to style, control, and manipulate what we see on our device screens. In other words, being able to manipulate the Document Object Model, or DOM. The DOM refers to a programming interface for HTML and XML documents, representing a document as nodes and objects so that programming languages can connect to the page.
The base of any web page is in the HTML or hypertext markup language. This is what will build out the structure of our web page, including its elements, links to scripting languages and styles, and more. Understanding the different elements involved in an HTML document is important to the basics of web development, so create our HTML page and break down its contents.
Visual Studio has features built in that make it quick and easy to generate a boiler plate HTML document. Create a new file called index.html and inside the file on the first line, type an ‘!’. You will notice VS shows a dropdown, and if we hit enter, it will select the first option and automatically fill in the HTML file for us.
The Bones of HTML
I want to briefly discuss some of the tags within an HTML document, what they mean, and what they are used for. If you are already familiar with the basics of HTML, feel free to skip this section. If you are not, I recommend reading this to get a solid base of knowledge. We will use the default template HTML as an example:
As we can guess, the first line indicates the type of document here will be an HTML, hence DOCTYPE. Then we have our actual <html></html> tags. These enclose the entire HTML document. Next we have the head tag where we will keep any metadata, or data about the the HTML, it is not displayed. Notice the meta tags. The first sets the charset or set of characters to use. The next scales the viewport to equate to the device it is displaying on, then the title, which we can change later if we want.
We’re going to create some make a few adjustments to the HTML and add a few tags to achieve our desired goal, which is of courses to make a ToDo application. We will add a script, label, input, button, div, and unordered lists tags, as seen below:
Notice the unordered list of things to do is currently empty, that is because we are going to use DOM manipulation to add our todo items! If we want to see what our application looks like so far, we can go to the terminal and type:
Your HTML page will be displayed in your default browser, but for the sake of this tutorial you should be using Google Chrome. So far, this is what our application looks like
If we go back to the browser where the HTML is displayed, right click on the page and select ‘inspect’. You will see a side panel pop up with the Elements tab selected. This is Chrome’s Developer Tools, and this is a very useful tool that you will likely use the rest of your developing career. For now, we will focus on the console, so switch tabs from Elements to Console. Click on the ‘Add’ button and note the message in the console.
Refreshing your browser page will now show the list we have created.
Now to enable our input we will set a variable equal to the selected input tag, just as with the other elements. We will also use very similar logic to that in our thingsToDo.map() function by creating a new element, setting the innerText, and appending to the list element.
There is one more major function that we can include in our application which is deleting a ToDo item once it has been completed. This will be the most tricky action we will perform in this project so I will cover it in depth and as clearly as possible.
Before we write any code, let’s think logically about how we can complete this. We need a way to select and individual item and choose to delete it, and the easiest way to do this is to add a ‘delete’ button to each ToDo item. In the same way we created our li or ‘list item’ element, we can create a ‘button’ element and append it to the page for each index of our thingsToDo list. By appending the new ‘button’ element we create to the ‘list item’ element, we will have a button that corresponds to each To Do item!
But something is not quite right with the functionality? If you add a new To Do item, you will notice there is not delete button and therefore no way to delete it. We could fix this by repeating the same logic we did inside the thingsToDo.map() function, but that would not be very DRY. One of the key concepts of programming is making sure you DRY, or Don’t Repeat Yourself. Additionally one of the key concepts of Object Oriented Programming is Abstraction, an example of which would be creating a function for some logic that repeats itself. For more information on OOP, check out one of my previous blogs on The Basics of Object Oriented Programming.
So to achieve this DRY code, we will take as much of the logic we can that will need to be repeated, and create a separate function for it. Thinking about our code logically, we can tell that in both adding a To Do item and in creating our initial list, we perform a lot of the same logic. This includes, creating an element, setting its text, and adding a delete button with functionality. What if we abstracted all that logic into its own function? We know for each situation, creating our initial list based on the hard coded array, and adding a new To Do item, we work with the same data which is simply a string. By writing a function that takes that new string, we can implement that function both at the load of our application and when we want to add a new To Do item, and only have to write the logic once!
Now we have a fully functioning To Do list, where we can add and delete items! Although it works great, it is not very pretty. In my next blog I will discuss adding some simple CSS to greatly enhance the User Interface or UI of this app, and really bring it to life.
Contribute to AidanMcB/spa-todolist development by creating an account on GitHub.
When loading a script on an HTML page, you need to be careful not to harm the loading performance of the page…
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites…
HTML Programming with Visual Studio Code
Get the best out of Visual Studio Code for HTML development