Skip to content

Creating a Pizza website for school using HTML, CSS, and JS πŸ•

Notifications You must be signed in to change notification settings

rabbitglauser/GIBZ-M231-Pizza-Website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

52 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Tony's Pizza Factory πŸ•

Features 🌟

Website Layout 🎨

  • πŸ–ŒοΈ The layout is designed based on a provided mockup.
  • πŸ”— All website links work perfectly, leading to the correct pages.

How the website should look like

example website

Dynamic Content βš™οΈ

  • πŸ• Products are dynamically loaded from JSON files, ensuring freshness (just like our pizzas!).

Shopping Cart πŸ›’

  • πŸ“ˆ The cart icon at the top-right of every page shows the total number of items in the cart.
  • βž• Clicking on a product's cart icon increases its quantity.
  • πŸ“ When you click the top-right cart icon, a message appears: "Thank you for your order."
  • 🧹 The global cart resets to zero after your order.

Feedback Page πŸ“‹

  • πŸ€” A form with mandatory fields ensures your feedback reaches us.
  • πŸ₯³ Once submitted, you'll be redirected to a "Thank You" page.

Clean Code βœ…

  • Proper indentation and clear naming for classes, functions, and variables.
  • Passed all checks with linting tools (CSS, JS, HTML). Zero errors! πŸŽ‰
  • No "red zones" or warnings in the code. Your browser will love it. ❀️

Consistency πŸ”„

  • The header and footer are consistent across all pages.
  • Navigation works flawlessly, just like our delivery service. πŸš—πŸ’¨

Responsive Design πŸ“±πŸ’»

  • Flexbox is used for a clean and modern arrangement of HTML elements.

Grade-6 Extra Feature πŸ₯‡

  • [Your implemented bonus feature goes here! Describe it briefly.]

How to Clone the Project πŸ§‘β€πŸ’»

  1. Fork it 🍴 or Clone it via:

    git clone https://github.com/yourusername/GIBZ-Pizza-Website.git
  2. Navigate to the project folder:

    cd GIBZ-Pizza-Websit
  3. Open it in your favorite editor (e.g., VSCode):

    code .
  4. Install dependencies (if needed) and run a local server:

    npm install  # If dependencies exist
    npm start    # Or use a live server extension
  5. Enjoy the website in your browser at localhost:3000 (or similar).


Tech Stack πŸ› οΈ

  • Frontend: HTML, CSS, JavaScript
  • Product Data: JSON
  • Fully responsive and dynamic design powered by modern tools.

About the Developer πŸ‘¨β€πŸ’»

Samuel is an apprentice at Bitcoin Suisse and a student at GIBZ. When he's not writing clean code or experimenting with Flexbox layouts, he dreams about the perfect pizza slice. πŸ•πŸ˜Ž


Contributing 🀝

Feel free to fork the project and submit a pull request. Feedback, bug fixes, and new features are always welcome! πŸ§‘β€πŸ³


License πŸ“œ

This project is open-source. Use it, modify it, and learn from it. Just don't forget to share a pizza with Samuel! πŸ˜„

About

Creating a Pizza website for school using HTML, CSS, and JS πŸ•

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published