Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Starter Code
  • Base
  • Comfortable
  • More Comfortable
  • Submission
  • Reference Solution
  1. 1: Frontend
  2. 1.E: Exercises

1.E.5: Guess The Word

Previous1.E.4: High CardNext1.P: Frontend App

Last updated 1 year ago

Learning Objectives

  1. How to use forms with React and controlled components

  2. Get comfortable applying JS logic in React

Introduction

Guess The Word (aka Hangman) is a single-player game where a user tries to guess all letters in a secret word with a limited number of guesses. Correct guesses will reveal the instances of the guessed letter in the word. Incorrect guesses will reduce "guesses remaining". A user wins when they guess all letters in the word correctly, and loses when there are no guesses remaining.

Starter Code

Fork and clone (Rocket-themed React ViteJs Application). Understand the following starter code in App.jsx before creating GTW, and feel free to change anything you would like in App.jsx. Run npm install to install packages and npm run dev to start the app, next open your browser and navigate to .

App.jsx
import logo from "/logo.png";
import "./App.css";
import { getRandomWord } from "./utils";
import { useState } from "react";

function App() {
  // currWord is the current secret word for this round. Update this with the updater function after each round.
  const [currWord, setCurrentWord] = useState(getRandomWord());
  // guessedLetters stores all letters a user has guessed so far
  const [guessedLetters, setGuessedLetters] = useState([]);

  // Add additional states below as required.

  const generateWordDisplay = () => {
    const wordDisplay = [];
    // for...of is a string and array iterator that does not use index
    for (let letter of currWord) {
      if (guessedLetters.includes(letter)) {
        wordDisplay.push(letter);
      } else {
        wordDisplay.push("_");
      }
    }
    return wordDisplay.toString();
  };

  // create additional function to power the

  return (
    <>
      <div>
        <img src={logo} className="logo" alt="Rocket logo" />
      </div>
      <div className="card">
        <h1>Guess The Word 🚀</h1>
        <h3>Word Display</h3>
        {generateWordDisplay()}
        <h3>Guessed Letters</h3>
        { guessedLetters.length > 0 ? guessedLetters.toString(): "-"}
        <br />
        <h3>Input</h3>
        {/* Insert form element here */}
      </div>
    </>
  );
}

export default App;

Base

Add logic and state to track whether the user has guessed all letters of the word and how many guesses the user has left (can start with 10). If the user guesses all letters correctly, tell them they have won. If the user runs out of guesses, reveal the word and tell them they have lost. When the round ends, give the user an option to play again.

Hard-code secret word for easier testing

When testing your app, you may find it easier to hard-code the secret word initialised in state. Guessing words is hard!

Comfortable

More Comfortable

Allow the user to play multiple rounds and display their score across rounds, e.g. how many times they have guessed the word out of how many rounds.

Submission

Submit a pull request to the main branch of Rocket's High Card repo and share your PR link in your section Slack channel.

Reference Solution

Add a form HTML element in App.jsx as per what we learned in to allow the user to input guesses. Each guess can only consist of 1 letter at a time. Control form input using component state as per the React Guide.

When the user guesses a letter, add that letter to the App component's guessedLetters state. Consider using the when adding the new letter to trigger React to re-render. The existing starter code logic will read guessedLetters and render correctly-guessed letters in the Word Display section and render all guessed letters in the Guessed Letters section.

Style the app to clarify what each UI component is for. Create an image that appears gradually with every wrong guess for the user to visualise how many guesses they have left. Consider using or components as default styles.

If you would like to deploy your app to the internet, follow Vitejs GitHub Pages .

Here is and a for this exercise. You can do better!

🖼️
Rocket's Guess The Word repo
http://localhost:5173
React Bootstrap
MUI
deployment instructions here
reference code
reference deployment
spread operator
React Forms