LIVE DEMO :- Cash Withdrawal

In this assignment let's build a Cash Withdrawal

Refer to images below:

Design Files

Click to view the Design Files

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

Project Set Up Instructions

Click to view the Set Up Instructions

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

Project Completion Instructions

Click to view the Functionality to be added

Add Functionality

The app must have the following functionalities

• Initially the balance should be 2000 rupees.

• When a denomination is clicked the respective value should be deducted from the balance available.

• The CashWithdrawal component receives the denominationsList as a prop. It consists of a list of denomination objects with the following properties in each denomination object

  Key	Data Type
  id	Number
  value	Number

Click to view the Components Structure

Components Structure

Quick Tips

Click to view Quick Tips

• The slice() method extracts a section of a string and returns it as a new string, without modifying the original string.

  const text = "The quick brown fox";
  console.log(text.slice(0, 3)); // The
  console.log(text.slice(2, 3)); // e
  

• You can use the below cursor CSS property for buttons to set the type of mouse cursor, to show when the mouse pointer is over an element,

    cursor: pointer;
  

  
  

• You can use the below outline CSS property for buttons and input elements to remove the highlighting when the elements are clicked,

    outline: none;
  

Resources

Colors

Colors

Hex: #150b3e

Hex: #c7d2fe

Hex: #7c3aed

Hex: #d4d2db

Hex: #585076

Hex: #382f5a

Hex: #c4c4c4