Cash Register - FreeCodeCamp Project

This project is a solution to the Build a Cash Register Project on FreeCodeCamp. The project involves creating a web-based cash register application that calculates and returns change to the customer based on the price of the item, the amount of cash provided by the customer, and the cash in the register.

Table of Contents

• Overview
  • The Project
  • Screenshot
  • Links
• My Process
  • Built With
  • What I Learned
  • Continued Development
  • Useful Resources
• Author
• Acknowledgments

Overview

The Project

The goal of this project is to build a functional cash register that can:

• Calculate Change: Determine the amount of change due based on the item's price and the cash given by the customer.
• Handle Various Scenarios:
  • Insufficient funds in the cash drawer.
  • Exact change with no change due.
  • Open drawer with enough change, returning change in descending order of currency units.
  • Closed drawer with exact change available.

The application includes:

• An input field for entering the cash amount.
• A button to process the purchase.
• A display area for showing the result of the transaction.

Screenshot

Links

• Live Demo: View the Cash Register

My Process

Built With

• HTML5 for the page structure and layout.
• CSS3 for styling and responsive design.
• JavaScript (ES6) for implementing the cash register logic, calculating change, and handling user interactions.

What I Learned

Working on this project improved my skills in:

• Change Calculation: Implementing algorithms to determine and return the correct change using available currency.
• DOM Manipulation: Dynamically updating the UI based on user input and calculations.
• Event Handling: Managing user interactions such as input changes and button clicks.
• Algorithmic Thinking: Designing and applying algorithms to handle different cash register scenarios and return the correct results.

Continued Development

Future enhancements for this project could include:

• Enhanced UI: Improving the visual design and user experience.
• Additional Features: Adding functionality for handling larger amounts of cash or different currencies.
• Error Handling: Implementing better validation and error handling for user inputs.

Useful Resources

• MDN Web Docs - JavaScript - Comprehensive guide to JavaScript, including ES6 features.
• CSS Tricks - Flexbox - Guide on using Flexbox for layout design.
• JavaScript.info - DOM Manipulation - Detailed overview of manipulating the DOM with JavaScript.

Author

• LinkedIn - Yashi Singh

Acknowledgments

A big thank you to FreeCodeCamp for providing this project, which allowed me to apply and enhance my JavaScript and web development skills. Special thanks to the coding community and online resources that provided support and inspiration throughout the project.