Skip to content

This code creates a simple React application for a coin toss game. Users can click the "Toss Coin" button to simulate a coin toss and track the number of heads and tails that have appeared. The UI displays the current toss result and counts in real-time.

Notifications You must be signed in to change notification settings

tarunbommali/CoinTossGame

Repository files navigation

In this project, let's build a Coin Toss Game by applying the concepts we have learned till now.

Refer to the image below:


coin toss game output

Design Files

Click to view

Set Up Instructions

Click to view
  • Download dependencies by running npm install
  • Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

  • Initially, the app should have heads image and total, heads, tails counts as 0

  • When the Toss Coin button is clicked, then the toss result should be generated using the below expression

    const tossResult = Math.floor(Math.random() * 2)
    
  • If the number generated from the given expression is 0 then the result should be heads or else the result should be tails

  • When the Toss Coin is clicked, and the result is heads then

    • The heads image should be displayed
    • The heads count should be incremented by one
    • The total should be incremented by one
  • When the Toss Coin is clicked, and the result is tails then

    • The tails image should be displayed
    • The tails count should be incremented by one
    • The total should be incremented by one
Implementation Files

Use these files to complete the implementation:

  • src/components/CoinToss/index.js
  • src/components/CoinToss/index.css

Important Note

Click to view

The following instructions are required for the tests to pass

  • The toss result image should have the alt attribute value as toss result

Resources

Image URLs
Colors
Hex: #e2a139
Hex: #f9d423
Hex: #ffffff
Hex: #a35200
Hex: #334155
Hex: #475569
Font-families
  • Roboto

Things to Keep in Mind

  • All components you implement should go in the src/components directory.
  • Don't change the component folder names as those are the files being imported into the tests.
  • Do not remove the pre-filled code
  • Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.

About

This code creates a simple React application for a coin toss game. Users can click the "Toss Coin" button to simulate a coin toss and track the number of heads and tails that have appeared. The UI displays the current toss result and counts in real-time.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published