How to create a "to-do list" with CSS and JavaScript?


A to-do list allows you to manage your task. It is like a note. When you type what needs to be done, for example, meeting at 4PM, you press Enter. On pressing Enter, the task gets added and a section for another task is visible wherein you can type the next task, example, lunch with a colleague at 7PM, etc.

Add an Input Text to Enter a Task

To add an input task, use the <input>. A placeholder is also set using the placeholder attribute −

<input class="todoInput" placeholder="Add Something" />

Style the Input

The input is set with the todoInput class. We have set the height, width, etc −

.todoInput {
	margin-top: 10px;
	padding: 10px;
	width: 500px;
	height: 60px;
	font-size: 40px;
	border: 2px solid black;
	color: purple;
}

Set the Unordered List for the Items

On pressing Enter, a new list item is visible to add a new task, therefore an unordered list is set −

<ul id="list"></ul>

Style the List Items for the to-do List

For the list items, the list-style is set to none so that the bullet points are not visible. It won’t appear like a list−

li {
	text-align: left;
	font-size: 22px;
	list-style: none;
	border: 1px solid rgb(212, 212, 212);
	padding: 5px;
	margin-bottom: 10px;
}

Script for the to-do List

On entering a task and pressing Enter, the next input text is visible to enter the next task −

<script>
   function addItem() {
      var todoItem = document.querySelector(".todoInput").value;
      var ul = document.getElementById("list");
      var li = document.createElement("li");
      li.appendChild(document.createTextNode("- " + todoItem));
      ul.appendChild(li);
      todoItem = "";
      li.onclick = deleteItem;
   }
   document.body.onkeyup = function(ele) {
      if (ele.keyCode == 13) {
         addItem();
      }
   };
   function deleteItem(ele) {
      ele.target.parentElement.removeChild(ele.target);
   }
</script>

Key Code for Enter

On pressing Enter, the space for the next task is visible. Therefore, the key code for the Enter is taken care of −

document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
	addItem();
}

Example

To create a to-do list with CSS and JavaScript, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
      html {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      body {
         max-width: 500px;
         margin: 10px auto;
      }
      .todoInput {
         margin-top: 10px;
         padding: 10px;
         width: 500px;
         height: 60px;
         font-size: 40px;
         border: 2px solid black;
         color: purple;
      }
      li {
         text-align: left;
         font-size: 22px;
         list-style: none;
         border: 1px solid rgb(212, 212, 212);
         padding: 5px;
         margin-bottom: 10px;
      }
      li:hover {
         color: red;
      }
   </style>
</head>
<body>
   <div style="border: 1px solid black;">
      <h1 style="text-align: center;color: red;">To-do List Example</h1>
      <input class="todoInput" placeholder="Add Something" />
      <ul id="list"></ul>
   </div>
   <script>
      function addItem() {
         var todoItem = document.querySelector(".todoInput").value;
         var ul = document.getElementById("list");
         var li = document.createElement("li");
         li.appendChild(document.createTextNode("- " + todoItem));
         ul.appendChild(li);
         todoItem = "";
         li.onclick = deleteItem;
      }
      document.body.onkeyup = function(ele) {
         if (ele.keyCode == 13) {
            addItem();
         }
      };
      function deleteItem(ele) {
         ele.target.parentElement.removeChild(ele.target);
      }
   </script>
</body>
</html>

Updated on: 17-Nov-2023

246 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements