Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pizza-pasta-salad #141

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Binary file added .DS_Store
Binary file not shown.
40 changes: 34 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@
# Project Name
# JavaScript Pizzeria & Café Order System
This project is a hands-on exercise to practice handling user input, control structures, and basic order management in JavaScript. It implements a dynamic ordering system for a pizzeria and café using JavaScript. It allows users to choose from a range of food and drink options, while incorporating basic control flow techniques such as if, else, and switch statements.

Replace this readme with your own information about your project. Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
# Key Features
User Input: Collects the user’s name, food and drink preferences, and age to customize the order.

## The problem
Control Flow: Utilizes both if/else if and switch methods to handle different types of orders for food and drinks.

Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
Age-based Size: Suggests meal sizes based on the user’s age (e.g., regular or kids' sizes).

## View it live
Flexible Options: Users can select from multiple food options (Pizza, Pasta, Salad) and drinks (Coffee, Lemonade, Juice).

# How it works:
Start: The program begins by greeting the user and prompting them for their name.

Food Ordering: The user chooses from a list of food items (Pizza, Pasta, Salad). Depending on their choice, they are asked to select the specific type of food.

Age Input: Based on the user’s age, the program determines the appropriate size for their order (e.g., small for kids).

Drink Ordering: Users can also choose a drink from Coffee, Lemonade, or Juice, with additional selection options.

Confirmation: After selecting both food and drink, the user receives a confirmation of their order with size based on age.

# Technical Details
Control Flow: The project showcases both if/else and switch control flow methods to handle multiple user inputs.

Have you deployed your project somewhere? Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about
Comments & Flexibility: By commenting and uncommenting specific sections of code (such as the if/else or switch statements), the program can run in different configurations, showcasing flexibility between two methods of handling logic.

# Files
index.html: The main HTML file containing the structure of the web page.

style.css: The CSS file for basic styling.

script.js: JavaScript code using if/else for order flow.

switch.js: JavaScript code using switch statements for order flow.

## View it live
https://pizza-pasta-salad.netlify.app/
Binary file added code/.DS_Store
Binary file not shown.
Binary file added code/assets/pizzeria.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 22 additions & 16 deletions code/index.html
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript Pizzeria</title>
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<h1>Javascript Pizzeria</h1>
<p>Logic is executed automatically</p>
<script src="./script.js"></script>
</body>
</html>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript Pizzeria</title>
<link rel="stylesheet" href="./style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet" />
</head>

<body>
<h1>Javascript Pizzeria</h1>
<p>Logic is executed automatically</p>
<!-- First script with if & else if -->
<!-- <script src="./script.js"></script> -->

<!-- Second script with switch method -->
<script src="./switch.js"></script>
</body>

</html>
135 changes: 124 additions & 11 deletions code/script.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,132 @@
// Start here

// Step 1 - Welcome and introduction
// Your code goes here
// Welcome
alert(
`Welcome to our Javascript Pizzeria. Ready to Start? - Click 'OK' to begin.`
)

// Step 2 - Food choice
// Your code goes here
//Ask for the name
const name = prompt(`Please enter your name:`)

//Introduction
alert(
`Hallo, ${name}! Are you ready to order? - Click 'OK'.`
)

// Submit food choice
let firstOrder = ''
while (firstOrder !== '1' && firstOrder !== '2' && firstOrder !== '3') {
firstOrder = prompt(`What would you like to order? Please enter the number:
1 - Pizza
2 - Pasta
3 - Salad`)
if (firstOrder !== '1' && firstOrder !== '2' && firstOrder !== '3') {
alert(`Please enter a valid number: 1, 2, or 3`)
}
}

//The first order confirmation
if (firstOrder === '1') {
firstOrder = 'Pizza'
}
else if (firstOrder === '2') {
firstOrder = 'Pasta'
}
else if (firstOrder === '3') {
firstOrder = 'Salad'
}
alert(
`You would like to have ${firstOrder}. Is that correct?`
)

// The second order
//Pizza Type
secondOrder = ''
if (firstOrder === 'Pizza') {
while (secondOrder !== '1' && secondOrder !== '2' && secondOrder !== '3') {
secondOrder = prompt(`What type of Pizza would you like to order? Please write the number:
1 - Pizza Margherita
2 - Pizza Pepperoni
3 - Pizza Hawaiian`)
if (secondOrder !== '1' && secondOrder !== '2' && secondOrder !== '3') {
alert(`Pease enter a valid number: 1, 2, or 3`)
}
}

// Step 3 - Subtype choice
// Your code goes here
if (secondOrder === '1') {
secondOrder = 'Pizza Margherita'
}
else if (secondOrder === '2') {
secondOrder = 'Pizza Pepperoni'
}
else if (secondOrder === '3') {
secondOrder = 'Pizza Hawaiian'
}
}

// Pasta Type
else if (firstOrder === 'Pasta') {
while (secondOrder !== '1' && secondOrder !== '2' && secondOrder !== '3') {
secondOrder = prompt(`What kind of Pasta would you like to order today? Please write the number:
1 - Spaghetti
2 - Carbonara
3 - Lasagna`)
if (secondOrder !== '1' && secondOrder !== '2' && secondOrder !== '3') {
alert(`Please enter a valid number: 1, 2, or 3!`)
}
}

if (secondOrder === '1') {
secondOrder = 'Spaghetti'
}
else if (secondOrder === '2') {
secondOrder = 'Carbonara'
}
else if (secondOrder === '3') {
secondOrder = 'Lasagna'
}
}

// Salad Type
else if (firstOrder === 'Salad') {
while (secondOrder !== '1' && secondOrder !== '2' && secondOrder !== '3') {
secondOrder = prompt(`What kind of Salad would you love to order today? Please write the number:
1 - Greek Salad
2 - Fish Salad
3 - Chicken Salad`)
if (secondOrder !== '1' && secondOrder !== '2' && secondOrder !== '3') {
alert(`Please enter a valid number: 1, 2, or 3!`)
}
}

if (secondOrder === '1') {
secondOrder = 'Greek Salad'
}
else if (secondOrder === '2') {
secondOrder = 'Fish Salad'
}
else if (secondOrder === '3') {
secondOrder = 'Chicken Salad'
}
}

alert(
`${secondOrder}, great choice!`
)

// Step 4 - Age
// Your code goes here
let age = prompt(`To help us suggest the perfect meal size for you, could you please tell us your age, ${name}?`)

// Check if age is not a number
while (isNaN(age)) {
alert(`Please enter a valid number`)
age = prompt(`Enter your age:`)
}
//Order
if (age >= 13) {
alert(`Thank you! You like to order ${secondOrder} regular size. Click 'Ok' to order.`)
}
else if (age < 13) {
alert(`Thank you.You like to order a kid's ${secondOrder}. Click 'ok' to order`)
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only thing I found which maybe could have an improvement at this stage is that you could parse the age value and validate against potential edge cases (e.g., negative or unrealistic ages).

let age = parseInt(prompt(How old are you, ${name}?));
while (isNaN(age) || age < 0 || age > 120) {
alert(Please enter a valid age.);
age = parseInt(prompt(Enter your age:));
}

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, Kelly! That's a good tipp!

// Step 5 - Order confirmation
// Your code goes here
// Order confirmation
alert(`Thank you for your order!`)
5 changes: 3 additions & 2 deletions code/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@

body {
font-family: "Montserrat", sans-serif;
background: #0026ff;
background: black;
background-color: rgb(67, 55, 26);
color: white;
display: flex;
justify-content: center;
Expand All @@ -17,4 +18,4 @@ body {

p {
font-size: 1.5em;
}
}
64 changes: 64 additions & 0 deletions code/switch.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
// Start
alert(`Please click 'ok' to start your order.`)

// Getting the name
let name = prompt(`Please enter you name:`)

// First order
let firstOrder = prompt(`Hi ${name}, welcome to the Café. Let's start with your order! What would you like to drink?
1 - Coffee
2 - Limonade
3 - Juice
Please enter the number!`)

// Second order
switch (firstOrder) {
case '1':
secondOrder = prompt(`You have selected Coffee. Please select the Coffee by writing the assigned number:
1 - Café Latte Macchiato
2 - Espresso
3 - Cappuccino`)
break
case '2':
secondOrder = prompt(`You have selected Limonade. Please select the Limonade by typing 1, 2 or 3:
1 - Coke
2 - Fanta
3 - Sprite`)
break
case '3':
secondOrder = prompt(`You have selected Juice. Please select the Juice:
1 - Apple Juice
2 - Tomato Juice
3 - Orange Juice`)
break

default:
alert(`Sorry, something went wrong. Please refresh and try again`)
break
}

let age = prompt(`How old are you?`)

// Order confirmation
let orderConfirmation = ''
if (firstOrder === '1') {
if (secondOrder === '1') orderConfirmation = 'Café Latte Macciato'
else if (secondOrder === '2') orderConfirmation = 'Espresso'
else if (secondOrder === '3') orderConfirmation = 'Cappuccino'
} else if (firstOrder === '2') {
if (secondOrder === '1') orderConfirmation = 'Coke'
else if (secondOrder === '2') orderConfirmation = 'Fanta'
else if (secondOrder === '3') orderConfirmation = 'Sprite'
} else if (firstOrder === '3') {
if (secondOrder === '1') orderConfirmation = 'Apple Juice'
else if (secondOrder === '2') orderConfirmation = 'Tomato Juice'
else if (secondOrder === '3') orderConfirmation = 'Orange Juice'
}

// Ask for age of the user & send out confirmation of order
if (age <= 13) {
alert(`You like to order a small ${orderConfirmation}. Click 'ok' to confirm your order!`)
} else {
alert(`You like to order a big ${orderConfirmation}. Click 'ok' to confirm your order`)
}
alert(`Thank you for your order!`)