How I Built a To-Do List with Priorities Using HTML, CSS, and JavaScript

Recently I built: a to-do list with a priority feature. It’s a simple web app that helps you manage your tasks by setting priorities, making sure you focus on what’s most important first. This project not only allowed me to brush up on my HTML, CSS, and JavaScript skills, but it also provided a practical tool that I now use daily to stay organized.

The Idea

I’ve always been a fan of to-do lists, but I wanted to add a little twist to the classic list by introducing priority levels. The idea is that each task has a priority, ranging from 1 (most important) to 4 (least important). This way, I can easily identify and tackle the most critical tasks first, without getting lost in the endless sea of things to do.

The project is divided into three main components:

1. HTML: Structure of the web page.
2. CSS: Styling the page to make it look clean and appealing.
3. JavaScript: Adding functionality to the to-do list, like adding, prioritizing, and deleting tasks.

The Code Breakdown

HTML (index.html)

The HTML file is pretty straightforward. It sets up the basic structure of the page, linking to the CSS and JavaScript files. Here’s a quick overview:

• The Device Layout: I wanted to give the to-do list a unique look, so I designed it within a device frame, which I thought would be a fun and engaging way to interact with tasks.
• Input and Priority Selection: Users can enter a task and select a priority level before adding it to the list.
• Task List: The tasks are displayed in an unordered list, with each task showing its priority and a delete button.

Here’s a snippet from the HTML:

<div class="todo-container">
    <input type="text" id="task-input" placeholder="Enter a task">
    <select id="priority-select">
        <option value="1">Priority 1</option>
        <option value="2">Priority 2</option>
        <option value="3">Priority 3</option>
        <option value="4">Priority 4</option>
    </select>
    <button id="add-task-button">Add Task</button>
    <ul id="task-list"></ul>
</div>

CSS (styles.css)

The CSS is where the magic happens in terms of design. I focused on creating a retro, game-like interface for the to-do list, complete with a device frame, buttons, and a screen area where the tasks are displayed.

• Device Design: The container is styled to look like a handheld device, with buttons, a D-pad, and a screen.
• Task List Styling: Each task is styled with a background color, border, and a delete button that pops with a bold red color, making it easy to remove tasks you’ve completed or no longer need.

Here’s a snippet of the CSS:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.device {
    width: 300px;
    height: 500px;
    background-color: #d32f2f;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid black;
}

/* To-Do List Styles */
.todo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

#task-input, #priority-select {
    width: 80%;
    padding: 8px;
    border: 2px solid black;
    border-radius: 5px;
    margin-bottom: 10px;
}

#task-list li {
    background-color: #f9f9f9;
    padding: 8px;
    margin-bottom: 5px;
    border: 1px solid black;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

JavaScript (script.js)

Finally, the JavaScript adds functionality to the to-do list. This script handles adding new tasks to the list, assigning priorities, and deleting tasks when they’re completed.

• Adding Tasks: The addTask() function grabs the task input and priority level, then adds it to the list.
• Deleting Tasks: Each task has a delete button that triggers the deleteTask() function, removing it from the list.

Here’s a basic overview of the JavaScript logic:

document.getElementById('add-task-button').addEventListener('click', addTask);

function addTask() {
    const taskInput = document.getElementById('task-input').value;
    const priority = document.getElementById('priority-select').value;

    if (taskInput) {
        const taskItem = document.createElement('li');
        taskItem.innerHTML = `<span class="task-text">${taskInput}</span>
                              <span class="priority">P${priority}</span>
                              <button class="delete-task">Delete</button>`;
        
        document.getElementById('task-list').appendChild(taskItem);
        
        taskItem.querySelector('.delete-task').addEventListener('click', () => {
            taskItem.remove();
        });
    }
}

Why I Built This

As a student, managing my time effectively is crucial. This project not only helped me understand how front-end development works but also provided me with a useful tool for organizing my day-to-day tasks. Plus, building this project gave me hands-on experience with DOM manipulation in JavaScript and responsive design in CSS.

Whether you’re a fellow student or just someone looking to get more organized, I hope you find this project as helpful as I do!