Harshil Chovatiya - Day 24 Practical Project

On Day 24, we put our DOM manipulation and JavaScript skills to use by building a simple interactive web application. In this project, we created a basic to-do list application that allows users to add, remove, and complete tasks.

Here's an overview of the key files and their contents:

Project Outline: Building a To-Do List

In this project, we'll create a simple to-do list web application. Users can add tasks, mark them as completed, and remove tasks. We'll focus on the following topics:

Adding Tasks with Event Listeners:

Use an event listener to capture the input of a new task and add it to the to-do list.

Marking Tasks as Completed:

Implement an event listener to mark tasks as completed when a user clicks on them.

Removing Completed Tasks:

Create an event listener to remove completed tasks from the list.

User Input Validation:

Implement input validation for adding tasks to ensure they are not empty.

HTML File Overview (index.html)

Start with a simple HTML structure for your to-do list:

                
                
         <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>Harshil Chovatiya - Day 24: ToDo List Application</title>
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" />
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <link rel="stylesheet" 
    href="style.css">
</head>

<body>
    <section class="main-section bg-light py-4 d-flex flex-column align-items-center">
        <h1 class="text-center text-uppercase fw-bold mb-4">
         Day 24: ToDo List Application</h1>
        <main class="todo-container mx-inline">
            <div class="todo-input-block bg-white shadow-lg rounded p-3 mb-4">
                <label for="todo_entry" 
                class="form-label fw-semibold">Enter your ToDo Heading</label>
                <div class="d-flex gap-2 align-items-start">
                    <div class="d-flex flex-column w-100">
                        <input type="text" name="" 
                        id="todo_entry" class="form-control"
                            placeholder="Enter your ToDo Item..." />
                        <small class="error-message 
                        text-danger fw-semibold" style="display: none;"></small>
                    </div>
                    <button type="button" id="submit_button" class="btn btn-primary col-4 px-1">
                        <i class="fa-solid fa-plus me-2 "></i>
                        <span class="__text">Add ToDo Item</span>
                    </button>
                    <button type="button" 
                    id="update_button" class="btn btn-primary col-4 px-1" 
                    style="display: none;">
                        <i class="fa-solid fa-pencil me-2 "></i>
                        <span class="__text">Update ToDo Item</span>
                    </button>
                    <button type="button" id="cancle_button" 
                    class="btn btn-outline-danger text-center"
                        style="display: none;">
                        <i class="fa-solid fa-times pe-none"></i>
                    </button>
                </div>
            </div>
            <ul class="todo-list"></ul>
        </main>
    </section>
    <script src="script.js"></script>
</body>

</html>

Styling with CSS:

Here's some basic CSS to style the to-do list:

        
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 
    'Helvetica Neue', sans-serif;
}

.main-section {
    min-height: 100vh;
}

.todo-container {
    position: relative;
    max-width: 600px;
    min-width: 600px;
}

.todo-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.todo-list__item {
    position: relative;
    border: 1px solid var(--bs-gray-200);
    background-color: var(--bs-white);
    border-radius: 0.35rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease-in;
}

.todo-list__item:hover {
    background-color: var(--bs-gray-300);
    box-shadow: none !important;
}

.todo-list__item .__buttons .__edit,
.todo-list__item .__buttons .__complete,
.todo-list__item .__buttons .__delete {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e6e6e6;
    transition: all 0.3s ease-in;
}

.todo-list__item .__buttons .__edit:hover {
    background-color: var(--bs-primary);
    color: var(--bs-white)
}

.todo-list__item .__buttons .__complete:hover {
    background-color: var(--bs-success);
    color: var(--bs-white)
}

.todo-list__item .__buttons .__delete:hover {
    background-color: var(--bs-danger);
    color: var(--bs-white)
}

.todo-list__item.completed {
    background-color: var(--bs-gray-500);
    border-color: var(--bs-gray-500);
    opacity: 0.5;
    text-decoration: line-through;
    user-select: none;
}

JavaScript:

Now, let's implement the JavaScript to make this application interactive:

                
                
const inputElement = document?.querySelector('#todo_entry');
const submitButton = document?.querySelector('#submit_button');
const updateButton = document?.querySelector('#update_button');
const cancleButton = document?.querySelector('#cancle_button');

const errorMessage = document.querySelector('.error-message');
const todoListContainer = document.querySelector('.todo-list');

let input_value = null;
let editableItem = {};
const input_value_min_length = 3;

const uniqueId = range => {
    let result = '';
    const letters = '0123456789~!@#$%^&*ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    for (let i = 0; i < range; i++) {
        result += letters.charAt(Math.floor(Math.random() * letters.length));
    };
    return result;
};

// Current Date
const currentDate = new Date().toJSON().slice(0, 10).replace(/-/g, '/');

let todoListData = [
    {
        heading: 'Add Your ToDO List',
        id: uniqueId(10),
        date: currentDate,
        completed: false,
    }, {
        heading: 'Discover More at harshilchovatiya.blogspot.com',
        id: uniqueId(10),
        date: currentDate,
        completed: false,
    },
    {
        heading: 'TaskTrove - Where Productivity Meets Simplicity',
        id: uniqueId(10),
        date: currentDate,
        completed: false,
    },

];

inputElement.addEventListener('input', (e) => {
    const this_item = e.target;

    input_value = this_item.value;

    if (input_value.length < input_value_min_length) {
        this_item.classList.remove('is-valid');
        this_item.classList.add('is-invalid');
        errorMessage.innerText = `Input Value cannot be less than ${input_value_min_length}`;
        errorMessage.style.display = 'block';
        return;
    } else {
        this_item.classList.remove('is-invalid');
        this_item.classList.add('is-valid');
        errorMessage.innerText = '';
        errorMessage.style.display = 'none';
        return input_value;
    }
});

const generateToDoItems = (array) => {
    array.map(item => {
        let itemHTML = `
      ${item.heading}
      
        
        
        
         
         
      
    `;
        todoListContainer.insertAdjacentHTML('beforeend', itemHTML);
    })
}

generateToDoItems(todoListData);

submitButton.addEventListener('click', (e) => {
    e.preventDefault();
    if (input_value) {
        inputElement.value = '';

        const newEntry = {
            heading: input_value,
            id: uniqueId(10),
            date: currentDate,
            completed: false,
        };

        todoListData.unshift(newEntry);
        todoListContainer.innerHTML = '';
        generateToDoItems(todoListData);

        inputElement.classList.remove('is-invalid');
        inputElement.classList.remove('is-valid');
        errorMessage.innerText = '';
        errorMessage.style.display = 'none';

    } else {
        inputElement.classList.add('is-invalid');
        errorMessage.innerText = 'Input Field cannot be empty!';
        errorMessage.style.display = 'block';
    }
});

const delete_todo_item = (event, id) => {
    todoListData = todoListData.filter(item => item.id !== id);
    let thisItem = event.target.parentNode.parentNode;
    thisItem.remove();
}
const edit_todo_item = (event, id) => {
    submitButton.style.display = 'none';
    updateButton.style.display = 'block';
    cancleButton.style.display = 'block';
    editableItem = todoListData.find(item => item.id === id);
    inputElement.value = editableItem.heading;
    input_value = editableItem.heading;
};
const complete_todo_item = (event, id) => {
    let completableItem = todoListData.find(item => item.id === id);
    completableItem.completed = true;
    todoListContainer.innerHTML = '';
    generateToDoItems(todoListData);
}
updateButton.addEventListener('click', (e) => {
    e.preventDefault();
    submitButton.style.display = 'block';
    updateButton.style.display = 'none';
    let updateableItem = todoListData.find(item => item.id === editableItem.id);
    updateableItem.heading = input_value;
    todoListContainer.innerHTML = '';
    generateToDoItems(todoListData);

    // reseting elements
    inputElement.classList.remove('is-valid');
    inputElement.classList.remove('is-invalid');
    inputElement.value = '';
    input_value = '';
    editableItem = {};
    cancleButton.style.display = 'none';
});
cancleButton.addEventListener('click', e => {
    e.preventDefault();
    inputElement.value = '';
    inputElement.classList.remove('is-valid');
    inputElement.classList.remove('is-invalid');
    input_value = '';
    editableItem = {};
    e.target.style.display = 'none';
    updateButton.style.display = 'none';
    submitButton.style.display = 'block';
})

Live Example

Here is the Live Preview of the above code

If you're interested in accessing the source code for this todo application, simply click on this link to visit the repository: Click Here. To get a feel for how the application works, you can check out the live preview by clicking here.

Conclusion:

With this practical project, you've built a simple interactive to-do list application using HTML, JavaScript, and CSS. You've applied your knowledge of DOM manipulation, event handling, and styles to create an interactive and responsive user interface. Building small projects like this is a great way to reinforce your skills and gain experience in web development. Feel free to expand and customize this project further to enhance your learning.

Harshil Chovatiya | Flutter Developer

Search This Blog