Simple To-Do List Application Code

Answered using OpenAI o1 mini by OpenAI o1

Question:

Create a simple to-do list application using HTML, CSS, and vanilla JavaScript. The application should allow users to add, delete, and mark tasks as complete. Display the list of tasks in an organized manner, and provide visual cues to indicate completed tasks. Include functionality to clear all completed tasks. Finally, share the full code having combined all files in the html file.

Answer:

Sure! Below is a simple to-do list application created using HTML, CSS, and vanilla JavaScript. The application allows users to add tasks, delete tasks, mark tasks as complete, and clear all completed tasks. The code is combined into a single HTML file for easy use.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple To-Do List</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        #taskInput {
            width: 70%;
            padding: 10px;
            margin-right: 10px;
        }
        #addTaskBtn {
            padding: 10px 15px;
        }
        #taskList {
            list-style-type: none;
            padding: 0;
        }
        .task {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            margin: 5px 0;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .task.completed {
            text-decoration: line-through;
            color: gray;
        }
        .deleteBtn {
            background: red;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
        }
        .clearCompletedBtn {
            margin-top: 20px;
            padding: 10px 15px;
            background: orange;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>

    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task...">
    <button id="addTaskBtn">Add Task</button>
    <ul id="taskList"></ul>
    <button class="clearCompletedBtn" id="clearCompletedBtn">Clear Completed Tasks</button>

    <script>
        const taskInput = document.getElementById('taskInput');
        const addTaskBtn = document.getElementById('addTaskBtn');
        const taskList = document.getElementById('taskList');
        const clearCompletedBtn = document.getElementById('clearCompletedBtn');

        addTaskBtn.addEventListener('click', addTask);
        clearCompletedBtn.addEventListener('click', clearCompletedTasks);

        function addTask() {
            const taskText = taskInput.value.trim();
            if (taskText === '') {
                alert('Please enter a task!');
                return;
            }

            const li = document.createElement('li');
            li.className = 'task';
            li.innerHTML = `
                <span>${taskText}</span>
                <button class="deleteBtn">Delete</button>
            `;
            li.querySelector('.deleteBtn').addEventListener('click', () => {
                taskList.removeChild(li);
            });
            li.addEventListener('click', () => {
                li.classList.toggle('completed');
            });

            taskList.appendChild(li);
            taskInput.value = '';
        }

        function clearCompletedTasks() {
            const completedTasks = document.querySelectorAll('.task.completed');
            completedTasks.forEach(task => {
                taskList.removeChild(task);
            });
        }
    </script>

</body>
</html>

How to Use the Application:

  1. Add a Task: Type a task in the input field and click the "Add Task" button.
  2. Mark as Complete: Click on a task to mark it as complete. Completed tasks will be displayed with a strikethrough and in gray color.
  3. Delete a Task: Click the "Delete" button next to a task to remove it from the list.
  4. Clear Completed Tasks: Click the "Clear Completed Tasks" button to remove all tasks that have been marked as complete.

You can copy and paste the above code into an HTML file and open it in a web browser to see the to-do list application in action!