sirajkakeh / pizza-shop

A basic HTML/CSS challenge project for interns

Pizza Shop

Description

In this challenge, we're going to add some functionality to an existing web page. Javascript is the way we interact with HTML elements, let's use it to create something cool!

Excercise 1

Let's take a look at our app, it's a simple online ordering web page to order from a Pizza Shop

But it's missing functionality! To help make this app functional we're going to add the cart functionality. When a user clicks on the Add to cart, the cart should update its total items and total amount to reflect this to the user

Prerequisites

• Visual Studio Code, Git
• Fork the repo to your account
• Clone the repo to your local device
• Create a branch named feature/cart
• Switch to that branch

Basic Requirements

• Start by thinking of where we'll write our Javascript, whether it's inlined by a <script> tag, or imported from a .js file into our HTML, the choice is yours!
• After creating your .js file (or your <script> tag), make sure it's working correctly by adding an alert("Pizza on the way!") to the file and refreshing the page, did the alert show up?
• Let's start thinking of ways to connect the dots, assume a user clicks on Add to cart on the Classic pizza card. The cart should look something like this:

• Think of the challenge in terms of events. When a user clicks on a button, what's the event currently happening? How can we handle this event? What Javascript functionality is used to handle events?

• Now after handling the event, let's think of how we can update the cart. How can we update the cart elements? What about existing cart values? How can we avoid overriding them?

• Commit your code often, write clear commit messages!

• After completing the excercise, push the code to your remote fork

• Create a pull request from your branch feature/cart to the main branch

• Notify your mentor when done!

Advanced Requirements

Congratulations on completing your first task. Let's add some functionality to the cart to remove items from the cart

• Create a new branch from your current branch (feature/cart) and call it feature/cart-modal

• Switch to that branch

• Try clicking on the cart popup, a modal should appear

• These are static data, let's make them dynamic!

• Start by thinking of how to provide the modal with the customer order data.

• Where will we store the customer data? When will we store them? How can we do that?

• After successfully reflecting the added items to the modal, let's try adding add and remove functionality.

• When clicking on the + button, item quantity should increase and the total should reflect the new amount

• When clicking on the - button, item quantity should decrease and the total should reflect the new amount

• Commit your code often, write clear commit messages!

• Bonus: Can we remove the item completely if a user clicks on - on an item with quantity of 1 ?

Good luck with your task!