Alex Pizza Assistant is a browser-based chatbot that guides users through a complete pizza order one question at a time. It began life as a Python console program and was translated into a static web app that runs directly in the browser with no backend, no build step, and no third-party libraries. The result is a fully self-contained ordering experience that demonstrates how far plain HTML, CSS, and vanilla JavaScript can take a realistic interactive flow.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/alex-pizza-assistant/llms.txt
Use this file to discover all available pages before exploring further.
What it Does
Alex — the virtual assistant — opens the conversation and collects everything needed to place an order: your name, pizza size, toppings, crust type, and quantity. Once the first pizza is complete it asks whether you want to add another. You can keep building the order across as many pizzas as you like before moving to checkout. Every pizza you add immediately appears in the live receipt panel on the right side of the screen, so the full order is always visible as it grows. Checkout branches depending on your choices. Carry-out and delivery follow different paths, and cash and card payments each have their own follow-up flow. Card payments walk through a card number, expiration date, and security code before showing a simulated approval message. Delivery orders paid by card also prompt for an optional driver tip, which is folded into the final total alongside the pizza subtotal, 10% sales tax, and the $5 delivery fee. After the order closes, the app checks whether the subtotal reached 10-off coupon message accordingly. A short ETA countdown then fires in the chat feed to complete the experience.Tech Stack
| Layer | Choice |
|---|---|
| Markup | Semantic HTML5 |
| Styles | Plain CSS with custom properties |
| Logic | Vanilla JavaScript (ES6+) |
| Data | data/menu.json — display values for the UI sidebar’s Menu Logic card |
| Hosting | Any static host; GitHub Pages compatible |
index.html directly from the filesystem is enough to run the full app.
Key Features
- Conversational step-by-step ordering — each question appears as a labelled prompt; answers appear as chat bubbles
- Multi-pizza support — add as many different pizzas as you like before checking out; each is tracked as a separate line item
- Live receipt panel — name, order method, payment info, itemised pizzas, subtotal, tax, delivery fee, tip, and total all update in real time as the conversation progresses
- Input validation — every step is guarded; blank answers, wrong formats, and out-of-range numbers show an inline error and block progress until corrected
- Branching checkout — carry out vs delivery and cash vs card each route to their own follow-up steps
- Simulated card payment — card number (13–19 digits),
MM/YYexpiration, and 3–4 digit CVV are collected and a mock approval is displayed - Driver tip — prompted only for delivery orders paid by card; added directly to the order total
- Coupon reward — orders of 10-off coupon message at checkout
Educational Background
The project doubles as a teaching example. The original Python console version was written to practise core beginner programming concepts, and those same concepts are visible throughout the JavaScript source:- Variables and type conversion — string inputs are parsed into numbers for quantity and tip; card digits are stripped of spaces and dashes
- Arrays and loops — each pizza is pushed into an
order.pizzasarray;reducetotals the subtotal across all items - Conditionals — every branch in the order flow (add another pizza, delivery vs carry-out, cash vs card, tip prompt, coupon threshold) is an
if/else ifchain - Validation — regex patterns and length checks mirror the
while-loop guards from the Python original - Formatted output —
toLocaleStringwith fixed decimal places produces currency strings; the receipt panel renders them in real time
Card payment in Alex Pizza Assistant is a front-end demo only. No card data is transmitted, stored, or processed anywhere. You can enter any syntactically valid card number, expiration date, and CVV to complete the flow.
Explore the Docs
Quickstart
Clone the repo, open the file, and walk through your first order in under five minutes.
Order Flow
See how Alex routes through each step, handles branching, and finishes the order.
Validation
Learn how every input is guarded and why the validation rules mirror the Python original.
Configuration
Adjust prices, tax rate, delivery fee, and the coupon threshold — update both app.js constants and data/menu.json to keep them in sync.