human
Build me in HTML, CSS, and JavaScript an extremely simple To-do-list web application
gpt
Certanly!

HTML (index.html):

    <!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>
        <h1>To-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add a task">
        <button onclick="addTask()">Add Task</button>
        <ul id="taskList"></ul>
        <script src="scripts.js"></script>
    </body>
    </html>

CSS (style.css):

    body {
        font-family: Arial, sans-serif;
        max-width: 600px;
        margin: 50px auto;
        text-align: center;
    }
    
    h1 {
        margin-bottom: 40px;
    }
    
    input {
        font-size: 18px;
        padding: 10px;
        width: 300px;
    }
    
    button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 30px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 18px;
        margin: 4px 2px;
        cursor: pointer;
    }
    
    ul {
        list-style: none;
        padding: 0;
    }

    li {
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        margin-bottom: 5px;
        padding: 10px 20px;
        cursor: pointer;
    }
    
    li.done {
        text-decoration: line-through;
        color: #888;
    }

JavaScript (script.js):

    function addTask()
    {
        const taskInput = document.getElementById('taskInput');
        const taskList = document.getElementById('taskList');
        const taskText = taskInput.value.trim();
    
        if (taskText !== "")
        {
            const newTask = document.createElement('li');
            newTask.innerText = taskText;
            newTask.onclick = toggleTaskStatus;
            taskList.appendChild(newTask);
            taskInput.value = "";
        }
    }
    
    function toggleTaskStatus()
    {
        this.classList.toggle('done');
    }