Admissions for neoG Camp 2022 are OPEN NOW.

cash register app

Welcome to this guide which will be a companion with the pair programming workshop. This guide needs to be used alongside the youtube class

Problem Statement

  • Your program has currencies of Rs. 1, 5, 10, 20, 100, 500, 2000.
  • Your user enters a bill amount say Rs. 243.
  • Your user then enters cash given say Rs. 2000.
  • Now, help the user by telling how can he/she return the change to the customer with a minimum number of notes?

How will we complete this? 🤔

We will be using HTML, CSS, and Vanilla Javascript to complete this assignment, but you can also complete this using React

Our end goal is to complete this assignment and build our logic.

Ex 1: Get the stuff from HTML land to JavaScript land.

Challenge:

  • Select the bill and cash amount input field
  • Select the check button and add a click event on it.

Understanding:

  1. querySelector()
  2. .addEventListener("click", callback) and click events
  3. concept of callbacks in javascript

Ex 2: Validate the Bill amount and Cash amount

Challenge:

  • Check if the bill amount is valid and if the cash provided is more than the bill amount
  • Show an error message if either of them is invalid

Understanding:

<yourbuttonvariable>.style.display

Ex 3: Calculate the change to be returned.

Challenge:

  • Calculate the change such that a minimum number of notes are required.

Understanding:

  • amount to be returned = cash given - bill amount
  • we can iterate through all the notes from the highest to the lowest denomination
  • we go from highest to lowest because we want to return the change in a minimum number of notes
notes = [2000, 500, 100, 20, 10, 5, 1]
  • no of Notes of current denomination = amount to be returned / notes[i]
  • amount left to be returned = current amount % notes[i]

Bonus (Optional)

  • You need two inputs from the user. Can you make it in a way where the second input is only visible after the first input is given i.e. bill amount should be filled?

Hint:

<yourVariable>.style.display