---
tags: Interview, Frontend
---

# Additional Junior React Coding Tests

## Task 4: Searchable List
**Description**: Create a React component that displays a list of items and allows the user to filter the list by typing into a search bar.

**Features**:
- Display a list of at least 10 items (e.g., names of fruits).
- Include a search bar at the top of the list.
- Filter the list in real-time as the user types.
- If no items match the search query, display a "No results found" message.

**Requirements**:
- Use `useState` to manage the search query.
- Ensure case-insensitive filtering.

---

## Task 5: Image Carousel
**Description**: Build an image carousel that allows users to navigate through a series of images.

**Features**:
- Display one image at a time.
- Include "Previous" and "Next" buttons to navigate between images.
- Loop back to the first image when the user clicks "Next" on the last image.
- Loop to the last image when the user clicks "Previous" on the first image.

**Requirements**:
- Use `useState` to track the currently displayed image index.
- Preload images for smooth transitions.

---

## Task 6: Login Form
**Description**: Create a simple login form component with validation.

**Features**:
- Include fields for "Email" and "Password".
- Display an error message if the email is not in a valid format or if the password is less than 8 characters.
- Display a success message when the form is submitted with valid inputs.

**Requirements**:
- Use `useState` to manage form data and errors.
- Use simple regular expressions for validation.

---

## Task 7: Dark Mode Toggle
**Description**: Add a dark mode toggle feature to a basic React app.

**Features**:
- Provide a button or switch to toggle between light and dark themes.
- Update the app's background color and text color based on the selected theme.
- Persist the theme selection in `localStorage` so it persists across page reloads.

**Requirements**:
- Use `useState` for managing the theme.
- Use `useEffect` to handle `localStorage`.

---

## Task 8: Countdown Timer
**Description**: Create a countdown timer that starts from a given number of seconds and counts down to zero.

**Features**:
- Accept a user input for the number of seconds to count down from.
- Display the remaining time dynamically.
- Include a "Pause" and "Reset" button.

**Requirements**:
- Use `useState` and `useEffect` for managing the timer.
- Ensure the timer stops at zero.

---

## Task 9: Accordion Component
**Description**: Build an accordion component that expands or collapses sections of content.

**Features**:
- Display a list of sections with titles.
- Clicking on a section title should expand it and reveal its content.
- Only one section can be expanded at a time.

**Requirements**:
- Use `useState` to manage the expanded section.
- Add smooth animations for better user experience (optional).

---

## Task 10: Weather App
**Description**: Create a simple weather app that fetches and displays the current weather for a city.

**Features**:
- Provide an input field for the user to enter a city name.
- Fetch the weather data from a public API like [OpenWeatherMap](https://openweathermap.org/api).
- Display the city's temperature, weather condition, and an appropriate icon.
- Handle errors gracefully (e.g., if the city is not found).

**Requirements**:
- Use `useState` and `useEffect` for data fetching and state management.
- Use conditional rendering for loading and error states.

---

## Task 11: Star Rating Component
**Description**: Build a star rating component that allows users to rate an item by selecting a number of stars.

**Features**:
- Display 5 stars, with the selected number highlighted.
- Allow users to click on a star to set the rating.
- Display the current rating below the stars.

**Requirements**:
- Use `useState` to manage the rating.
- Include hover effects for better user interaction.

---

## Task 12: Expense Tracker
**Description**: Create an expense tracker app where users can add and view their expenses.

**Features**:
- Input fields for "Expense Name" and "Amount".
- Display a list of added expenses with their name and amount.
- Show the total expense at the bottom.

**Requirements**:
- Use `useState` to manage the list of expenses and the total.
- Ensure dynamic updates as new expenses are added.