# Todo Array Practice

## What You Are Building

You are building a tiny to-do list app.

- Type a task in an input.
- Click Add to put it in the list.
- See the task appear on the page.
- Remove tasks from the list.

The important rule: the list on the page should always come from a JavaScript array.

## Why This Drill Exists

- Practice array state updates (`add` and `remove`).
- Practice rendering UI from data.
- Practice wiring events to behavior.

## Goal

Build a task list with JavaScript array updates and DOM rendering.

## Start

1. Open `script.js`.
2. Create a `tasks` array.
3. Select the input, button, and list elements.
4. Write a render function that builds `li` items from the array.
5. Add a handler to push a new task into the array.
6. Add a handler to remove a task from the array.
7. Re-render the list after each change.

## Check

- Tasks are stored in an array.
- The list changes after add and remove actions.
- The UI updates through JavaScript, not manual editing.

## Reflection

- What I typed myself:
- Almost nothing.
- What Copilot suggested:
    1. `input` tag
    2. `inputText`
    3. `.value`
    4. `.trim()`
    5. `push()`
    6. `inputText`
    7. `.innerHTML`
    8. `.createElement()`
    9. `.textContent`
    10. `.appendChild()` 
    11. `.splice()`
    12. `parseInt()`
    13. `prompt()`
    14. `!isNaN()`
    15. `alert()`
- What I learned:
- How to take an input from input field tag
- How to take input from button click
- How to use addEventListener
-