This month, I will show you how to make a nice and simple to-do style list with JavaScript, HTML and CSS. As always, I’ve broken this script down into 4 steps:

  1. Define the basic HTML Structure of the page.
  2. Add the JavaScript Functionality to make it interactive.
  3. Add some CSS styling to add a strikethrough completed tasks.
  4. Integration. Making the JS and CSS files external for easy readability.
This is part 1 of 4, in case you missed a step, all other steps will be linked below.

Step 1: HTML Structure

In this step, we define the HTML structure of our to-do app. We create a title, a main heading, an input field for task entry, a button to add tasks, and an empty task list. This structure provides the foundation for our app and sets the stage for adding functionality.


#Apologies for the strange spacing, this interface does NOT like HTML.

< html>
< head>
< title>To-Do App
< /head>

< body>
< h1>To-Do App

< /body>
< /html>

Next, we’re going to create the JavaScript functionality.

“The code you write makes you a programmer. The code you delete makes you a good one. The code you don’t have to write makes you a great one.” – Mario Fusco.