Make a new folder called "todo" in your file system. Create three new files in the folder: index.html, style.css, and script.js.
To the index.html file, add the following.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>To do List</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
Alternatively, you can utilize an online editor to create a new project; in this example, we'll use Codepen. Open a new pen by clicking here.
Add the following code in your body tag of the index.html.
<main>
<h3>Todo List</h3>
<form>
<input type="search" placeholder="Add an item">
<input type="submit" value="Add">
</form>
<h4>Click once to mark and double click to remove it</h4>
<ul></ul>
</main>
The main tag is used as a parent tag for all other tags. The h3 tag has a title and the form is used to collect data input by the user which will be displayed in the ul tag. H4 tag has some information for the user.
Add the following styles to your style.css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
body{
width: 100%;
min-height: 100vh;
background: linear-gradient(to bottom, #ad5389, #3c1053);
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}
main{
width: 100%;
padding: 20px;
color: #fff;
border: 2px solid #3c1053;
}
ul{
padding: 20px;
}
h4{
padding-bottom: 20px;
}
input{
padding: 10px;
}
input[type='submit']{
background: #3f2b96;
border: 2px solid #3f2b96;
color: #fff;
}
The css style styles the html, feel free to style the todo list to one’s liking.
Added the following code to your script.js.
const form = document.querySelector("form");
const ul = document.querySelector("ul");
form.addEventListener("submit", submit);
function submit(e){
e.preventDefault();
const li = document.createElement("li");
li.textContent = e.target[0].value;
ul.appendChild(li);
li.addEventListener("click", function(){
li.style.textDecoration = "line-through"
});
li.addEventListener("dblclick", function(){
li.style.display = "none"
});
form.reset();
}
Select the form and ul tag using the document.querySelector() method. Add an event listener to the selected form tag. The event is an on submit event. The moment the form is submitted, the code in the submit function runs. The submit function creates an li tag with the value of the inputted form value and appends it to the ul tag that was selected earlier.