# Middle-Level React Coding Test

---

## 1. React Sandwich Builder
**Problem:**
Create a "Sandwich Builder" app that lets users create the ultimate sandwich.

**Features:**
- A list of available ingredients (e.g., bread, lettuce, tomato, cheese, bacon).
- A "magic randomizer" button that builds a sandwich for the user randomly.
- Prevent users from adding "bacon" more than 5 times (because the bacon fairy gets upset).
- Display an alert if the user tries to add peanut butter and pickles together (because, why?).

**Requirements:**
- Use React functional components.
- Use `useState` to manage the sandwich ingredients.
- Style the sandwich display to look like a vertical stack of items.

---

## 2. Emoji Password Validator
**Problem:**
Build a password validator that checks if a password meets the following rules:
- Must be at least 8 characters long.
- Must include at least one emoji (e.g., 😊, 🔥, 💥).
- Show a funny message for each validation failure, e.g., "Your password is too short, like my patience." or "Add an emoji to bring some life to your password."

**Requirements:**
- Use `useState` to handle the input.
- Display real-time validation messages below the input field.
- Make it mobile-friendly.

---

## 3. Infinite Cat Scroller
**Problem:**
Create a simple app that fetches random cat images from an API (e.g., `https://cataas.com/cat`) and displays them in a grid.

**Features:**
- Users can keep scrolling down to load more cats.
- Add a "Summon the Cat Overlord" button that triggers a modal with an enormous picture of a grumpy cat (use a static image URL).

**Requirements:**
- Use `useEffect` for API calls.
- Use a library like `react-infinite-scroll-component` or custom infinite scroll logic.
- Modal should include a "Close" button that works.

---

## 4. React Trivia Quiz with a Twist
**Problem:**
Build a trivia game where users answer questions.

**Features:**
- If the user answers incorrectly:
- Change the background color to a random absurd gradient (e.g., "unicorn puke").
- Play a loud buzzer sound (via HTML audio).
- Display a sarcastic message like "You had one job!" or "Even a potato could guess better."

**Requirements:**
- Use React state for current question and score.
- Style it to look fun and engaging.

---

## 5. Mood-o-Meter
**Problem:**
Create a "Mood-o-Meter" app where users can select their current mood (e.g., happy, sad, angry, sleepy).

**Features:**
- Based on the mood:
- Display an animated emoji (e.g., 😃, 😢, 😡, 😴).
- If the user selects "angry" twice in a row, display a message: "Whoa, calm down! Want some coffee?"

**Requirements:**
- Use React hooks for managing state.
- Use CSS animations to make the emojis dance or bounce.
- Store the last selected mood to detect "angry" streaks.

---

## 6. Button Madness
**Problem:**
Create a page with 10 buttons that each have random colors and text.

**Features:**
- When clicked:
- The clicked button disappears with a funny sound effect (use HTML audio).
- After all buttons are clicked, display a hidden message: "Congratulations, you wasted 2 minutes of your life!"

**Requirements:**
- Use `useState` to track visible buttons.
- Use dynamic inline styles to assign colors.

---

## 7. The Over-Engineer Counter
**Problem:**
Create a counter app with these *over-the-top* features:

**Features:**
- A button to increase the count.
- A button to decrease the count.
- A "pro mode" button that switches to voice recognition so the user can say "up" or "down" to change the count (you can fake this with a simple alert saying, "Pro mode is unavailable for free users.").
- A hidden Konami code (↑↑↓↓←→←→BA) that sets the count to 1337 and displays "You win at life."

**Requirements:**
- Use React state for the count.
- Add some playful styling.

---