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

suraj maurya February 05, 2025

A To-Do List is a simple yet powerful application that helps users manage tasks efficiently. In this tutorial, you'll learn how to create a functional To-Do List using HTML, CSS, and JavaScript.

Step 1: Setting Up the HTML

Start by creating a basic structure for the To-Do List with an input field, a button to add tasks, and an unordered list to display the tasks.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>To-Do List</h2>
        <input type="text" id="taskInput" placeholder="Add a new task">
        <button onclick="addTask()">Add</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Styling with CSS

Use CSS to enhance the look of your To-Do List.

    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f4f4f4;
    }
    .container {
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    ul {
        list-style: none;
        padding: 0;
    }
    li {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        background: #e3e3e3;
        margin: 5px 0;
        border-radius: 5px;
    }
    .completed {
        text-decoration: line-through;
        color: gray;
    }

Step 3: Adding Functionality with JavaScript

Now, add interactivity to the To-Do List with JavaScript.

suraj maurya

Posted by suraj maurya

Post a Comment

1 Comments