Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: add useState hook lab to frontend cert #549

Open
1 task
jdwilkin4 opened this issue Sep 3, 2024 · 1 comment
Open
1 task

chore: add useState hook lab to frontend cert #549

jdwilkin4 opened this issue Sep 3, 2024 · 1 comment
Labels
BLOCKED Frontend Cert Labs Team This work is for the labs team only

Comments

@jdwilkin4
Copy link
Contributor

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 jdwilkin4 added Frontend Cert Labs Team This work is for the labs team only BLOCKED labels Sep 3, 2024
@jdwilkin4
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
BLOCKED Frontend Cert Labs Team This work is for the labs team only
Projects
None yet
Development

No branches or pull requests

1 participant