chore: add useState hook lab to frontend cert

[jdwilkin4]

At the time of this issue creation, Oliver is currently working on the making the changes to the editor to teach React and TypeScript.

For this lab, we need to create a project to practice working with state and the useState hook.

Here are some suggestions from ChatGPT on project ideas:

Counter App

• Description: Build a simple counter that increments and decrements a number.
• Key Concepts: Basic state management, updating state with functions.

• Example Features: Increment, decrement, and reset buttons.

  Toggle Visibility

• Description: Implement a button that toggles the visibility of a text or an element.
• Key Concepts: Boolean state, conditional rendering.

• Example Features: Show/hide text or component when a button is clicked.

  Temperature Converter

• Description: Create a converter that allows users to switch between Celsius and Fahrenheit.
• Key Concepts: Managing state for inputs, performing calculations based on state.

• Example Features: Input fields for temperature, conversion logic, display result.

  Color Picker

• Description: Build a color picker that updates the background color based on user input.
• Key Concepts: Managing color state, applying styles dynamically.
• Example Features: Color input field or palette, live color preview.

Simple Stopwatch

• Description: Implement a stopwatch that starts, stops, and resets the time.
• Key Concepts: State for time, interval management, useEffect for timers.

• Example Features: Start, stop, and reset buttons, display elapsed time.

  Light/Dark Mode Toggle

• Description: Create a theme toggle that switches between light and dark mode.
• Key Concepts: Boolean state for theme, dynamic class application or inline styles.

• Example Features: Toggle button, theme-specific styles.

  Accordion Component

  • Description: Build an accordion where users can expand and collapse sections of content.
  • Key Concepts: Managing which section is open, conditional rendering based on state.
  • Example Features: Expand/collapse buttons, animated transitions.

The CSS should be supplied for the campers.

Acceptance criteria

• [ ] Add your lab to the frontend-cert/react-projects folder

[jdwilkin4]

Marking this blocked for now until we know what the final implementation for the editor will look like for react and typescript. Oliver will let us know when.