The humble yet powerful Todo List stands as a testament to the seamless marriage of simplicity and functionality. This guide will walk you through the process of creating your own Todo List using the trifecta of HTML, CSS, and JavaScript.
As we embark on this journey, we'll unravel the essential steps required to structure the list in HTML, style it with CSS for an appealing user interface, and infuse dynamic functionality through JavaScript.
This tutorial is your gateway to crafting an efficient and visually appealing Todo List. Let's dive into the world of HTML, CSS, and JavaScript to streamline your task management endeavors.
Share this to your programmer friends. I hope y'all learnt something today, make sure to let me in the comments.
Don't forget to subscribe to my YouTube Channel
This tutorial empowers you to take control of your web development journey, leveraging the power of HTML, CSS, and JavaScript to create a fully functional website that offers a seamless user experience.
If interested in watching the video before running the code below, you can click the play button to get started.
First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List app</title>
</head>
<body>
<div class="container">
<input type="text" placeholder="Enter list of events here" class="input">
<div class="mini_container"></div>
<div class="closure">
<footer>0 item added</footer>
<button class="clr_all">Clear All</button>
</div>
</div>
</body>
</html>
Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
width: 500px;
padding: 20px;
background: #f2f2f2;
border: 2px solid rgba(0, 0, 0, .7);
border-radius: 5px;
box-shadow: inset 2px 2px 10px #222,
inset -2px -2px 10px #222;
}
.container > input {
width: 100%;
padding: 15px 10px;
outline: none;
border: 1px solid rgba(0,0,0,.3);
border-radius: 5px;
font: 0.9 sans-serif;
}
.container > input::placeholder {
font: 1em sans-serif;
text-transform: uppercase;
}
.container button {
background: rgb(2, 2, 252);
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.closure {
display: flex;
align-items: center;
}
footer {
flex: 1;
font: 0.9em sans-serif;
}
.mini_container {
margin-top: 20px;
}
.mini_container > div {
background: rgba(0, 0, 0, .1);
border-radius: 5px;
display: flex;
align-items: center;
margin: 10px 0;
padding: 0 15px;
box-shadow: inset 2px 2px 10px #222,
inset -2px -2px 10px #222;
height: 50px;
}
.mini_container > div:nth-child(even) {
background: rgba(2, 2, 252, .9);
color: #fff;
}
.mini_container > div span {
flex: 1;
margin-left: 10px;
font: 0.9em sans-serif;
}
.mini_container > div img {
width: 25px;
cursor: pointer;
}
.mini_container > div input {
width: 20px;
height: 20px;
cursor: pointer;
}
.mini_container > div.completed {
color: rgba(0, 0, 0, .5);
text-decoration: line-through;
}
.mini_container > div:nth-child(even).completed {
color: rgba(255, 255, 255, .5);
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.<script>
const miniContainer = document.querySelector(".mini_container");
const input = document.querySelector("input");
input.addEventListener("keydown", (e) => {
if(e.key === "Enter") {
if(input.value !== "") {
addItem();
input.value = "";
}
};
})
let count = 0;
function addItem() {
count++;
count <= 1 ? document.querySelector("footer").textContent = `${count} item added` : document.querySelector("footer").textContent = `${count} items added`;
let value = input.value;
let checkbox = document.createElement("input");
checkbox.type = "checkbox";
let item = document.createElement("span");
item.textContent = input.value;
let close = document.createElement("img");
close.src = "close-block.png";
let div = document.createElement("div");
div.append(checkbox, item, close);
miniContainer.append(div);
miniContainer.querySelectorAll("input").forEach((item, count) => {
item.addEventListener("click", () => {
if(item.checked) {
let itemParentElement = item.parentElement;
itemParentElement.classList.add("completed");
}else {
let itemParentElement = item.parentElement;
itemParentElement.classList.remove("completed");
}
})
})
miniContainer.querySelectorAll("img").forEach((img, count) => {
img.addEventListener("click", e => {
img.parentNode.remove();
})
})
}
document.querySelector(".clr_all").addEventListener("click", e => {
miniContainer.innerHTML = "";
count = 0;
count <= 1 ? document.querySelector("footer").textContent = `${count} item added` : document.querySelector("footer").textContent = `${count} items added`;
})
</script>
0 Comments
We are happy to hear from you.