Syngenta-ReactJS-Balloon-Assignment

To Checkout the live demo of this Project Click Here

Problem Statement:~ ReactJS-Balloon-Assignment.pdf

Create an empty box, 5 circles each of unique colours. The colour generation 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”.

  • A user can enter a number in the text box and click shoot button. This would move the corresponding circle into the empty div.
  • The user can get back the circles that were shot by clicking the corresponding circles residing in the empty div.

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
git clone https://github.com/Satyamall/Syngenta-ReactJS-Balloon-Assignment.git
  • Step.2 Now navigate inside the project directory using the following command
 cd Syngenta-ReactJS-Balloon-Assignment
  • Step.3 Install the required packages to run this project using the following command
 npm install
  • Step.4 To run this project run the following command into your terminal
 npm run start

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.

Images of Assignment how it looks like and how it works.

Screenshot (443) Screenshot (444) Screenshot (445) Screenshot (446) Screenshot (447)

GitHub

View Github