Modern To-Do List App Using HTML, CSS, and JavaScript

Hi, guys I am back with another fantastic project in this project I created a Modern ToDo App Using HTML, CSS & JavaScript.

I provide my readers and followers with the complete source code for this project without any cost or subscription requirements. The code files are available for free download and use.

Table of Contents

To-Do List App

A “to-do app” or “to-do list app” is a software application designed to help individuals or teams organize, manage, and prioritize tasks. The primary purpose of these apps is to assist users in keeping track of their activities, assignments, or goals.

Key features of to-do apps typically include:

1. Task Creation: Users can add tasks to the list, providing details such as task name, due date, priority, and any additional notes.

2. Organization: Tasks can often be organized into categories, projects, or tags, allowing users to create a structured and easily navigable list.

3. Prioritization: Users can set priorities for tasks, helping them focus on what needs to be done first.

4. Due Dates and Reminders: To-do apps often allow users to set due dates and receive reminders, ensuring that important tasks are not forgotten.

5. Completion Tracking: Users can mark tasks as completed, providing a sense of accomplishment and helping them keep an overview of their progress.

6. Collaboration (in some apps): Some to-do apps support collaboration, allowing users to share tasks or lists with others. This is particularly useful for team projects or shared responsibilities.

7. Cross-Platform Access: Many to-do apps offer synchronization across various devices, enabling users to access their tasks on smartphones, tablets, and computers.

Popular examples of to-do list apps include Todoist, Microsoft To-Do, Google Keep, Wunderlist (now part of Microsoft To-Do), and many others. These apps cater to different preferences and offer a range of features to meet various organizational needs.

About This Project

The Code Hunter team developed this project to assist students in learning coding and programming. If you’re interested in joining our team, please follow us on Instagram.

Created by	Ahmed Developer
Languages	HTML, CSS & JS
Source Code	Available Below
Preview	Take Preview
GitHub Link	Code Link

How to Create a To-Do List App Using HTML, CSS, and JS

There are some steps to create this type of To-Do List App Using HTML, CSS, and JavaScript which are given below.

The first step is to create one folder.

Open this folder in Vs Code Editor and create three (3) files for HTML, CSS, and JavaScript.
Make sure the HTML file extension is (.html), and the CSS file extension is (.css).
After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)

The last step is copying and pasting the given code into your files.

Video Tutorial

If you want to learn more about this project please watch this video and also subscribe to this YouTube channel for more content like this. This video is provided by Great Stack.

To-Do List App Using HTML, CSS, and JavaScript – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- boxicon cdn  -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <!-- custom css file  -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- app  -->
    <div class="todo-app">
        <!-- app header  -->
        <h1>Todo App</h1>

        <!-- input group  -->
        <form class="input-group">
            <input type="text" name="" id="taskInput" placeholder="Add a task" required >
            <button class="btn add-task-btn" onclick="addTask()">
                Add Task
            </button>
        </form>


        <!-- task list  -->
        <ul id="taskList"></ul>

    </div>

    <div class="attribute">
        Created by <a href="https://www.linkedin.com/in/ahmed-raza-developer/">Ahmed Developer</a>
    </div>


    <!-- custom js file  -->
    <script src="script.js"></script>

</body>
</html>

CSS FILE

/*
    fonts
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

/*
    global variables
*/
:root{
    /* colors  */
    --clr-primary: rgba(0,213,255,1) ;
    --clr-primary-btn: #0e0e0e ;
    --clr-compelete-btn: #28a745;
    --clr-delete-btn: #f44336  ;
    --clr-btn-text:#fff;
    --clr-bg-1:#fc466b;
    --clr-bg-2:#3f5efb;
    --clr-app-bg:#fff;
    --clr-item-bg:#e7eefc;
    --clr-item-hover-bg:#dbe7ff;

    /* typography */

    /* font sizes  */
    --fs-body:16px;
    --fs-regular:1.2rem;
    --fs-large:2rem;
}
/*
    base
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'poppins';
    font-size: var(--fs-body);
    background-color: var(--clr-primary);
}
.btn{
    padding: .5rem .75rem;
    border: none;
    border-radius: .5rem;
    cursor: pointer;
    color: var(--clr-btn-text);
    font-weight: 500;
    font-size: var(--fs-regular);
}

/* app  */
.todo-app{
    min-width: 600px;
    margin: 40px;
    padding: .5rem;
    background-color: var(--clr-app-bg);
    border-radius: 1rem;
}
.todo-app h1{
    text-align: center;
}
.input-group{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
}
input[type='text']{
    padding: .5rem .75rem;
    border-radius: .5rem;
}

.add-task-btn{
    background-color: var(--clr-primary-btn);
}

#taskList{
    margin-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}
li{
    list-style-type: none;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 560px;
    margin: .25rem auto;
    padding-inline: .25rem;
    position: relative;
    background-color: var(--clr-item-bg);
    border-radius: .5rem;
}
li:hover{
    background-color: var(--clr-item-hover-bg);
}
li * {
    margin: .5rem;
}

.compelete-btn{
    color: var(--clr-compelete-btn);
    cursor: pointer;
    font-size: var(--fs-regular);
}
.delete-btn{
    color: var(--clr-delete-btn);
    font-size: var(--fs-regular);
    cursor: pointer;
}

.completed{
    text-decoration: line-through;
    color: #007bff;
}
.completed .delete-btn{
    pointer-events: none;
}

.attribute{
    position: absolute;
    bottom: 10px;
}

@media (max-width:768px) {
    .todo-app{
        min-width: 320px;
        max-width: 350px;
    }
    .input-group{
        padding-top: 10px;
        flex-direction: column;
        row-gap: 20px;
    }
}

JavaScript FILE

// Array to store tasks
let tasks = [];

// Function to add a new task
function addTask() {
  const taskInput = document.getElementById('taskInput');
  const taskName = taskInput.value;

  console.log(taskName);

  if(taskName.trim() !== ''){
    const task = {
      id : Date.now(),
      name : taskName,
      completed : false
    };

    tasks.push(task);
    renderTasks();
    taskInput.value = '';
  }
}

// add new task when Enter key pressed 
const taskInput = document.getElementById('taskInput');
taskInput.addEventListener('keypress', function (event) {
    if (event.key === 'Enter') {
      addTask()
    }
});

// Function to delete a task
function deleteTask(id){
  tasks = tasks.filter(task => task.id !== id);
  renderTasks();
}

// Function to mark a task as completed
function markCompeleted(id){
  tasks = tasks.map(task => {
    if(task.id === id){
      task.completed = !task.completed;
    }
    return task;
  });
  renderTasks();
  updateCompleteTask(id);


}
function updateCompleteTask(id){
  const taskElement = document.getElementById(id);
  if(taskElement){
    const task = tasks.find(task => task.id === id);
    if(task.completed){
      taskElement.classList.add('completed');
    }else{
      taskElement.classList.remove('completed');
    }
  }
}

// Function to render tasks on the page
function renderTasks() {
  const taskList = document.getElementById('taskList');
  taskList.innerHTML = '';

  tasks.forEach(task => {
    // create new list item 
    const listItem = document.createElement('li');
    listItem.setAttribute('id', task.id);

    // create task name span
    const taskName = document.createElement('span');
    taskName.innerHTML = task.name;
    
    // create task compelete button 
    const completeButton = document.createElement('i');
    completeButton.classList.add('bx','bx-check','compelete-btn');
    completeButton.addEventListener('click' , () => markCompeleted(task.id))

    // create task delete button 
    const deleteButton = document.createElement('i');
    deleteButton.classList.add('bx','bxs-trash','delete-btn');
    deleteButton.addEventListener('click' , () => deleteTask(task.id))
    
    // add all elements into list 
    listItem.appendChild(taskName);
    listItem.appendChild(completeButton);
    listItem.appendChild(deleteButton);
    taskList.appendChild(listItem);

  });
}

// Initial rendering of tasks
renderTasks()

Final Words

This blog has guided readers through the creation of a modern to-do list app using HTML, CSS, and JavaScript, providing a complete source code for hands-on learning.

The project seamlessly integrates front-end technologies to deliver an interactive and visually appealing task management solution. By combining functionality with aesthetics, this tutorial serves as an excellent starting point for web development enthusiasts.

The emphasis on practical implementation equips readers with valuable insights into building responsive and feature-rich applications. Whether for personal use or as a foundation for more advanced projects, this to-do list app tutorial exemplifies the fusion of design and functionality in contemporary web development. Happy coding!

Modern To-Do List App Using HTML, CSS, and JavaScript – Complete Source Code