Build me in HTML, CSS, and JavaScript an extremely simple To-do-list web application
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');
    }
excellent. i have test your codes and they work perfectly.