LIVE DEM :- Age Calculator

In this assignment let's build a Age Calculator

Refer to image below:

-- https://assets.ccbp.in/frontend/content/react-js/age-calculator-output.gif --

Design Files

• Extra Small (Size < 576px), Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)
• 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 user enters the birth year in the input box

  • If the entered birth year is valid then the calculated age is displayed to the user.
  • If the entered birth year is Invalid then the Error message Enter the year that you are Born is displayed to the user.

• If the calculated age is greater than 1 then the text You are x years old by the end of 2021 is displayed to the user.

• If the calculated age is exactly one then the text You are 1 year old by the end of 2021 is displayed to the user.

• core code files

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

Quick Tips:

• The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element. Use the CSS property cursor with the value pointer to indicate a link. Click this to know more.

• An outline is a line that is drawn around an element, outside the border. The outline CSS shorthand property sets all the outline properties. Use the CSS property outline with value none to hide all the outline properties. Click this to know more.

Resources

Images

https://assets.ccbp.in/frontend/react-js/age-calculater-persons-img.png

Colors

Hex: #171f46

Hex: #ff0b37

Hex: #8e1dd2

Background Colors

Hex: #ffffff

Hex: #43cbff

Hex: #9708cc

Font-families

• Roboto