Building a To-Do List

Introduction:

Hello everyone! 👋 Today, I want to share my journey of building a to-do list application from scratch using HTML, CSS, and JavaScript. It's a practical project that helped me solidify my front-end web development skills, and I'm excited to walk you through the steps.

Step 1: Project Setup

I started by creating a new folder for my project and set up the basic file structure:

index.html: The main HTML file.
style.css: For styling the to-do list.
script.js: Where the JavaScript logic resides.
images: A folder for icons and images (optional).

Step 2: HTML Structure

In the index.html file, I set up the HTML structure for the to-do list. I created a container for the list itself, an input field for adding tasks, and a button to submit tasks.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Head content goes here -->
</head>
<body>
    <div class="app">
        <h1>My To-Do List</h1>
        <input type="text" id="task" placeholder="Add a new task">
        <button id="addTask">Add</button>
        <ul id="taskList">
            <!-- Tasks will be added dynamically here -->
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Styling with CSS

I used CSS to style the to-do list and make it visually appealing. I applied styles to the container, input field, button, and tasks.

/* Basic styling */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
}

.app {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}

h1 {
    text-align: center;
    color: #333;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

/* Styling for tasks */
ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin: 10px 0;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px;
}

/* Add more styles as needed */

Step 4: JavaScript Logic

The core functionality of the to-do list is in the script.js file. I wrote JavaScript code to:

Handle user input and add tasks to the list.
Mark tasks as completed or incomplete.
Delete tasks from the list.