https://github.com/amliyanage/pizza-ordering-website

The Pizza Ordering Website is a web application created with HTML, CSS, and JavaScript. Users can browse pizza options, add items to their cart, and view the total. It includes an image carousel, product listings, and cart functionality for an interactive experience.
https://github.com/amliyanage/pizza-ordering-website

css html javascript online-shop

Last synced: 2 days ago
JSON representation

The Pizza Ordering Website is a web application created with HTML, CSS, and JavaScript. Users can browse pizza options, add items to their cart, and view the total. It includes an image carousel, product listings, and cart functionality for an interactive experience.

• Host: GitHub
• URL: https://github.com/amliyanage/pizza-ordering-website
• Owner: amliyanage
• License: mit
• Created: 2024-03-01T14:56:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-21T11:39:09.000Z (12 months ago)
• Last Synced: 2025-10-06T11:50:04.265Z (2 days ago)
• Topics: css, html, javascript, online-shop
• Language: CSS
• Homepage:
• Size: 6.45 MB
• Stars: 15
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Pizza Ordering Website

This project is a simple pizza ordering website built using HTML, CSS, and JavaScript. It allows users to view different pizza options, add them to their cart, and see the total number of items in the cart.

![Pizza Image](img/Ss/Screenshot%202024-02-22%20163353.png)

![Pizza Image](img/Ss/Screenshot%202024-02-22%20163426.png)

![Pizza Image](img/Ss/Screenshot%202024-02-22%20163438.png)

![Pizza Image](img/Ss/Screenshot%202024-02-22%20163448.png)

![Pizza Image](img/Ss/Screenshot%202024-02-22%20163502.png)

## Features

- **Image Carousel**: Automatically changes the displayed image every 4 seconds.

- **Product Listing**: Displays a list of pizza items with their details.

- **Cart Functionality**: Allows users to add items to the cart and see the total count of items in the cart.

- **Increment/Decrement Quantity**: Users can increase or decrease the quantity of each item before adding it to the cart.

## File Structure

- `index.html`: The main HTML file that includes the structure of the homepage.

- `css/`: Directory containing CSS files for styling the website.

  - `loginPage.css`: Styles for the login page.

  - `product.css`: Styles for the product listing.

- `js/`: Directory containing JavaScript files for functionality.

  - `Item.js`: JavaScript class for creating item objects.

  - `LoginPage.js`: JavaScript file for handling the login page functionality and item listing.

## Getting Started

### Prerequisites

- A modern web browser (e.g., Chrome, Firefox, Edge).

### Installation

1. Clone the repository:

    ```sh

    git clone https://github.com/amliyanage/pizza-ordering-website.git

    ```

2. Navigate to the project directory:

    ```sh

    cd pizza-ordering-website

    ```

### Usage

1. Open `index.html` in your web browser to view the website.

2. Browse through the pizza options and add items to your cart.

3. View the total number of items in your cart in the navigation bar.

## Contributing

Contributions are welcome! Please fork the repository and create a pull request with your changes.

## License

This project is licensed under the MIT License. See the `LICENSE` file for more details.

## Acknowledgements

- Icons by [Font Awesome](https://fontawesome.com/)

- Images from various sources