Lesson 8: Building the Todo App Structure

What You'll Learn Today

Today is a big day! We're going to start building our very own Todo List application. This project will bring together everything you've learned so far about HTML, CSS, and JavaScript into one fun, practical app.

Why Build a Todo App?

The Todo App is a classic project for a reason! It's simple enough to understand but complex enough to teach you how to manage data, update the screen, and handle user interactions in a real application. It's like building your first mini-house with all the tools you've collected!

Learning Objectives

Plan and structure a simple web application, thinking about how different parts work together.
Implement basic add and display functionality for tasks in our todo list.
Combine HTML, CSS, and JavaScript skills to create a working, interactive application.

Core Concepts: State & Rendering

In a web application, we often have "data" (like our list of todos) and a "display" (what the user sees on the screen). When the data changes, we need to update the display. This is called rendering.

let todos = []; Application State

This array will hold all our todo tasks. It's like the brain of our app, remembering everything. When we add a todo, we add it to this array.

function addTodo() { ... } Adding Data

This function will take the text from the input box and add it to our `todos` array. After adding, it will call `displayTodos()` to update the screen.

function displayTodos() { ... } Rendering the UI

This function is super important! It looks at our `todos` array and builds all the HTML for the list items. It then puts that HTML onto the page, making sure the screen always matches our data.

Global State Management Keeping Track

By keeping our `todos` array outside of any function, it's a "global" variable. This means all our functions can see and change it, making it easy to manage the app's data from anywhere.

Your Mission: Build the Basic Todo App

Your mission is to implement the `addBasicTodo()` and `displayBasicTodos()` functions. The HTML structure is already provided in the editor.

Pro Tip

Remember to call `displayBasicTodos()` both when the page loads (after defining the function) and every time a new todo is added!

Step 1: Implement `addBasicTodo()`.
- Get the value from the input field (`basicTodoInput`).
- Add the new todo text to the `basicTodos` array.
- Clear the input field.
- Call `displayBasicTodos()` to update the list on the screen.
Step 2: Implement `displayBasicTodos()`.
- Get a reference to the `basicTodoList` `<ul>` element.
- Use the `map()` array method to transform each todo in `basicTodos` into an HTML `<li>` string.
- Use `join('')` to combine all the `<li>` strings into one big string.
- Set the `innerHTML` of `basicTodoList` to this combined HTML string.
Step 3: Initial Display. Call `displayBasicTodos()` once when the script first runs to show any initial todos.

Take It Home

Think about how you might add a "mark as complete" or "delete" button to each todo item. We'll explore these advanced features in the next lesson!