← All projects

Beginner project · Week 1

Interactive Personal Profile Generator

Turn profile inputs into a polished, validated summary using values, operators, and strings.

The problem

Beginners rarely see WHY variables, types, and string handling matter until they build something that reads real input and produces readable output.

User stories

  • As a visitor, I want to enter my name, birth year, and favorite language, so I get a personalized summary.
  • As a visitor, I want clear feedback if I enter an invalid birth year, so I trust the result.
  • As a visitor, I want my age calculated correctly, so the summary feels accurate.

Planning checklist

  • List every input the form needs and its expected type
  • Decide what counts as invalid input for each field
  • Sketch the exact sentence structure of the generated summary

Suggested data structure

const profile = {
  name: "",
  birthYear: 0,
  favoriteLanguage: "",
};

UI requirements

  • A form with labeled inputs for name, birth year, and favorite language
  • A visible error message for invalid input
  • A generated summary section that updates on submit

Build milestones

Check off each milestone as you complete it — saved to this device.

…

0%

Testing checklist

  • Submitting valid input produces the expected summary
  • An empty name shows a validation error
  • A non-numeric or future birth year shows a validation error

Completion criteria

…

0%

Progressive support

RequirementsPlanningStarterHintsReference Solution
Bonus features
  • Add a live character counter for the name field
  • Support multiple favorite languages
  • Persist the last profile in localStorage