https://github.com/ajit24/syngenta-assignmnet
This assignment related to React JS. In assignment an empty box, 5 circles each of unique colours. The colour method should randomly pick and assign one of the five colours to the circles. A text box that will take numeric input and a button named “shoot”.
https://github.com/ajit24/syngenta-assignmnet
react-hooks reactjs
Last synced: 8 months ago
JSON representation
This assignment related to React JS. In assignment an empty box, 5 circles each of unique colours. The colour method should randomly pick and assign one of the five colours to the circles. A text box that will take numeric input and a button named “shoot”.
- Host: GitHub
- URL: https://github.com/ajit24/syngenta-assignmnet
- Owner: Ajit24
- Created: 2022-05-28T05:35:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-29T18:03:17.000Z (over 3 years ago)
- Last Synced: 2025-01-02T04:14:31.246Z (10 months ago)
- Topics: react-hooks, reactjs
- Language: JavaScript
- Homepage: https://syngentaballoonreactjs.vercel.app/
- Size: 304 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Syngenta-assignmnet
## problem-statement:-
Step 1 – Display following UI components. (A) – an empty div. (B) – 5 circles each of unique colours. The colour generation method should randomly pick and assign one of the five colours to the circles. However, a colour cannot be duplicated. © - A text box that will take numeric input and a button named “shoot”
Step 2 – A user can enter a number in the text box and click shoot button. This would move
the corresponding circle into the empty div. In the figure below, user entered 2 and clicked
shoot button, which moved the 2nd circle into the empty div.
Step 3 – The circles get reorganised. Therefore the purple circle which was at 3rd position
now moves up and occupies 2
rd position.
Step 4 - The user can shoot multiple circles and the corresponding circles would move in to
the empty div. In the below figure, the user again entered 3 and corresponding circle got
moved into the empty div.
Step 5 – The user can get back the circles that were shot by clicking the corresponding
circles residing in the empty div. Example the user clicked yellow circle which was inside the
empty div and the yellow came back to its original position (that is second position). Please
note that this is important consideration in the problem.
# Technology Stack Used:
- REACTJS
- javaScript
- Css
# Instruction for use:
- Type the number between 1 to 5 in Text box and click on Shoot button. You able to see that circle show inside the empty box.
- You want to remove circle from empty box and send it to original position then **you click on that circle inside empty box**. You will be able to see it move back to its original position.
### Steps to run this project:~
#### Open your terminal and navigate to a folder where you want to run this project:
- Step.1 clone this repository in your system using the following command
```js
git clone https://github.com/Ajit24/Syngenta-assignmnet.git
```
- Step.2 Now navigate inside the project directory using the following command
```js
cd balloon
```
- Step.3 Install the required packages to run this project using the following command
```js
npm install
```
- Step.4 To run this project run the following command into your terminal
```js
npm run start
```
## Home page : -
.png)
.png)
.png)
.png)