Order Pizza
My first object-oriented programming project in Javascript for pizza ordering.
First class of this project is Pizza, the constructor takes 5 parameters, which are:
name, ingredients, small, medium, large
Pizza class contains a variable allIngs that keeps all possible ingredients used for any created instance of this class.
There is also Pizza.counter variable starting at 0, that increments every time new instance of this class is created.
It also automatically add a num property to every instance.
Pizza.makeYourOwn is an object that stores prices for clients that want to create a custom pizza on demand.
Random instance of pizza class below:
new Pizza("Mafiozo", [5, 6, 7, 11], 14, 18, 24);
With each newly created instance there are 3 methods that run simultaneously.
initIngs() converts array of indexes into actual ingredients declared in Pizza.allIngs. By that it's easier to avoid human error like misspelling.
initAddToMenu() adds new instance to an object wholeMenu that stores all instances of the class.
initAddToWebsite() automatically adds new recipe with its prices and ingredients to website.
showAllIngs() logs all ingredients to the console with corresponding indexes.
information() logs all information about an individual instance of a class.
static method sizes() show all 3 available sizes of pizza in cm.
The second class of this project is Order, the constructor also takes 5 parameters, which are:
pizzaname, amount, price, size, subtotal
Class variable Order.counter starts at 0 and increments every time new order is added to the cart.
It also automatically add a num property to every order instance similarly to previous class.
Order.total also starts at 0 and keeps track of all subtotals from the cart.
Random instance of pizza class below:
new order("Primavera", 3, 15, "S", 45);
With each newly created instance of order there are 3 methods that run simultaneously.
addToAllOrders() adds new instance to an object allOrders that stores all instances of the class.
countTotal() takes the subtotal from this instance of a class and adds it to Order.total variable. It also updates the total DOM element.
addToSidebar() adds order to sidebar.
The only other method in this class is deleteFromSidebar() and it cooperates with eventListener. The method itself is triggered by eventListener and removes subtotal of this particular instance from total and instance from allOrders object. EventListener removes DOM from document.
Other than those 2 classes and their methods, there are total of 3 pop-ups and a sidebar for a user to interact with:
First pop-up allows user to create a new custom pizza that will be added to the menu, pizza can have 3 to 5 ingredients and the prices will adjust accordingly.
Second pop-up is to add pizza to the cart, you can specify the amount and size. Subtotal of this order will be refreshed with every adjustment.
Sidebar contains all orders, allows to delete any of them, and show total price. It also has a button to submit the order.
Last pop-up shows all orders, total, and asks for delivery details. You can provide arbitrary information, I made address info obligatory just to make it more real.
Once you hit the send button those information go to my email with EmailJS in a form shown below. Only Custom orders are shown with ingredients.
Additional features:
Responsive Web Design
Technologies:
- - Vanilla Javascript
- - EmailJS
- - SASS/CSS
- - HTML