LIVE DEMO :- EVEN ODD Random Increment

In this assignment let's build a Even Odd App

Refer to image below:

Application reference image : -- https://assets.ccbp.in/frontend/content/react-js/even-odd-app-output.gif --

Design Files

• Extra Small (Size < 576px), Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

Project Set Up Instructions

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

Project Completion Instructions

Add Functionality

The app must have the following functionalities

• When the page is opened the HTML heading element should have Count 0 as text content and the first HTML paragraph element should have Count is Even as text content initially.

• When the Increment button is clicked

  • The count should be increased by a random number between 0 to 100.
  • If the count is an even number and text content of HTML paragraph element should be Count is Even.
  • If the count is an odd number and text content of HTML paragraph element should be Count is Odd.

• core code files

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

Resources

Colors

Hex: #FF6E7F

Hex: #bfe9ff

Hex: #0f172a

Hex: #334155

Hex: #ffffff

Hex: #1e293b

Font-families

• Roboto