To Do List using HTML CSS JavaScript

A to-do list is a special type of website or web app feature that a user uses to record, organize, and track their necessary tasks or activities. This widget can be a simple widget, such as a checklist or a simple list. It can also be an advanced widget, such as a task management system with a specific deadline. It can also have reminders, progress tracking, etc. You may have seen the Tasks section in Google Keep. You may have also seen the checklist in the Notion app or the shopping list in an e-commerce app. In this blog post, we will share the source code of a simple yet attractive to-do list widget built using HTML, CSS, and JavaScript. For your convenience, we have included a video tutorial below where we have shown how to build this widget from scratch.

Video Tutorial:

We hope you have seen the above video tutorial on how to make a To Do list using HTML, CSS, and JavaScript. If you want to stay organized, productive, and goal-oriented, these types of widgets can help you a lot. Without relying on memory, you can remember and prioritize your important tasks. There are many benefits of using a to-do list. Some of them are improved time management, convenience, progress tracking, high productivity, stress reduction, etc. Websites and apps that require task tracking or activity management are using this widget. Websites and apps like fitness and wellness apps, event planning websites, project management tools, educational websites, e-commerce sites, etc., are using these types of widgets to help their users.

You May Also Like:

To Do List using HTML, CSS, and JavaScript [ Source Code ]:

To create the To Do List snippet, we have to create an HTML file and a CSS file. You can add a separate JS File and add js code there. After that, you have to copy the code from the code box below and paste it into your file. After saving the code, open it in your browser and see if you find any problems. In that case, you can download the code from the download button below the blog post.

ADD HTML:

<!DOCTYPE html> 
<html lang="en">
<!-- divinectorweb.com --> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To do list using html css and vanilla javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <div class="wrapper">
        <h2>To-Do List</h2>
        <div class="input-area">
            <input type="text" id="todo-input" placeholder="Please Enter a New task">
            <button id="btn-area">Add</button>
        </div>
        <ul class="list-area" id="list-area"></ul>
    </div>   

    <script>
        const todoInput = document.getElementById('todo-input');
        const addBtn = document.getElementById('btn-area');
        const todoList = document.getElementById('list-area');

    function addTodo() {
        const todoText = todoInput.value.trim();
        if (todoText === '') {
            alert('Please enter a task!');
            return;
        }
        const todoItem = document.createElement('li');
        todoItem.className = 'todo-item';
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.addEventListener('change', function() {
            todoItem.classList.toggle('completed');
        });
        const todoSpan = document.createElement('span');
        todoSpan.className = 'todo-text';
        todoSpan.textContent = todoText;
        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'delete-btn';
        deleteBtn.textContent = 'Delete';
        deleteBtn.addEventListener('click', function() {
            todoItem.remove();
        });
        todoItem.appendChild(checkbox);
        todoItem.appendChild(todoSpan);
        todoItem.appendChild(deleteBtn);
        todoList.appendChild(todoItem);
        todoInput.value = '';
    }
    addBtn.addEventListener('click', addTodo);
    todoInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            addTodo();
        }
    });
todoInput.focus();
    </script>



</body>
</html>

ADD CSS:

body {
	font-family: Arial, sans-serif;
	max-width: 600px;
	margin: 0 auto;
	padding: 20px;
	background-color: #002a40;
	color: #ffffff;
}
.wrapper {
	background-color: #002a40;
	padding: 20px;
	margin-top: 35px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.7);
}
.input-area {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}
#todo-input {
	flex: 1;
	padding: 10px;
	border: 1px solid #444;
	border-radius: 4px;
	font-size: 16px;
	background-color: #002a40;
	color: #ffffff;
}
#todo-input::placeholder {
	color: #888;
}
#btn-area {
	padding: 10px 25px;
	background-color: #f2b207;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-transform: uppercase;
	font-weight: bold;
	transition: background-color 0.3s;
}
#btn-area:hover {
	background-color: #d1a12a;
}
.list-area {
	list-style: none;
	padding: 0;
}
.todo-item {
	display: flex;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #444;
	transition: background-color 0.2s;
}
.todo-item:hover {
	background-color: #383838;
}
.todo-item.completed span {
	text-decoration: line-through;
	color: #666;
}
.todo-text {
	flex: 1;
	margin-left: 10px;
}
.delete-btn {
	background-color: #ff4444;
	color: white;
	border: none;
	padding: 5px 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
}
.delete-btn:hover {
	background-color: #cc0000;
}
input[type="checkbox"] {
	accent-color: #f2b207;
}

We can compare a productivity companion to a to-do list. If you want to transform your websites and apps from static tools to personal success hubs, this tool or widget is essential. If you want to make sure that none of your tasks are left incomplete, you can also use our widget. We hope you have collected the source code. For more code like this, you can click the "Load More" button on our homepage. Thank you for visiting our website.

DOWNLOAD CODE

Video Tutorial:

To Do List using HTML, CSS, and JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

To Do List using HTML CSS JavaScript

Video Tutorial:

To Do List using HTML, CSS, and JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form