Emoji Mood Tracker

Medium
12
1
56.4% Acceptance

Of course! Here's a markdown-based lab description based on the provided idea, challenges, and constraints, while emphasizing the use of useState:

Mood Selector Lab

Welcome to the Mood Selector Lab! In this challenge, you'll be creating a simple React application that allows users to select their current mood using emojis. The selected mood will be displayed on the screen.

Overview:

Your application will consist of a series of h1 tags, each representing a different mood using an emoji. When a user clicks on one of these moods, the application will display the name of the selected mood.

Instructions:

  1. Setup Your Environment: Begin by setting up a new React project, if you haven't already.

  2. Mood Emojis: Create 5 different h1 tags, each representing a mood. Use the following IDs for each mood: happy, sad, meh, excited, and sleepy. Assign an appropriate emoji to each mood. For instance, you can use 🙂 for 'happy'.

  3. Display the Mood: Underneath your mood emojis, create another h1 tag with the ID mood. Initially, this tag can be empty or can have a default message like "Select a mood".

  4. Mood Selection: Implement functionality such that when a user clicks on one of the mood emojis, the text inside the h1 tag with ID mood updates to reflect the name of the selected mood. For instance, if a user clicks the happy emoji, the mood tag should display "happy".

  5. Using useState: This is crucial - manage the current mood using React's useState hook. When a mood is clicked, the state should be updated, and the display should reactively change based on this state.

  6. Testing: Once you've implemented these features, you can run the tests to see if your solution meets the requirements.

Constraints:

  • The app should be implementable in a single file for the purposes of this lab.
  • Make sure to correctly use the specified IDs (happy, sad, meh, excited, sleepy, and mood) as these will be used in testing.
  • Do not use any other state management solutions. For this lab, you should only be using useState to manage the mood.

Good luck, and happy coding!

This markdown description provides a comprehensive guide to the user, ensuring they understand the lab's objectives, requirements, and constraints.

Challenges Information

Challenge 1: Mood Emojis

Create 5 h1 tags with the following IDs: happy, sad, meh, excited, and sleepy. Assign an emoji to each mood. For instance, you can use 🙂 for happy. The exact emoji is up to you, but each h1 tag should contain an emoji.

Challenge 2: Display Mood

Create another h1 tag with the ID mood. This will be used to display the user's current mood.

Challenge 3: Mood Selection

Upon clicking any of the 5 mood h1 tags from Challenge 1, the text inside the h1 tag with ID mood should update to reflect the mood's name. For example, if a user clicks on the h1 tag with the ID happy, the text inside the mood h1 should become "happy". Similarly, for the other moods: "sad", "meh", "excited", and "sleepy".