Restaurant Menu App

This interactive menu app was a project I developed as a course requirement using Angular JS . The requirements and mockup were provided; aim was to develop an interactive app that allows the user to select items and quantities and dynamically calculates total amounts and taxes for the items based on their quantities.

Tools:
Angular JS, HTML, CSS



The Process

Being my very first angular project, this was definitely a challenge.

The requirements:
Create a restaurant food menu ordering interface with the following features:
- The ‘Reset Order’ button sets all quantities and totals to zero when clicked. (2 marks)
- The plus button increments the quantity for an item. The minus button decrements a quantity. (2 marks)
- If the quantity of salmon exceeds 4, the color of the font and the background changes to alert the server that only 4 are in stock so they can notify the
customer. Reducing the salmon quantity back to 4 or less changes the colors back to normal. (2 marks)
- The interface dynamically and accurately updates the dollar totals at the bottom each time a plus or minus button is clicked. (4 marks)
- The interface is professional looking. Tip: For rounding numbers you may wish to use a pipe
https://stackoverflow.com/questions/38456114/angular-2-pipe-limit-to-2-decimal-places

I broke the requirements into small chunks and progressively worked towards the result.

Screenshots of the mockup (supplied) and my working code below.

Challenges and Learning

The project was a challenge and a big learning process for me.