You will build a real pizza website: product cards, a cart, and checkout.
A ready-made prompt is written for each step — just copy it and send it to AI.
1Switch the shop to the new Excel file with pizzas
Instead of electronics the catalog will show real pizzas from the new file — with correct names, descriptions, prices and photos. Filters, search and sorting work with the new data.
💬 Copy and send to AI
I have a file pizzas.xlsx with new pizzas — it's in the same folder as the website.
Replace all products on the website with the pizzas from this file: update names, descriptions, prices
and categories. Pizza images are in the images/ folder — match them to each pizza
by number or filename.
2Add a third promo code
On the checkout page a third promo code will appear.
Choose your own code word and discount — for example PIZZA gives −20%.
💬 Copy and send to AI
On the checkout page promo codes GOOD and NEW already work. Find where they are checked in the code
and add a third promo code next to them — choose any word and the discount it gives
(can be a percentage or a fixed amount).
3Add a "Clear Cart" button
A "Clear All" button will appear in the cart sidebar header.
Press it — all items are removed at once and the cart becomes empty.
💬 Copy and send to AI
In the cart sidebar add a "Clear All" button. When clicked — all products are removed
from the cart at once and the cart becomes empty.
The button should only be visible when there is something in the cart.
4Show the number of found products
Above the product grid a line will appear: "Found: 6 products".
Apply a filter or type a search — the number updates automatically.
💬 Copy and send to AI
Above the pizza list add a label that shows how many products were found —
for example "Found: 6 products". The number should change automatically when
you apply a filter or type something in the search box.
5Product count on filter buttons
Category buttons will show numbers in brackets:
"Meat (4)", "Veggie (3)". You can immediately see how many products are in each group.
💬 Copy and send to AI
On the category filter buttons add a number in brackets — how many pizzas are in each category.
For example "Meat (4)". On the "All" button show the total count of all products.
6Free delivery hint in the cart
At the bottom of the cart a line will appear: "Until free delivery: $18.50".
Add items — the amount decreases. Reach $50 — the line changes to
"🎉 You have free delivery!"
💬 Copy and send to AI
In the cart sidebar add a free delivery progress hint.
Threshold — $50. Show how much is left to add. When the threshold is reached —
show a congratulatory message. Update whenever the cart changes.
7"Back to Top" button
Scroll the page down — a round ↑ button appears in the bottom right corner.
Press it — the page smoothly scrolls back to the top.
At the very top the button is not visible.
💬 Copy and send to AI
Add a "back to top" button on all pages in the bottom right corner.
It appears after scrolling 300px and hides when the page is at the top.
On click — smooth scroll to top. Style should match the site's color scheme.
8Item count in the browser tab title
The browser tab title will show the item count:
"(3) PizzaShop — Menu". Add an item — the number updates.
Cart is empty — no brackets.
💬 Copy and send to AI
Make the number of cart items appear in the browser tab title.
For example "(3) PizzaShop — Menu". The number should update when
you add or remove products. When the cart is empty — the title is normal without brackets.
9Dark and light mode
A 🌙 / ☀️ button appeared in the header. Press it — the site
switched to light design. Press again — dark returned. After reloading
the mode was saved.
💬 Copy and send to AI
Add a dark/light mode toggle button 🌙/☀️ to the header on all pages.
When pressed — the entire site switches to light design. When pressed again — dark returns.
The selected mode should be saved when you close and reopen the browser.
10Add to cart animation
Press "+ Add to Cart" — the button turned
green with text "✓ Added" for a second, then returned to normal.
The cart icon in the header bounced.
💬 Copy and send to AI
When the "+ Add to Cart" button is clicked — make it turn green with text "✓ Added"
for one second, then return to normal.
The cart icon in the header should also slightly bounce at that moment.
11Star rating
On product cards and in the modal window instead of the rating number —
yellow stars ★★★★☆. The number of filled stars
matches the product rating.
💬 Copy and send to AI
On product cards and in the detail window — replace the rating number with yellow
stars ★★★★☆. The number of filled stars should match the rating.
12Add Email field to the order form
On the checkout page the Email field became required.
The form can't be submitted without it. With an invalid format — a red border
with the text "Please enter a valid email".
💬 Copy and send to AI
On the checkout page make the Email field required. If it's not filled —
the form can't be submitted. If something that doesn't look like an email is entered (no @ or dot)
— highlight the field in red with the message "Please enter a valid email".
13New "Delivery" page
A new "Delivery" link appeared in the navigation.
On the page — delivery zones, cost, timelines and free delivery conditions.
Header and footer match the other pages.
💬 Copy and send to AI
Create a new delivery.html page with the same header and footer as on other
pages of the site. Add a "Delivery" link to the menu on all pages.
Page content: city delivery zones, cost ($5), free from $50,
delivery time 30–45 minutes.
14"Add to Favorites" button
Each product card will have a ♡ button.
Press it — the heart turns red ♥ and the pizza is added to favorites.
After reloading the page the hearts remain in place.
💬 Copy and send to AI
Add a heart button ♡ to each product card. When pressed — the heart
becomes red ♥ and the product is added to favorites. Press again — removed from
favorites. The favorites list should be saved in the browser — after
page reload the hearts on the right cards remain filled.
15Add a new product to the sale page
The sale page had 3 products — now there are 4.
The new product is displayed with the "🔥 Sale" badge like the others.
💬 Copy and send to AI
On the "Sales" page there are currently three products. Add one more —
choose any pizza from the catalog that you want to include in the sale.
16Minimum order amount
The "Place Order" button in the cart becomes inactive when
the total is less than $10. Below the button — the text
"Minimum order: $10". Reach the required amount — the button becomes active.
💬 Copy and send to AI
Make the "Place Order" button in the cart inactive when the total
is less than $10. Below the button a text should appear: "Minimum order: $10".
When the required amount is reached — the button becomes active again.
17Search is saved after reload
Typed text in search, selected a category and sort — reloaded the page.
Everything remained: same text in the search box, same filter button
pressed, same sort option selected.
💬 Copy and send to AI
Save the search text, selected category and selected sort option in the browser.
Reloaded the page — everything is still there: same text,
same filter button pressed, same sort option selected.
18Related products in the modal
In the product modal window a
"Related products" section appeared at the bottom — 3 cards from the same category.
Click one — the modal updated and shows the selected product.
💬 Copy and send to AI
When you open a product card in the popup window — add a "Related products" section
at the bottom with three other pizzas from the same category.
Click one of them — the window updates and shows the selected product.
19Order history
After a successful checkout the order is saved.
On the checkout page in an "My Orders" section you can see
a list of past orders: date, number and total.
💬 Copy and send to AI
After each successful checkout save the order in the browser memory.
Add a "My Orders" section to the checkout page with history:
date, order number and total. If no orders have been placed yet — do not show the section.
20
Website vulnerability analysis
Perform a website security analysis (without exploitation).
Rate the security level on a 10-point scale and briefly explain the rating.
💬 Copy and send to AI
Analyze the website for vulnerabilities and rate it on a ten-point scale.