SoloDevMeet

Exercise library // practice before projects

7 core drills.
Practiced in 31 contexts.

These are variations of seven reusable coding drills, not 217 distinct apps. Each project context repeats UI, events, state, objects, lists, validation, and persistence before the full project.

HTML5CSS3JavaScriptReactNext.jsTypeScriptNode.jsFirebasePythonC++JavaRust
Open exercise 001See all exercises

217

practice variations

31 groups × 7 exercises

Skills you will repeat and master

1UI structure2Events3State4Data objects5Lists6Validation7Persistence

Complete exercise directory

Exercises 001–217

Exercises 001–007 · preparation group 01

Prepare for Name & Age Form

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 001UI structure

    Build one person record card

    Before building Name & Age Form, create only the smallest useful UI: a heading, a labeled name and age input, and a submit button. Do not build the full app yet.

    Open exercise →

  2. EX 002Events

    Make submit respond

    Attach a click or submit handler to the submit control. For now, log the current name and age; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 003State

    Store the current name and age

    Create one state value for name and age, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 004Data objects

    Shape one person record

    Turn the current name and age into a structured person record object with an id, value, and createdAt field. Log the object when the user chooses submit.

    Open exercise →

  5. EX 005Lists

    Render several person records

    Keep an array of person records. Add a new object on submit, then render every item with a stable key.

    Open exercise →

  6. EX 006Validation

    Handle invalid name and age

    Block empty input, show a useful error, and disable submit until name and age is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 007Persistence

    Keep person records after refresh

    Save the person record array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 007

    Ready for the project?

    Combine the seven skills in Name & Age Form.

    Start project →

Exercises 008–014 · preparation group 02

Prepare for Choice Quiz

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 008UI structure

    Build one answer choice card

    Before building Choice Quiz, create only the smallest useful UI: a heading, a labeled selected answer input, and a check button. Do not build the full app yet.

    Open exercise →

  2. EX 009Events

    Make check respond

    Attach a click or submit handler to the check control. For now, log the current selected answer; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 010State

    Store the current selected answer

    Create one state value for selected answer, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 011Data objects

    Shape one answer choice

    Turn the current selected answer into a structured answer choice object with an id, value, and createdAt field. Log the object when the user chooses check.

    Open exercise →

  5. EX 012Lists

    Render several answer choices

    Keep an array of answer choices. Add a new object on check, then render every item with a stable key.

    Open exercise →

  6. EX 013Validation

    Handle invalid selected answer

    Block empty input, show a useful error, and disable check until selected answer is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 014Persistence

    Keep answer choices after refresh

    Save the answer choice array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 014

    Ready for the project?

    Combine the seven skills in Choice Quiz.

    Start project →

Exercises 015–021 · preparation group 03

Prepare for To-Do Command Center

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 015UI structure

    Build one task card

    Before building To-Do Command Center, create only the smallest useful UI: a heading, a labeled task title input, and a add button. Do not build the full app yet.

    Open exercise →

  2. EX 016Events

    Make add respond

    Attach a click or submit handler to the add control. For now, log the current task title; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 017State

    Store the current task title

    Create one state value for task title, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 018Data objects

    Shape one task

    Turn the current task title into a structured task object with an id, value, and createdAt field. Log the object when the user chooses add.

    Open exercise →

  5. EX 019Lists

    Render several tasks

    Keep an array of tasks. Add a new object on add, then render every item with a stable key.

    Open exercise →

  6. EX 020Validation

    Handle invalid task title

    Block empty input, show a useful error, and disable add until task title is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 021Persistence

    Keep tasks after refresh

    Save the task array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 021

    Ready for the project?

    Combine the seven skills in To-Do Command Center.

    Start project →

Exercises 022–028 · preparation group 04

Prepare for Markdown Notes Lab

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 022UI structure

    Build one note card

    Before building Markdown Notes Lab, create only the smallest useful UI: a heading, a labeled note text input, and a save button. Do not build the full app yet.

    Open exercise →

  2. EX 023Events

    Make save respond

    Attach a click or submit handler to the save control. For now, log the current note text; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 024State

    Store the current note text

    Create one state value for note text, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 025Data objects

    Shape one note

    Turn the current note text into a structured note object with an id, value, and createdAt field. Log the object when the user chooses save.

    Open exercise →

  5. EX 026Lists

    Render several notes

    Keep an array of notes. Add a new object on save, then render every item with a stable key.

    Open exercise →

  6. EX 027Validation

    Handle invalid note text

    Block empty input, show a useful error, and disable save until note text is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 028Persistence

    Keep notes after refresh

    Save the note array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 028

    Ready for the project?

    Combine the seven skills in Markdown Notes Lab.

    Start project →

Exercises 029–035 · preparation group 05

Prepare for Budget Tracker

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 029UI structure

    Build one transaction card

    Before building Budget Tracker, create only the smallest useful UI: a heading, a labeled amount input, and a add button. Do not build the full app yet.

    Open exercise →

  2. EX 030Events

    Make add respond

    Attach a click or submit handler to the add control. For now, log the current amount; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 031State

    Store the current amount

    Create one state value for amount, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 032Data objects

    Shape one transaction

    Turn the current amount into a structured transaction object with an id, value, and createdAt field. Log the object when the user chooses add.

    Open exercise →

  5. EX 033Lists

    Render several transactions

    Keep an array of transactions. Add a new object on add, then render every item with a stable key.

    Open exercise →

  6. EX 034Validation

    Handle invalid amount

    Block empty input, show a useful error, and disable add until amount is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 035Persistence

    Keep transactions after refresh

    Save the transaction array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 035

    Ready for the project?

    Combine the seven skills in Budget Tracker.

    Start project →

Exercises 036–042 · preparation group 06

Prepare for Quiz Builder

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 036UI structure

    Build one question card

    Before building Quiz Builder, create only the smallest useful UI: a heading, a labeled answer input, and a answer button. Do not build the full app yet.

    Open exercise →

  2. EX 037Events

    Make answer respond

    Attach a click or submit handler to the answer control. For now, log the current answer; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 038State

    Store the current answer

    Create one state value for answer, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 039Data objects

    Shape one question

    Turn the current answer into a structured question object with an id, value, and createdAt field. Log the object when the user chooses answer.

    Open exercise →

  5. EX 040Lists

    Render several questions

    Keep an array of questions. Add a new object on answer, then render every item with a stable key.

    Open exercise →

  6. EX 041Validation

    Handle invalid answer

    Block empty input, show a useful error, and disable answer until answer is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 042Persistence

    Keep questions after refresh

    Save the question array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 042

    Ready for the project?

    Combine the seven skills in Quiz Builder.

    Start project →

Exercises 043–049 · preparation group 07

Prepare for Mini SoloDevMeet Chat

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 043UI structure

    Build one message card

    Before building Mini SoloDevMeet Chat, create only the smallest useful UI: a heading, a labeled message text input, and a send button. Do not build the full app yet.

    Open exercise →

  2. EX 044Events

    Make send respond

    Attach a click or submit handler to the send control. For now, log the current message text; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 045State

    Store the current message text

    Create one state value for message text, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 046Data objects

    Shape one message

    Turn the current message text into a structured message object with an id, value, and createdAt field. Log the object when the user chooses send.

    Open exercise →

  5. EX 047Lists

    Render several messages

    Keep an array of messages. Add a new object on send, then render every item with a stable key.

    Open exercise →

  6. EX 048Validation

    Handle invalid message text

    Block empty input, show a useful error, and disable send until message text is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 049Persistence

    Keep messages after refresh

    Save the message array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 049

    Ready for the project?

    Combine the seven skills in Mini SoloDevMeet Chat.

    Start project →

Exercises 050–056 · preparation group 08

Prepare for Personal Portfolio

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 050UI structure

    Build one project card card

    Before building Personal Portfolio, create only the smallest useful UI: a heading, a labeled project title input, and a open button. Do not build the full app yet.

    Open exercise →

  2. EX 051Events

    Make open respond

    Attach a click or submit handler to the open control. For now, log the current project title; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 052State

    Store the current project title

    Create one state value for project title, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 053Data objects

    Shape one project card

    Turn the current project title into a structured project card object with an id, value, and createdAt field. Log the object when the user chooses open.

    Open exercise →

  5. EX 054Lists

    Render several project cards

    Keep an array of project cards. Add a new object on open, then render every item with a stable key.

    Open exercise →

  6. EX 055Validation

    Handle invalid project title

    Block empty input, show a useful error, and disable open until project title is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 056Persistence

    Keep project cards after refresh

    Save the project card array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 056

    Ready for the project?

    Combine the seven skills in Personal Portfolio.

    Start project →

Exercises 057–063 · preparation group 09

Prepare for Calculator

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 057UI structure

    Build one calculation card

    Before building Calculator, create only the smallest useful UI: a heading, a labeled number input, and a calculate button. Do not build the full app yet.

    Open exercise →

  2. EX 058Events

    Make calculate respond

    Attach a click or submit handler to the calculate control. For now, log the current number; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 059State

    Store the current number

    Create one state value for number, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 060Data objects

    Shape one calculation

    Turn the current number into a structured calculation object with an id, value, and createdAt field. Log the object when the user chooses calculate.

    Open exercise →

  5. EX 061Lists

    Render several calculations

    Keep an array of calculations. Add a new object on calculate, then render every item with a stable key.

    Open exercise →

  6. EX 062Validation

    Handle invalid number

    Block empty input, show a useful error, and disable calculate until number is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 063Persistence

    Keep calculations after refresh

    Save the calculation array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 063

    Ready for the project?

    Combine the seven skills in Calculator.

    Start project →

Exercises 064–070 · preparation group 10

Prepare for Pomodoro Timer

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 064UI structure

    Build one focus session card

    Before building Pomodoro Timer, create only the smallest useful UI: a heading, a labeled duration input, and a start button. Do not build the full app yet.

    Open exercise →

  2. EX 065Events

    Make start respond

    Attach a click or submit handler to the start control. For now, log the current duration; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 066State

    Store the current duration

    Create one state value for duration, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 067Data objects

    Shape one focus session

    Turn the current duration into a structured focus session object with an id, value, and createdAt field. Log the object when the user chooses start.

    Open exercise →

  5. EX 068Lists

    Render several focus sessions

    Keep an array of focus sessions. Add a new object on start, then render every item with a stable key.

    Open exercise →

  6. EX 069Validation

    Handle invalid duration

    Block empty input, show a useful error, and disable start until duration is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 070Persistence

    Keep focus sessions after refresh

    Save the focus session array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 070

    Ready for the project?

    Combine the seven skills in Pomodoro Timer.

    Start project →

Exercises 071–077 · preparation group 11

Prepare for Course To-Do List

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 071UI structure

    Build one course task card

    Before building Course To-Do List, create only the smallest useful UI: a heading, a labeled task title input, and a add button. Do not build the full app yet.

    Open exercise →

  2. EX 072Events

    Make add respond

    Attach a click or submit handler to the add control. For now, log the current task title; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 073State

    Store the current task title

    Create one state value for task title, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 074Data objects

    Shape one course task

    Turn the current task title into a structured course task object with an id, value, and createdAt field. Log the object when the user chooses add.

    Open exercise →

  5. EX 075Lists

    Render several course tasks

    Keep an array of course tasks. Add a new object on add, then render every item with a stable key.

    Open exercise →

  6. EX 076Validation

    Handle invalid task title

    Block empty input, show a useful error, and disable add until task title is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 077Persistence

    Keep course tasks after refresh

    Save the course task array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 077

    Ready for the project?

    Combine the seven skills in Course To-Do List.

    Start project →

Exercises 078–084 · preparation group 12

Prepare for GitHub Profile Finder

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 078UI structure

    Build one GitHub profile card

    Before building GitHub Profile Finder, create only the smallest useful UI: a heading, a labeled username input, and a search button. Do not build the full app yet.

    Open exercise →

  2. EX 079Events

    Make search respond

    Attach a click or submit handler to the search control. For now, log the current username; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 080State

    Store the current username

    Create one state value for username, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 081Data objects

    Shape one GitHub profile

    Turn the current username into a structured GitHub profile object with an id, value, and createdAt field. Log the object when the user chooses search.

    Open exercise →

  5. EX 082Lists

    Render several GitHub profiles

    Keep an array of GitHub profiles. Add a new object on search, then render every item with a stable key.

    Open exercise →

  6. EX 083Validation

    Handle invalid username

    Block empty input, show a useful error, and disable search until username is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 084Persistence

    Keep GitHub profiles after refresh

    Save the GitHub profile array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 084

    Ready for the project?

    Combine the seven skills in GitHub Profile Finder.

    Start project →

Exercises 085–091 · preparation group 13

Prepare for Weather App

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 085UI structure

    Build one weather result card

    Before building Weather App, create only the smallest useful UI: a heading, a labeled city input, and a search button. Do not build the full app yet.

    Open exercise →

  2. EX 086Events

    Make search respond

    Attach a click or submit handler to the search control. For now, log the current city; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 087State

    Store the current city

    Create one state value for city, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 088Data objects

    Shape one weather result

    Turn the current city into a structured weather result object with an id, value, and createdAt field. Log the object when the user chooses search.

    Open exercise →

  5. EX 089Lists

    Render several weather results

    Keep an array of weather results. Add a new object on search, then render every item with a stable key.

    Open exercise →

  6. EX 090Validation

    Handle invalid city

    Block empty input, show a useful error, and disable search until city is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 091Persistence

    Keep weather results after refresh

    Save the weather result array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 091

    Ready for the project?

    Combine the seven skills in Weather App.

    Start project →

Exercises 092–098 · preparation group 14

Prepare for Quiz Game

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 092UI structure

    Build one quiz answer card

    Before building Quiz Game, create only the smallest useful UI: a heading, a labeled selected answer input, and a check button. Do not build the full app yet.

    Open exercise →

  2. EX 093Events

    Make check respond

    Attach a click or submit handler to the check control. For now, log the current selected answer; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 094State

    Store the current selected answer

    Create one state value for selected answer, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 095Data objects

    Shape one quiz answer

    Turn the current selected answer into a structured quiz answer object with an id, value, and createdAt field. Log the object when the user chooses check.

    Open exercise →

  5. EX 096Lists

    Render several quiz answers

    Keep an array of quiz answers. Add a new object on check, then render every item with a stable key.

    Open exercise →

  6. EX 097Validation

    Handle invalid selected answer

    Block empty input, show a useful error, and disable check until selected answer is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 098Persistence

    Keep quiz answers after refresh

    Save the quiz answer array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 098

    Ready for the project?

    Combine the seven skills in Quiz Game.

    Start project →

Exercises 099–105 · preparation group 15

Prepare for Expense Tracker

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 099UI structure

    Build one expense card

    Before building Expense Tracker, create only the smallest useful UI: a heading, a labeled amount input, and a add button. Do not build the full app yet.

    Open exercise →

  2. EX 100Events

    Make add respond

    Attach a click or submit handler to the add control. For now, log the current amount; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 101State

    Store the current amount

    Create one state value for amount, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 102Data objects

    Shape one expense

    Turn the current amount into a structured expense object with an id, value, and createdAt field. Log the object when the user chooses add.

    Open exercise →

  5. EX 103Lists

    Render several expenses

    Keep an array of expenses. Add a new object on add, then render every item with a stable key.

    Open exercise →

  6. EX 104Validation

    Handle invalid amount

    Block empty input, show a useful error, and disable add until amount is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 105Persistence

    Keep expenses after refresh

    Save the expense array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 105

    Ready for the project?

    Combine the seven skills in Expense Tracker.

    Start project →

Exercises 106–112 · preparation group 16

Prepare for Habit Tracker

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 106UI structure

    Build one habit card

    Before building Habit Tracker, create only the smallest useful UI: a heading, a labeled habit name input, and a complete button. Do not build the full app yet.

    Open exercise →

  2. EX 107Events

    Make complete respond

    Attach a click or submit handler to the complete control. For now, log the current habit name; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 108State

    Store the current habit name

    Create one state value for habit name, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 109Data objects

    Shape one habit

    Turn the current habit name into a structured habit object with an id, value, and createdAt field. Log the object when the user chooses complete.

    Open exercise →

  5. EX 110Lists

    Render several habits

    Keep an array of habits. Add a new object on complete, then render every item with a stable key.

    Open exercise →

  6. EX 111Validation

    Handle invalid habit name

    Block empty input, show a useful error, and disable complete until habit name is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 112Persistence

    Keep habits after refresh

    Save the habit array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 112

    Ready for the project?

    Combine the seven skills in Habit Tracker.

    Start project →

Exercises 113–119 · preparation group 17

Prepare for Course Notes App

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 113UI structure

    Build one course note card

    Before building Course Notes App, create only the smallest useful UI: a heading, a labeled note text input, and a save button. Do not build the full app yet.

    Open exercise →

  2. EX 114Events

    Make save respond

    Attach a click or submit handler to the save control. For now, log the current note text; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 115State

    Store the current note text

    Create one state value for note text, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 116Data objects

    Shape one course note

    Turn the current note text into a structured course note object with an id, value, and createdAt field. Log the object when the user chooses save.

    Open exercise →

  5. EX 117Lists

    Render several course notes

    Keep an array of course notes. Add a new object on save, then render every item with a stable key.

    Open exercise →

  6. EX 118Validation

    Handle invalid note text

    Block empty input, show a useful error, and disable save until note text is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 119Persistence

    Keep course notes after refresh

    Save the course note array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 119

    Ready for the project?

    Combine the seven skills in Course Notes App.

    Start project →

Exercises 120–126 · preparation group 18

Prepare for Recipe Finder

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 120UI structure

    Build one recipe result card

    Before building Recipe Finder, create only the smallest useful UI: a heading, a labeled ingredient input, and a search button. Do not build the full app yet.

    Open exercise →

  2. EX 121Events

    Make search respond

    Attach a click or submit handler to the search control. For now, log the current ingredient; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 122State

    Store the current ingredient

    Create one state value for ingredient, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 123Data objects

    Shape one recipe result

    Turn the current ingredient into a structured recipe result object with an id, value, and createdAt field. Log the object when the user chooses search.

    Open exercise →

  5. EX 124Lists

    Render several recipe results

    Keep an array of recipe results. Add a new object on search, then render every item with a stable key.

    Open exercise →

  6. EX 125Validation

    Handle invalid ingredient

    Block empty input, show a useful error, and disable search until ingredient is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 126Persistence

    Keep recipe results after refresh

    Save the recipe result array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 126

    Ready for the project?

    Combine the seven skills in Recipe Finder.

    Start project →

Exercises 127–133 · preparation group 19

Prepare for Movie Database

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 127UI structure

    Build one movie result card

    Before building Movie Database, create only the smallest useful UI: a heading, a labeled movie title input, and a search button. Do not build the full app yet.

    Open exercise →

  2. EX 128Events

    Make search respond

    Attach a click or submit handler to the search control. For now, log the current movie title; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 129State

    Store the current movie title

    Create one state value for movie title, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 130Data objects

    Shape one movie result

    Turn the current movie title into a structured movie result object with an id, value, and createdAt field. Log the object when the user chooses search.

    Open exercise →

  5. EX 131Lists

    Render several movie results

    Keep an array of movie results. Add a new object on search, then render every item with a stable key.

    Open exercise →

  6. EX 132Validation

    Handle invalid movie title

    Block empty input, show a useful error, and disable search until movie title is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 133Persistence

    Keep movie results after refresh

    Save the movie result array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 133

    Ready for the project?

    Combine the seven skills in Movie Database.

    Start project →

Exercises 134–140 · preparation group 20

Prepare for Tic-Tac-Toe Multiplayer

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 134UI structure

    Build one board cell card

    Before building Tic-Tac-Toe Multiplayer, create only the smallest useful UI: a heading, a labeled cell index input, and a play button. Do not build the full app yet.

    Open exercise →

  2. EX 135Events

    Make play respond

    Attach a click or submit handler to the play control. For now, log the current cell index; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 136State

    Store the current cell index

    Create one state value for cell index, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 137Data objects

    Shape one board cell

    Turn the current cell index into a structured board cell object with an id, value, and createdAt field. Log the object when the user chooses play.

    Open exercise →

  5. EX 138Lists

    Render several board cells

    Keep an array of board cells. Add a new object on play, then render every item with a stable key.

    Open exercise →

  6. EX 139Validation

    Handle invalid cell index

    Block empty input, show a useful error, and disable play until cell index is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 140Persistence

    Keep board cells after refresh

    Save the board cell array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 140

    Ready for the project?

    Combine the seven skills in Tic-Tac-Toe Multiplayer.

    Start project →

Exercises 141–147 · preparation group 21

Prepare for Kanban Board

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 141UI structure

    Build one task card card

    Before building Kanban Board, create only the smallest useful UI: a heading, a labeled task title input, and a move button. Do not build the full app yet.

    Open exercise →

  2. EX 142Events

    Make move respond

    Attach a click or submit handler to the move control. For now, log the current task title; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 143State

    Store the current task title

    Create one state value for task title, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 144Data objects

    Shape one task card

    Turn the current task title into a structured task card object with an id, value, and createdAt field. Log the object when the user chooses move.

    Open exercise →

  5. EX 145Lists

    Render several task cards

    Keep an array of task cards. Add a new object on move, then render every item with a stable key.

    Open exercise →

  6. EX 146Validation

    Handle invalid task title

    Block empty input, show a useful error, and disable move until task title is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 147Persistence

    Keep task cards after refresh

    Save the task card array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 147

    Ready for the project?

    Combine the seven skills in Kanban Board.

    Start project →

Exercises 148–154 · preparation group 22

Prepare for Chat Application

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 148UI structure

    Build one chat message card

    Before building Chat Application, create only the smallest useful UI: a heading, a labeled message text input, and a send button. Do not build the full app yet.

    Open exercise →

  2. EX 149Events

    Make send respond

    Attach a click or submit handler to the send control. For now, log the current message text; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 150State

    Store the current message text

    Create one state value for message text, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 151Data objects

    Shape one chat message

    Turn the current message text into a structured chat message object with an id, value, and createdAt field. Log the object when the user chooses send.

    Open exercise →

  5. EX 152Lists

    Render several chat messages

    Keep an array of chat messages. Add a new object on send, then render every item with a stable key.

    Open exercise →

  6. EX 153Validation

    Handle invalid message text

    Block empty input, show a useful error, and disable send until message text is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 154Persistence

    Keep chat messages after refresh

    Save the chat message array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 154

    Ready for the project?

    Combine the seven skills in Chat Application.

    Start project →

Exercises 155–161 · preparation group 23

Prepare for Authentication System

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 155UI structure

    Build one user account card

    Before building Authentication System, create only the smallest useful UI: a heading, a labeled email input, and a sign in button. Do not build the full app yet.

    Open exercise →

  2. EX 156Events

    Make sign in respond

    Attach a click or submit handler to the sign in control. For now, log the current email; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 157State

    Store the current email

    Create one state value for email, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 158Data objects

    Shape one user account

    Turn the current email into a structured user account object with an id, value, and createdAt field. Log the object when the user chooses sign in.

    Open exercise →

  5. EX 159Lists

    Render several user accounts

    Keep an array of user accounts. Add a new object on sign in, then render every item with a stable key.

    Open exercise →

  6. EX 160Validation

    Handle invalid email

    Block empty input, show a useful error, and disable sign in until email is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 161Persistence

    Keep user accounts after refresh

    Save the user account array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 161

    Ready for the project?

    Combine the seven skills in Authentication System.

    Start project →

Exercises 162–168 · preparation group 24

Prepare for Blog Platform

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 162UI structure

    Build one blog post card

    Before building Blog Platform, create only the smallest useful UI: a heading, a labeled post title input, and a publish button. Do not build the full app yet.

    Open exercise →

  2. EX 163Events

    Make publish respond

    Attach a click or submit handler to the publish control. For now, log the current post title; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 164State

    Store the current post title

    Create one state value for post title, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 165Data objects

    Shape one blog post

    Turn the current post title into a structured blog post object with an id, value, and createdAt field. Log the object when the user chooses publish.

    Open exercise →

  5. EX 166Lists

    Render several blog posts

    Keep an array of blog posts. Add a new object on publish, then render every item with a stable key.

    Open exercise →

  6. EX 167Validation

    Handle invalid post title

    Block empty input, show a useful error, and disable publish until post title is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 168Persistence

    Keep blog posts after refresh

    Save the blog post array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 168

    Ready for the project?

    Combine the seven skills in Blog Platform.

    Start project →

Exercises 169–175 · preparation group 25

Prepare for E-Commerce Store

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 169UI structure

    Build one product card

    Before building E-Commerce Store, create only the smallest useful UI: a heading, a labeled quantity input, and a add to cart button. Do not build the full app yet.

    Open exercise →

  2. EX 170Events

    Make add to cart respond

    Attach a click or submit handler to the add to cart control. For now, log the current quantity; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 171State

    Store the current quantity

    Create one state value for quantity, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 172Data objects

    Shape one product

    Turn the current quantity into a structured product object with an id, value, and createdAt field. Log the object when the user chooses add to cart.

    Open exercise →

  5. EX 173Lists

    Render several products

    Keep an array of products. Add a new object on add to cart, then render every item with a stable key.

    Open exercise →

  6. EX 174Validation

    Handle invalid quantity

    Block empty input, show a useful error, and disable add to cart until quantity is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 175Persistence

    Keep products after refresh

    Save the product array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 175

    Ready for the project?

    Combine the seven skills in E-Commerce Store.

    Start project →

Exercises 176–182 · preparation group 26

Prepare for Social Media Clone

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 176UI structure

    Build one social post card

    Before building Social Media Clone, create only the smallest useful UI: a heading, a labeled post text input, and a publish button. Do not build the full app yet.

    Open exercise →

  2. EX 177Events

    Make publish respond

    Attach a click or submit handler to the publish control. For now, log the current post text; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 178State

    Store the current post text

    Create one state value for post text, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 179Data objects

    Shape one social post

    Turn the current post text into a structured social post object with an id, value, and createdAt field. Log the object when the user chooses publish.

    Open exercise →

  5. EX 180Lists

    Render several social posts

    Keep an array of social posts. Add a new object on publish, then render every item with a stable key.

    Open exercise →

  6. EX 181Validation

    Handle invalid post text

    Block empty input, show a useful error, and disable publish until post text is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 182Persistence

    Keep social posts after refresh

    Save the social post array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 182

    Ready for the project?

    Combine the seven skills in Social Media Clone.

    Start project →

Exercises 183–189 · preparation group 27

Prepare for Hotel Booking System

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 183UI structure

    Build one hotel room card

    Before building Hotel Booking System, create only the smallest useful UI: a heading, a labeled check-in date input, and a book button. Do not build the full app yet.

    Open exercise →

  2. EX 184Events

    Make book respond

    Attach a click or submit handler to the book control. For now, log the current check-in date; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 185State

    Store the current check-in date

    Create one state value for check-in date, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 186Data objects

    Shape one hotel room

    Turn the current check-in date into a structured hotel room object with an id, value, and createdAt field. Log the object when the user chooses book.

    Open exercise →

  5. EX 187Lists

    Render several hotel rooms

    Keep an array of hotel rooms. Add a new object on book, then render every item with a stable key.

    Open exercise →

  6. EX 188Validation

    Handle invalid check-in date

    Block empty input, show a useful error, and disable book until check-in date is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 189Persistence

    Keep hotel rooms after refresh

    Save the hotel room array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 189

    Ready for the project?

    Combine the seven skills in Hotel Booking System.

    Start project →

Exercises 190–196 · preparation group 28

Prepare for Learning Management System

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 190UI structure

    Build one course lesson card

    Before building Learning Management System, create only the smallest useful UI: a heading, a labeled lesson title input, and a complete button. Do not build the full app yet.

    Open exercise →

  2. EX 191Events

    Make complete respond

    Attach a click or submit handler to the complete control. For now, log the current lesson title; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 192State

    Store the current lesson title

    Create one state value for lesson title, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 193Data objects

    Shape one course lesson

    Turn the current lesson title into a structured course lesson object with an id, value, and createdAt field. Log the object when the user chooses complete.

    Open exercise →

  5. EX 194Lists

    Render several course lessons

    Keep an array of course lessons. Add a new object on complete, then render every item with a stable key.

    Open exercise →

  6. EX 195Validation

    Handle invalid lesson title

    Block empty input, show a useful error, and disable complete until lesson title is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 196Persistence

    Keep course lessons after refresh

    Save the course lesson array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 196

    Ready for the project?

    Combine the seven skills in Learning Management System.

    Start project →

Exercises 197–203 · preparation group 29

Prepare for AI Chat Application

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 197UI structure

    Build one AI prompt card

    Before building AI Chat Application, create only the smallest useful UI: a heading, a labeled prompt text input, and a send button. Do not build the full app yet.

    Open exercise →

  2. EX 198Events

    Make send respond

    Attach a click or submit handler to the send control. For now, log the current prompt text; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 199State

    Store the current prompt text

    Create one state value for prompt text, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 200Data objects

    Shape one AI prompt

    Turn the current prompt text into a structured AI prompt object with an id, value, and createdAt field. Log the object when the user chooses send.

    Open exercise →

  5. EX 201Lists

    Render several AI prompts

    Keep an array of AI prompts. Add a new object on send, then render every item with a stable key.

    Open exercise →

  6. EX 202Validation

    Handle invalid prompt text

    Block empty input, show a useful error, and disable send until prompt text is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 203Persistence

    Keep AI prompts after refresh

    Save the AI prompt array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 203

    Ready for the project?

    Combine the seven skills in AI Chat Application.

    Start project →

Exercises 204–210 · preparation group 30

Prepare for Project Management Tool

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 204UI structure

    Build one project task card

    Before building Project Management Tool, create only the smallest useful UI: a heading, a labeled task title input, and a assign button. Do not build the full app yet.

    Open exercise →

  2. EX 205Events

    Make assign respond

    Attach a click or submit handler to the assign control. For now, log the current task title; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 206State

    Store the current task title

    Create one state value for task title, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 207Data objects

    Shape one project task

    Turn the current task title into a structured project task object with an id, value, and createdAt field. Log the object when the user chooses assign.

    Open exercise →

  5. EX 208Lists

    Render several project tasks

    Keep an array of project tasks. Add a new object on assign, then render every item with a stable key.

    Open exercise →

  6. EX 209Validation

    Handle invalid task title

    Block empty input, show a useful error, and disable assign until task title is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 210Persistence

    Keep project tasks after refresh

    Save the project task array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 210

    Ready for the project?

    Combine the seven skills in Project Management Tool.

    Start project →

Exercises 211–217 · preparation group 31

Prepare for Full SaaS Application

Seven independent drills before starting the project.

Practice all 7 in sequence
  1. EX 211UI structure

    Build one workspace card

    Before building Full SaaS Application, create only the smallest useful UI: a heading, a labeled workspace name input, and a create button. Do not build the full app yet.

    Open exercise →

  2. EX 212Events

    Make create respond

    Attach a click or submit handler to the create control. For now, log the current workspace name; this exercise is only about connecting UI to behavior.

    Open exercise →

  3. EX 213State

    Store the current workspace name

    Create one state value for workspace name, update it from the input, and show the current value beneath the form.

    Open exercise →

  4. EX 214Data objects

    Shape one workspace

    Turn the current workspace name into a structured workspace object with an id, value, and createdAt field. Log the object when the user chooses create.

    Open exercise →

  5. EX 215Lists

    Render several workspaces

    Keep an array of workspaces. Add a new object on create, then render every item with a stable key.

    Open exercise →

  6. EX 216Validation

    Handle invalid workspace name

    Block empty input, show a useful error, and disable create until workspace name is valid. Clear the error after a successful action.

    Open exercise →

  7. EX 217Persistence

    Keep workspaces after refresh

    Save the workspace array to localStorage and restore it when the page loads. Verify it by refreshing the browser.

    Open exercise →

  8. After exercise 217

    Ready for the project?

    Combine the seven skills in Full SaaS Application.

    Start project →