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 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 3

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 4

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 5

Build a Countdown Timer

Accepted Answer

**Target Audience:** Beginners preparing for a frontend machine coding round. You know a little JavaScript and React; deadlines, timeouts, effect cleanup and live regions are explained from zero. **Difficulty:** Easy > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary interviewers expect. Every output under "Verified" was printed by running this exact solution on React 19.3.1 inside in jsdom. ## 1.

Question 6

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 7

Build a File Explorer (tree view)

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little React (components, `useState`); no tree or accessibility experience needed. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain words first, then tagged with 📌 Interview term: so you also learn the vocabulary an interviewer listens for. All code comes from the runnable solution next to this tutorial, and the Verified section quotes what it printed when a

Question 8

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

Question 9

Build a Form with validation

Accepted Answer

**Target Audience:** Frontend candidates preparing for a machine coding round. You know a little HTML and JavaScript; no React form experience 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. All code excerpts are copied from the runnable solution, and the output in section 6 was produced by actually running it on React 19.

Question 10

Build an E-commerce Product Filter grid

Accepted Answer

**Target Audience:** Developers preparing for a senior frontend machine coding round. Assumes React state, effects and list rendering; the derived-state ideas are explained from scratch. **Difficulty:** Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. Code excerpts are copied from the runnable solution, and the Verified section quotes what it printed on React 19.3.1 while a script ticked filters, typed prices and removed chips. The catalogue

FRONTEND MACHINE CODINGDECODED.

Easy