---
# System prepended metadata

title: Additional Junior React Coding Tests

---

---
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.  
