# React Challenges

# Counter

> [!CAUTION]
> Test

### Description
Make the text within the button display the number of times the button has been clicked.

### Requirements
- Use the selected framework: React, Vanilla JS, Angular, Vue, or Svelte
- Display the number of times the button has been clicked as text within the button
- No additional libraries or dependencies are allowed

### Difficulty
- Easy
- Recommended duration to spend during interviews: 5 minutes

---

# Generate a Table

### Task
Create a table with a specified number of rows and columns. The table should contain cells with a sequence of numbers from 1 to the product of the number of rows and columns.

### Features
- Form to input the number of rows and columns
- Table generation upon form submission
- Cells contain a sequence of numbers from 1 to the product of rows and columns

### Requirements
- Difficulty: Easy
- Recommended interview duration: 15 minutes

### How to Use
1. Enter the number of rows and columns in the form.
2. Submit the form to generate the table.
3. The table will be displayed with the specified number of rows and columns.
4. Each cell in the table will contain a number sequence from 1 to the product of rows and columns.

---

# Modal Dialog Framework

### Challenge
Build a reusable modal dialog component that can be opened and closed with customizable title and contents.

### Requirements
- The modal dialog should contain:
- Title/heading string
- Any contents as the body
- Close button that hides/closes the modal when clicked
- The modal dialog should be:
- Centered horizontally and vertically on the screen
- Displayed above a semi-transparent background overlay
- The focus of the exercise is on the functionality, not the styling

### Design
- Design the necessary props or configuration options for the modal dialog

### Additional Information
- Difficulty: Medium

# Dice Roller

## Framework

* React
* Angular
* Vue
* Svelte

## Author

* Yangshun Tay, Ex-Meta Staff Engineer

## Languages

* HTML
* CSS
* JS

## Difficulty

* Medium

## Recommended Duration

* 20 minutes

## Users Completed

* 445 completed

## Requirements

### Build a Dice Roller App

Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.

### Input Field

* The user can specify the number of dice to roll using the input field.
* The value can be an integer between 1 to 12 inclusive.

### Roll Button

* Upon clicking the "Roll" button, the dice roll is simulated and the results are displayed.

### Results Display

* The results of the dice roll should be displayed in rows of three.

### Example Result

* The example below shows a potential result of rolling 6 dice.

You rolled 6 dice:
[1] [4] [6]
[3] [5] [2]

### Source

* This question is adapted from FrontendEval's Rolling Dice question.

# Transfer List

**Premium Framework:** React, Angular, Vue, Svelte
**Author:** Yangshun Tay, Ex-Meta Staff Engineer
**Languages:** HTML, CSS, JS
**Difficulty:** Medium
**Recommended duration to spend during interviews:** 30 mins
**Users completed:** 577 completed

## Requirements

* There are two lists, each initially containing 4 items.
* Each item has a checkbox that can be checked/unchecked.
* **Transferring:**
+ Clicking on the double arrow buttons will transfer all items from one list to the other, as specified by the direction of the arrows.
+ Clicking on the single arrow buttons will transfer only the selected items, as specified by the direction of the arrows.
+ Transferred items are added to the bottom of the destination list.
+ Item selection (checked) states are preserved after transferring.
+ Buttons are disabled if there are no relevant items to be transferred.

## See what you're building
Try these questions next: [Transfer List II](https://leetcode.com/problems/transfer-list-ii/)
**Difficulty:** Hard
**Similar Questions:** [Todo List](https://leetcode.com/problems/todo-list/)
**Difficulty:** Medium