Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a \"to-do list\" with CSS and JavaScript?
A to-do list allows you to manage your tasks effectively. When you type what needs to be done and press Enter, the task gets added to the list, and you can continue adding more tasks or click on existing ones to remove them.
Syntax
/* Input styling */
.todoInput {
padding: value;
width: value;
font-size: value;
border: value;
}
/* List item styling */
li {
list-style: none;
padding: value;
border: value;
}
HTML Structure
First, create the basic HTML structure with an input field and an unordered list −
<input class="todoInput" placeholder="Add Something" /> <ul id="list"></ul>
CSS Styling
Style the input field and list items to create an attractive interface −
.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;
cursor: pointer;
}
JavaScript Functionality
Add JavaScript to handle task addition and deletion −
function addItem() {
var todoItem = document.querySelector(".todoInput").value;
if (todoItem.trim() !== "") {
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("- " + todoItem));
ul.appendChild(li);
document.querySelector(".todoInput").value = "";
li.onclick = deleteItem;
}
}
document.body.onkeyup = function(ele) {
if (ele.keyCode == 13) {
addItem();
}
};
function deleteItem(ele) {
ele.target.parentElement.removeChild(ele.target);
}
Complete Example
Here's a complete working to-do list with CSS and JavaScript −
<!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: 600px;
margin: 20px auto;
background-color: #f5f5f5;
}
.container {
background-color: white;
border: 2px solid #333;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.todoInput {
width: 100%;
padding: 15px;
font-size: 18px;
border: 2px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 20px;
}
.todoInput:focus {
border-color: #4CAF50;
outline: none;
}
#list {
padding: 0;
margin: 0;
}
li {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 5px;
padding: 12px;
margin-bottom: 10px;
font-size: 16px;
list-style: none;
transition: background-color 0.3s;
}
li:hover {
background-color: #ffebee;
color: #d32f2f;
cursor: pointer;
}
.instruction {
text-align: center;
color: #666;
font-size: 14px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>My To-Do List</h1>
<input class="todoInput" placeholder="Enter a new task and press Enter" />
<ul id="list"></ul>
<div class="instruction">Click on any task to remove it</div>
</div>
<script>
function addItem() {
var todoItem = document.querySelector(".todoInput").value;
if (todoItem.trim() !== "") {
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("? " + todoItem));
ul.appendChild(li);
document.querySelector(".todoInput").value = "";
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>
A styled to-do list interface appears with a white container, input field, and space for tasks. Users can type tasks and press Enter to add them, then click on tasks to remove them. The interface includes hover effects and responsive styling.
Key Features
This to-do list includes several important features −
- Enter key functionality: Press Enter to add tasks quickly
- Click to delete: Click on any task to remove it from the list
- Input validation: Prevents adding empty tasks
- Responsive design: Works well on different screen sizes
- Hover effects: Visual feedback when hovering over tasks
Conclusion
This CSS and JavaScript to-do list provides a simple yet effective way to manage tasks. The combination of clean styling and interactive functionality makes it both user-friendly and visually appealing.
Updated on: 2026-03-15T14:48:41+05:30
494 Views
Advertisements