 |
| Todo list using html css and javascript |
In this article, we given a Todo list using html css and javascript as a project. Todo list is the trending project which is created using html, css and javascript. It is use to manage our task as a task manager. User can add daily task, check them or delete them after completing the task. We created it with responsive design to access on smartphone.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Todo list using html css and javascript. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Todo-list.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Todo list using html css and javascript source code
Here we given a html, css and js source code of Todo list project as given -
HTML
In HTML, we created a structure of the todo list. Linked css and javascript to add styling and functionality. Added headings, input, buttons and result texts with check input. Copy the html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo list</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>Task manager</h1>
<form id="task-form">
<input type="text" id="task-input" placeholder="Add new task...">
<button type="submit" id="add-task-btn">Add Task</button>
</form>
</div>
</header>
<main>
<div class="container">
<div class="tasks" id="task-list">
</div>
<div class="filters">
<button id="filter-all" class="filter-btn active">All</button>
<button id="filter-active" class="filter-btn">Active</button>
<button id="filter-completed" class="filter-btn">Completed</button>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>CSS
In css, we added a styling to the project. added a responsive design with css properties to color the design. Copy the given css code and paste it into style.css file.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f3f4f6;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #2c3e50;
color: #fff;
text-align: center;
padding: 15px 0;
}
header h1 {
margin: 0;
}
header form {
margin-top: 10px;
display: flex;
justify-content: center;
}
header input[type="text"] {
padding: 10px;
width: 60%;
border: 2px solid #ccc;
border-radius: 5px 0 0 5px;
font-size: 16px;
outline: none;
}
header button#add-task-btn {
padding: 10px 20px;
background-color: #3498db;
border: none;
border-radius: 0 5px 5px 0;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
header button#add-task-btn:hover {
background-color: #2980b9;
}
main {
display: flex;
justify-content: center;
margin-top: 20px;
}
.tasks {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 100%;
overflow-y: auto;
}
.task {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #eee;
}
.task input[type="checkbox"] {
margin-right: 10px;
}
.task span {
flex-grow: 1;
}
.task .delete-btn {
background-color: #e74c3c;
color: #fff;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.task .delete-btn:hover {
background-color: #c0392b;
}
.task.completed span {
text-decoration: line-through;
opacity: 0.5;
}
.filters {
display: flex;
justify-content: center;
margin-top: 20px;
}
.filter-btn {
padding: 10px 20px;
margin: 0 5px;
background-color: #34495e;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
.filter-btn.active {
background-color: #2c3e50;
}
.filter-btn:hover {
background-color: #2c3e50;
}
@media (max-width: 600px) {
.container {
padding: 10px;
}
header form {
flex-direction: column;
}
header input[type="text"] {
width: 90%;
margin:auto;
margin-bottom: 10px;
}
header button#add-task-btn {
width: 100%;
border-radius: 5px;
margin-top: 5px;
}
.tasks {
padding: 10px;
}
.task .delete-btn {
padding: 5px 10px;
font-size: 14px;
}
.filters {
flex-wrap: wrap;
}
.filter-btn {
margin: 5px;
flex-grow: 1;
}
}Javascript
In javascript, we added a functionality to interact with todo list project. Functions are used to add and delete the items from the list. Also, Added a functionality to save the data after refreshing. Copy the given javascript code and paste it into script.js file.
document.addEventListener('DOMContentLoaded', function() {
const taskForm = document.getElementById('task-form');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');
const filterAll = document.getElementById('filter-all');
const filterActive = document.getElementById('filter-active');
const filterCompleted = document.getElementById('filter-completed');
let tasks = [];
loadTasks();
taskForm.addEventListener('submit', function(event) {
event.preventDefault();
const taskText = taskInput.value.trim();
if (taskText) {
addTask(taskText);
taskInput.value = '';
}
});
function addTask(taskText) {
const task = {
id: Date.now().toString(),
text: taskText,
completed: false
};
tasks.push(task);
saveTasks();
renderTasks();
}
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach(task => {
const taskElement = document.createElement('div');
taskElement.classList.add('task');
if (task.completed) {
taskElement.classList.add('completed');
}
taskElement.innerHTML = `
<input :="" checked="" task.completed="" type="checkbox"gt;
<${task.text}>
<button class="delete-btn" data-id="${task.id}">Delete</button>
`;
taskElement.querySelector('input[type="checkbox"]').addEventListener('change', function() {
toggleTaskCompletion(task.id);
});
taskElement.querySelector('.delete-btn').addEventListener('click', function() {
deleteTask(task.id);
});
taskList.appendChild(taskElement);
});
}
function toggleTaskCompletion(id) {
tasks = tasks.map(task => {
if (task.id === id) {
return { ...task, completed: !task.completed };
}
return task;
});
saveTasks();
renderTasks();
}
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
saveTasks();
renderTasks();
}
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function loadTasks() {
const savedTasks = localStorage.getItem('tasks');
if (savedTasks) {
tasks = JSON.parse(savedTasks);
renderTasks();
}
}
filterAll.addEventListener('click', function() {
filterTasks('all');
});
filterActive.addEventListener('click', function() {
filterTasks('active');
});
filterCompleted.addEventListener('click', function() {
filterTasks('completed');
});
function filterTasks(type) {
const filteredTasks = tasks.filter(task => {
if (type === 'active') {
return !task.completed;
} else if (type === 'completed') {
return task.completed;
} else {
return true; // 'all' type
}
});
tasks = filteredTasks;
renderTasks();
updateActiveFilter(type);
}
function updateActiveFilter(type) {
document.querySelectorAll('.filter-btn').forEach(button => {
button.classList.remove('active');
});
if (type === 'all') {
filterAll.classList.add('active');
} else if (type === 'active') {
filterActive.classList.add('active');
} else if (type === 'completed') {
filterCompleted.classList.add('active');
}
}
});Output
Check this output of Todo list project -
Also see this -
Hope this helps you to know about Todo list using html css and javascript with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects