- 📄 Project Overview
- 🧰 Tech Stack
- 🛠️ Development Tools
- 🧠 Core Concepts / New Concepts
- ✨ Features
- 🧮 Business Rules & Calculations
- 🖼️ Visual Aids
- 🧪 Input Validation
- 💡 Reflection: What I Learned
This project is a simple grocery checkout application built using HTML, CSS, and JavaScript.
The program collects user input for a grocery purchase, validates the input, calculates totals (including tax and discounts), and displays a formatted receipt using a JavaScript alert.
The project is based on the Chapter 1 email_list example and modified to meet the assignment requirements for Chapters 1 and 2.
| Technology | Purpose |
|---|---|
| HTML | Structure of the form |
| CSS | Styling and layout |
| JavaScript | Logic, validation, and calculations |
| Tool | Description |
|---|---|
| Web Storm | Code editor |
| Web Browser | Testing and execution |
| GitHub | Version control and hosting |
- Client-side input validation
- Conditional (ternary) operators
- Template literals for formatted output
- Currency formatting using
toFixed(2) - JavaScript constants (
const) - Clean, readable function-based logic
- User-friendly grocery input form
- Real-time input validation with error messages
- Automatic calculation of totals, tax, and discounts
- Conditional discount application
- Formatted receipt display using
alert() - Clean and organized code structure
| Rule | Value |
|---|---|
| Tax Rate | 8.25% |
| Discount Rate | 10% (if subtotal ≥ $50) |
- Subtotal = Unit Price × Quantity
- Discount = Subtotal × 10% (if eligible)
- Taxable Amount = Subtotal − Discount
- Tax = Taxable Amount × 8.25%
- Total = Taxable Amount + Tax
- Change = Cash − Total
✔ All currency values are formatted to two decimal places.
- Required text fields must not be empty
- Numeric fields must:
- Be valid numbers
- Be positive values
- Errors are displayed next to input fields using
<span>elements - Receipt is only displayed when all inputs are valid
Through this project, I strengthened my understanding of JavaScript fundamentals, especially input validation and conditional logic. I learned how to structure functions for readability and maintainability, and how to handle user input safely before performing calculations.
I also gained experience formatting output for users and applying real-world business rules like tax and discounts. This project helped reinforce the importance of clean code and user-friendly design in web development.