Question 1

Build a Generate Table (rows x columns)

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML and JavaScript; React ideas are explained as they come up. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The Verified output comes from mounting the solution with React 19.3.1 inside in jsdom and driving the form with a script. ## 1. Why This Even Matters — A Story First Picture a cinema usher s

Question 2

Build a Show/Hide Password Input

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes basic HTML forms and a little JavaScript; React is explained as we go. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the precise vocabulary. The Verified output comes from mounting the solution with React 19.3.1 in jsdom and driving it with a script; facts about real browsers are either measured in Chromium 141 or cited. ## 1. Why Thi

Question 3

Build a Temperature Converter

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know useState and controlled inputs; designing state for two inputs that depend on each other is the new part. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in s

Question 4

Build a Character Counter (textarea with limit)

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. Assumes you know basic HTML and a little JavaScript; no React experience beyond "a component is a function that returns JSX" is needed. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Nothing in the Verified section is from memory: the solution was mounted with Reac

Question 5

Build a Mortgage Calculator

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know useState and forms; the finance maths and money rounding are the new parts. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the output in section 6 was produced by actua

Question 6

Build a Todo List

Accepted Answer

**Target Audience:** Beginners preparing for a first frontend machine coding round. Assumes you know basic HTML and JavaScript and have seen a React component once; nothing else. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The code excerpts are copied from the runnable solution in the playground, and the Verified section quotes what

Question 7

Build a Password Generator

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React or cryptography background is assumed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and every output in section 6 was produced by actually running it: th

Question 8

Build a Flight Booker

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. No React form experience is assumed; the [Form with validation](/interview-question/build-a-form-with-validation) question is a gentler warm-up if you want one. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solut

Question 9

Build a Signup Form with async username availability check

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes you have built a basic validated form; the [Form with validation](/interview-question/build-a-form-with-validation) question covers that ground. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from the runnable solution, and

Question 10

Build a Multi-step Form (wizard)

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes you have seen a single validated form; if not, start with [Build a Form with validation](/interview-question/build-a-form-with-validation), which this question builds on. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. Code excerpts are copied from

FRONTEND MACHINE CODINGDECODED.

Easy