Let’s get practical

Difficulty: Easy Concepts: useState, event handling, conditional rendering

Build a flashcard component that lets a user flip through a small deck of cards and reveal answers one at a time.

Requirements:

Define an array of at least 5 flashcard objects directly in the file — each with a question and an answer string. Pick any topic you like (capitals of countries, JavaScript methods, football trivia, anything)
Store two pieces of state: the index of the current card, and whether the answer is currently revealed
Render the current card's question and a "Reveal answer" button. When clicked, show the answer below the question
Render "Next card" and "Previous card" buttons to navigate through the deck
- "Previous card" should be disabled on the first card
- "Next card" should be disabled on the last card
When navigating to a new card, the answer must be hidden again automatically — the revealed state should reset on every card change

Hints:

Two separate useState calls are cleaner here than one object — the two values change at different times and for different reasons
The reset-on-navigate behaviour happens naturally if you call both setters in the same handler: setIndex(index + 1); setRevealed(false)
For the disabled state: index === 0 and index === cards.length - 1 are all you need

Difficulty: Easy Concepts: Controlled inputs, onChange, derived state, conditional styling

Build a controlled textarea that enforces a character limit and gives the user live feedback as they type — similar to a social media post composer.

Requirements:

Render a controlled <textarea> with a character limit of 280 characters
Below the textarea, show a live character count in the format 47 / 280
When the user is within 20 characters of the limit (261–280), change the counter colour to orange
When the user hits the limit exactly (280 characters), change the counter to red and prevent any further input
Render a "Post" button that is disabled when the textarea is empty or over the limit
Render a "Clear" button that resets the textarea to empty

Hints:

The character count is derived from value.length — don't store it in state, calculate it during render
To prevent input beyond the limit, use the maxLength attribute on the textarea, or check e.target.value.length in the onChange handler before calling the setter
For the colour logic, a simple approach: calculate remaining = limit - value.length and compare that in the JSX

The HackYourFuture curriculum is licensed under CC BY-NC-SA 4.0 *https://hackyourfuture.net/*

CC BY-NC-SA 4.0 Icons

Built with ❤️ by the HackYourFuture community · Thank you, contributors

Found a mistake or have a suggestion? Let us know in the feedback form.