CurriculumExpansion icon indicating copy to clipboard operation
CurriculumExpansion copied to clipboard

chore: add useState hook workshop to frontend cert

Open jdwilkin4 opened this issue 5 months ago • 1 comments

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 workshop, we need to create a project to teach 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. There won't be steps for that.

Acceptance criteria

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

jdwilkin4 avatar Sep 03 '24 16:09 jdwilkin4