Built by

bwsmoke-refapp

Computer Science

Build a Task Board with Node, Events, and State

Create and run a small Task Board web app from the terminal. You will use the shell to control a Node project, connect button events to a small state model, and verify that the finished app builds, tests, and serves a working page.

2 modules4 lessonsComputer Science

What you learn by building this

Build it yourself, get guided when you are stuck, and leave with proof you can actually show.

Learning Journey

Control a Small Web App from the Terminal

2 lessons

Use familiar HTML and JavaScript as a bridge into the commands needed to run and inspect a Node project.

Assemble and Verify the Task Board

2 lessons

Turn the event-and-state pattern into a runnable Node web project with a repeatable install, build, test, and start workflow.

Public lesson

Navigate and Inspect from the Shell

Find Your Way in the Terminal

Before Node commands, get comfortable with one important idea: terminal commands act on the folder you are currently in. We’ll practice somewhere safe, not in the Task Board project.

Tasks

1. Make a tiny practice area

Using your file explorer/Finder, create this on your Desktop:

terminal-practice/
  welcome.txt
  ideas/
    api-note.txt

terminal-practice/
  welcome.txt
  ideas/
    api-note.txt

Put a short sentence in each file. For example:

welcome.txt: a sentence about learning the terminal
api-note.txt: a sentence about an API route

Save both files.

Check: You can see the two files and the ideas folder in your file explorer.

Tasks

2. Open a terminal at the Desktop

Open a terminal:

In VS Code: Terminal → New Terminal
Or open your usual Terminal / PowerShell app.

Your terminal may start in a project folder, your home folder, or somewhere else. That is normal.

First, find out where it is.

Terminal type	Command
macOS/Linux/Git Bash	`pwd`
PowerShell	`Get-Location`
Windows Command Prompt	`cd`

Run the matching command.

Check: The terminal prints a path, such as /Users/you/... or C:\Users\you\.... That path is your current folder.

Tasks

3. List what is in the current folder

Use the command for your terminal:

Terminal type	Command
macOS/Linux/Git Bash	`ls`
PowerShell	`Get-ChildItem`
Windows Command Prompt	`dir`

Look for Desktop in the result. If you see it, move into it with:

cd Desktop

cd Desktop

Then list the files again using your listing command.

Check: You should now see terminal-practice in the list.

If Desktop is not listed, use your file explorer to check where you made the folder. Folder names must match exactly; capitalization can matter on macOS and Linux.

Tasks

4. Enter the practice folder

Move into your practice folder:

cd terminal-practice

cd terminal-practice

Now run your location command again, then your listing command.

You should see a path ending in terminal-practice, and a list containing:

ideas
welcome.txt

ideas
welcome.txt

Check: Your terminal location ends with terminal-practice. You have not opened or changed the Task Board project.

Tasks

5. Move down one folder and read a file

Enter the ideas folder:

cd ideas

cd ideas

List its contents. You should find api-note.txt.

Now print that file’s contents:

Terminal type	Command shape
macOS/Linux/Git Bash	`cat FILE_NAME`
PowerShell	`Get-Content FILE_NAME`
Windows Command Prompt	`type FILE_NAME`

Replace FILE_NAME with your file’s actual name.

Check: The sentence you wrote in api-note.txt appears directly in the terminal.

Reading a file this way does not edit it; it is a safe way to inspect project files later.

Predict

What will happen?

6. Go back up

Before running anything, predict: if you are inside terminal-practice/ideas, where will this take you?

cd ..

cd ..

Tasks

Run it, then check your location and list files again.

Check: You are back in terminal-practice, with both ideas and welcome.txt visible.

.. always means “the folder one level above this one.”

Tasks

Mini mission

Starting from terminal-practice, do this without reopening Finder:

Confirm your current location.
List the folder’s contents.
Enter ideas.
Read api-note.txt.
Return to terminal-practice.
Read welcome.txt.

Your visible finish line: both sentences have appeared in the terminal, and your final location ends in terminal-practice.

Keep this small command map

location → pwd / Get-Location / cd
list     → ls / Get-ChildItem / dir
enter    → cd folder-name
up       → cd ..
read     → cat / Get-Content / type

location → pwd / Get-Location / cd
list     → ls / Get-ChildItem / dir
enter    → cd folder-name
up       → cd ..
read     → cat / Get-Content / type

For now, stay with these inspection commands. They are enough to confidently verify where you are and what files a future Node command will use.

Course Outline

2 modules · 4 lessons

Control a Small Web App from the Terminal

Assemble and Verify the Task Board

Learn by building your own version.

Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.