In this step, we apply CSS styles to enhance the visual appearance of our to-do app. 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 3 of 4, in case you missed a step, all other steps will be linked below.

Step 3: CSS Styling

We remove the default list styling and add a strike-through effect for completed tasks using the completed class. Additionally, we can customize the fonts, colours, and layout of our app to make it more visually appealing and user-friendly.


/*General Style */
#todo-list {
  list-style-type: none;
  padding: 0;
}
/*When completed, add a strike through the task*/
.completed {
  text-decoration: line-through;
}

Next, we’re going to add put it all together and see what we get!

“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.