Prototype 1 set up the basic structure of the ordering page

Prototype 2 added stylings and incorporated the Happy Hour mechanic

Prototype 3 added the Bangla localization and language toggle

You can watch a video walkthrough of the website here

Happy Hour
Users get 20% off during 4 PM - 5 PM and see a live timer

English and Bangla Localization
The website can be experienced end-to-end in both English and Bangla languages

Collapsible Accordions
Users can skip sections of the menu by collapsing accordions. The accordions have smooth animation.

Persistent Cart Modal
As users add items, the cart updates dynamically and stays in the fold persistently regardless of scroll position

Inputs with Auto Formatting and Validation
Input fields such as Phone Number, E-mail or Credit Card Number have validation logics and format automatically

Google Maps Address AutoComplete
The address fields uses Google Maps’ AutoComplete API to allow users to select their address from Google Maps

Success Screen
After placing an order, users get a Success Screen with confetti animation, a randomly generated order number and how much they saved by ordering during happy hour!

API Integration
Integrates Google Maps API for Address Autocomplete

Events
Interactive elements such as buttons and forms all use events

JSON and AJAX
Ingredients are stored in a separate JSON file and the webpage pulls information using AJAX to populate items in the menu

Document Object Model
Uses GetElementById to populate the in-line validation error texts

Decisions and Loops
Checks current time to see if Happy Hour is ongoing or not and applies discount accordingly

Functions
The Checkout form validation logic is based on many functions running simultaneously

Concatenation
Uses Concatenation to display "$" sign before total price/cost

Arithmetic Operators
Uses Arithmetic Operators to calculate prices, amounts, calories and also to convert between g and oz

Arrays
Ingredients are stored as Arrays under each respective category

Variables and Constants
User inputs are stored in Constants. Confetti animation attributes make use of Variables

Object and Properties
Each ingredient is declared as an Object and their relevant information (e.g. Price, Amount, Calories, Image URL, etc.) have been set as properties

High Contrast Ratio for Perceivability
In-Line Validation Error Messages for Operability
Bangla localization for Understandability

Ingredients Cluttering Code
Including ingredient list within HTML/JavaScript was becoming messy. So a separate JSON file was introduced to store ingredients

JSON not working locally
JSON file was not loading locally due to a security issue. Installed "Live Server" extension in VSCode to bypass the security issue

Calculations not working in Bangla language
Bangla fonts are in Unicode whereas for calculations to work, the digits should be in ANSI. Thus, a parsing logic was set which translated all Unicode Bangla digits to English ANSI digits to ensure calculations remain functional

Google Maps API Not Working
Referred to Console Log error messages to identify that Google recently migrated from their Legacy Maps API to a new Places API. After updating the API endpoints to the new Places API, the feature became functional

Google Maps Autocomplete Modal not visible
The z-index of the Google Maps API modal was behind the Checkout modal. The z-index was updated to be in front to solve the issue

What I Learned

Coding is not as scary as it looks!
Once I understood the basics of what HTML, CSS and JS are and how they intertwine, coding started to feel a lot more intuitive

Version Controlling and Bug Database
Maintaining version controlling and bug databases help keep track of progress and issues

Coding Skills are no longer a barrier
As someone with no prior coding or web development knowledge, I was initially concerned how I would achieve the vision I wanted. However, Gemini helped me a lot with figuring out the specifics of coding which gave me more bandwidth to focus on design and features

What I Would Do Differently Now

Incorporate Mobile Responsive UI

Provide additional payment methods such as PayPal, Apple Pay, etc.

Add an order tracking flow after completing orders

Thanks for Reading

Wish to read more like this? Click here!