JavaScript Pizzeria #136
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,36 @@ | ||
| # JavaScript Pizzeria | ||
|
|
||
| The assignment was to make a pizza order flow by using the JavaScript methods alert() and prompt(). | ||
|
|
||
| ## The Problem | ||
| The biggest problem I had with this assignment was that the whole site stops to function when there’s something broken in the code. CSS and HTML are more ”forgiving”. | ||
|
|
||
| ### Other minor "problems" | ||
| 1. I ”coded along” in CodePen to Amelies and Damiens instruction videos, and used the if else (https://codepen.io/joheri1/pen/RwzeYWa) that Damien showed on the tutorial. I wrote the below, and it didn’t work. | ||
|
|
||
| if (mealchoice === 1) { | ||
| alert(”Thanks, ${name}! You wish to order Pizza!”) | ||
| } | ||
|
|
||
| After a while, I figured it must be because I was using digits, not text. I tested”, ’ and ´ until I spotted that a backtick/grave/grave accent was used in the first alert that came with the fork. Changed all string/text values to that specific tick and just like that, the code worked. This also made me discover that everything between two quotation marks turns into text, while the ${name} still function when using the backtick. So I used ”” for the meal choices (since it has to be only text) and for the alert, I used ` since it has ${name} in it. | ||
|
|
||
| ### Old variable? | ||
| ${name} turned into a strikethrough text. When I hovered over it, it said ”'name' is deprecated.” Googled it, and read that the warning is being shown because the name variable may be removed in future versions. Not sure if it affects my code, but to avoid any issues I changed it to $userName and the strikethough disappeared. | ||
|
Contributor
There was a problem hiding this comment.
|
||
|
|
||
| ### Nesting | ||
| At one point when my code didn't work, it was because of a nesting problem. That I couldn't solve myself, because every time I saved the code, it moved to the left-hand side. Asked ChatGPT how to solve this and to fix the nesting issue for me without edit the code itself, and it did. It also asked me to uncheck "formatOnSave" under settings, and I did. | ||
|
|
||
| ## If I had more time | ||
| 1. Complete the stretch goals. I started with them on Friday afternoon, which was little bit too late. | ||
| 2. Focus more on clean code. I think my code is messy. I had to scroll, search, copy/paste and repeat myself a lot when writing the code. | ||
| Update: I started to do this in the switch.js file. | ||
|
|
||
| 3. would check if there's a way to avoid repeating different phrases (Like "`Thanks, ${userName}! You wish to order...") and parts of the code. I copy/pasted different sections of my code (like the Pizza else/if to the Pasta and Salad) and did minor changes. It must be an easier way to do this. | ||
| Update: I started to do this in the switch.js file. | ||
|
|
||
| 4. I would also like to get the "return" to function to stop the script and/or create a loop, so you don't have to start all over when you select a invalid option. | ||
|
|
||
| 5. Maybe add ingredients to the different dishes, that the orderer can deselect? Add more than one dish at the time, etc. | ||
|
|
||
| ## View it live | ||
| Netlify link: https://johannas-js-pizzeria.netlify.app/ | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,20 @@ | ||
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,152 @@ | ||
| // Start here | ||
|
|
||
| // Step 1 - Welcome and introduction | ||
| alert( | ||
| `Welcome to our Javascript Pizzeria. Ready to Start? - Click 'OK' to begin.` | ||
| ) | ||
|
|
||
| const userName = prompt( | ||
| `Hi hungry fellow! What's your name?` | ||
| ) | ||
|
|
||
| alert( | ||
| `Hello, ${userName}! Hit the button below whenever you are ready to order!` | ||
| ) | ||
|
|
||
| // Step 2 - Food choice | ||
| const mealChoice = prompt( | ||
| `What would you like to order? Please enter the number of your choice. | ||
|
|
||
| 1. Pizza | ||
| 2. Pasta | ||
| 3. Salad | ||
| ` | ||
| ) | ||
|
|
||
| let orderedFood = "" | ||
|
|
||
| // Pizza | ||
| if (mealChoice === "1") { | ||
| const pizzaChoice = prompt( | ||
| `Thanks, ${userName}! You wish to order Pizza! | ||
|
|
||
| What type of Pizza you like to order? Please enter the number of your choice. | ||
|
|
||
| 1. Capricciosa | ||
| 2. Hawaii | ||
| 3. Vesuvius | ||
| ` | ||
| ) | ||
| if (pizzaChoice === "1") { | ||
| orderedFood = "Capricciosa pizza" | ||
| } else if (pizzaChoice === "2") { | ||
| orderedFood = "Hawaii pizza" | ||
| } else if (pizzaChoice === "3") { | ||
| orderedFood = "Vesuvius pizza" | ||
| } else { | ||
| alert("Sorry, we don't have that kind of pizza.") | ||
| } | ||
| if (orderedFood) { | ||
| alert(`You've chosen ${orderedFood}`) | ||
| } | ||
| } else if (mealChoice === "2") { | ||
| alert( | ||
| `Thanks, ${userName}! You wish to order Pasta!` | ||
| ) | ||
|
|
||
| //Pasta | ||
| const pastaChoice = prompt( | ||
| `What type of Pasta you like to order ? Please enter the number of your choice. | ||
|
|
||
| 1. Spagetti Bolognese | ||
| 2. Pasta Carbonara | ||
| 3. Fettuccine Alfredo | ||
| ` | ||
| ) | ||
|
|
||
| if (pastaChoice === "1") { | ||
| orderedFood = "Spagetti Bolognese" | ||
| } else if (pastaChoice === "2") { | ||
| orderedFood = "Pasta Carbonara" | ||
| } else if (pastaChoice === "3") { | ||
| orderedFood = "Fettuccine Alfredo" | ||
| } else { | ||
| alert("Sorry, we don't have that kind of pasta.") | ||
| } | ||
| if (orderedFood) { | ||
| alert(`You've chosen ${orderedFood}`) | ||
| } | ||
|
|
||
| } else if (mealChoice === "3") { | ||
| alert( | ||
| `Thanks, ${userName}! You wish to order Salad!` | ||
| ) | ||
|
|
||
| //Salad | ||
| const saladChoice = prompt( | ||
| `What type of Salad you like to order ? Please enter the number of your choice. | ||
|
|
||
| 1. Pasta salad | ||
| 2. Noodle salad | ||
| 3. Ceaser salad | ||
| ` | ||
| ) | ||
|
|
||
| if (saladChoice === "1") { | ||
| orderedFood = "Pasta salad" | ||
| } else if (saladChoice === "2") { | ||
| orderedFood = "Noodle salad" | ||
| } else if (saladChoice === "3") { | ||
| orderedFood = "Ceaser salad" | ||
| } else { | ||
| alert("Sorry, we don't have that kind of salad.") | ||
| } | ||
| if (orderedFood) { | ||
| alert(`You've selected ${orderedFood}`) | ||
| } | ||
|
|
||
| } else { | ||
| alert( | ||
| `Sorry, ${userName}! That's not a valid choice!` | ||
| ) | ||
| } | ||
|
|
||
| // Step 4 - Age | ||
| const age = prompt ( | ||
| `Is this food for a child or an adult? Type your age:` | ||
| ) | ||
| let portion = "" | ||
| if (parseInt(age) >= 18) { | ||
| portion = "regular portion" | ||
| } | ||
| else { | ||
| portion = "kid's meal" | ||
| } | ||
|
|
||
| alert( | ||
| `You wish to order a ${portion}` | ||
| ) | ||
|
|
||
| // Step 5 - Order confirmation | ||
| const confirmation = prompt( | ||
| `Thank you, ${userName}, for your order of a ${portion} of ${orderedFood}! | ||
|
|
||
| Are you sure you want to order this? | ||
|
|
||
| 1. Yes | ||
| 2. No | ||
| ` | ||
| ) | ||
|
|
||
| if (confirmation === "1") { | ||
| alert(` | ||
| Thank you for your order, ${userName}! | ||
|
|
||
| Your ${orderedFood} (${portion}) will be prepared shortly. | ||
|
|
||
| We hope you enjoy your meal!`) | ||
| }else { | ||
| alert(`No worries, ${userName}. | ||
|
|
||
| Thank you for visiting our Javascript Pizzeria. We hope to serve you next time!`); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,4 +17,4 @@ body { | |
|
|
||
| p { | ||
| font-size: 1.5em; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| // Step 1 - Welcome and introduction | ||
| alert( | ||
| `Welcome to our Javascript Pizzeria. Ready to Start? - Click 'OK' to begin.` | ||
| ) | ||
|
|
||
| const userName = prompt( | ||
| `Hi hungry fellow! What's your name?` | ||
| ) | ||
|
|
||
| alert( | ||
| `Hello, ${userName}! Hit the button below whenever you are ready to order!` | ||
| ) | ||
|
|
||
| // Step 2 - Food choice | ||
| const EnterChoice = "Please enter the number of your choice." | ||
|
|
||
| const mealchoice = prompt( | ||
| `What would you like to order? Please enter the number of your choice.\n\n1. Pizza\n2. Pasta\n3. Salad` | ||
| ) | ||
|
|
||
| let orderedFood = "" | ||
|
|
||
| // Pizza | ||
|
|
||
| if (mealchoice === "1") { | ||
| const pizzachoice = prompt( | ||
| `What type of Pizza would you like to order? ${EnterChoice}.\n\n1. Capricciosa\n2. Hawaii\n3. Vesuvius` | ||
| ) | ||
|
|
||
| if (pizzachoice === "1") { | ||
| orderedFood = "Capricciosa pizza" | ||
| } else if (pizzachoice === "2") { | ||
| orderedFood = "Hawaii pizza" | ||
| } else if (pizzachoice === "3") { | ||
| orderedFood = "Vesuvius pizza" | ||
| } else { | ||
| alert("Sorry, that's not a valid pizza choice.") | ||
| //return // Stop the script here if an invalid pizza choice is made | ||
| } | ||
|
|
||
| // Pasta | ||
|
|
||
| } else if (mealchoice === "2") { | ||
| const pastachoice = prompt( | ||
| `What type of Pasta would you like to order? ${EnterChoice}\n\n1. Spaghetti Bolognese\n2. Pasta Carbonara\n3. Fettuccine Alfredo` | ||
| ) | ||
|
|
||
| if (pastachoice === "1") { | ||
| orderedFood = "Spaghetti Bolognese" | ||
| } else if (pastachoice === "2") { | ||
| orderedFood = "Pasta Carbonara" | ||
| } else if (pastachoice === "3") { | ||
| orderedFood = "Fettuccine Alfredo" | ||
| } else { | ||
| alert("Sorry, that's not a valid pasta choice.") | ||
| //return // Stop the script here if an invalid pasta choice is made | ||
| } | ||
|
|
||
| } else if (mealchoice === "3") { // Salad | ||
| const saladchoice = prompt( | ||
| `What type of Salad would you like to order? ${EnterChoice}\n\n1. Pasta salad\n2. Noodle salad\n3. Caesar salad` | ||
| ) | ||
|
|
||
| if (saladchoice === "1") { | ||
| orderedFood = "Pasta salad" | ||
| } else if (saladchoice === "2") { | ||
| orderedFood = "Noodle salad" | ||
| } else if (saladchoice === "3") { | ||
| orderedFood = "Caesar salad" | ||
| } else { | ||
| alert("Sorry, that's not a valid salad choice.") | ||
| //return // Stop the script here if an invalid salad choice is made | ||
| } | ||
|
|
||
| } else { | ||
| alert( | ||
| `Sorry, ${userName}! That's not a valid choice!` | ||
| ) | ||
| //return // Stop the script here if an invalid meal choice is made | ||
| } | ||
|
|
||
| // Confirm the selected food choice | ||
| if (orderedFood) { | ||
| alert(`Thanks ${userName}! You've chosen ${orderedFood}`) | ||
| } | ||
|
|
||
| // Step 4 - Age | ||
| const age = prompt ( | ||
| `Is this food for a child or an adult? Type your age:` | ||
| ) | ||
| let portion = "" | ||
| if (parseInt(age) >= 18) { | ||
| portion = "regular portion" | ||
| } else { | ||
| portion = "kid's meal" | ||
| } | ||
|
|
||
| alert( | ||
| `You wish to order a ${portion}` | ||
| ) | ||
|
|
||
| // Step 5 - Order confirmation | ||
| const confirmation = prompt( | ||
| `Thank you, ${userName}, for your order of a ${portion} of ${orderedFood}!\n\nAre you sure you want to order this?\n\n1. Yes\n2. No` | ||
| ) | ||
|
|
||
| if (confirmation === "1") { | ||
| alert(` | ||
| Thank you for your order, ${userName}! | ||
|
|
||
| Your ${orderedFood} (${portion}) will be prepared shortly. | ||
|
|
||
| We hope you enjoy your meal!`) | ||
| } else { | ||
| alert(`No worries, ${userName}. | ||
|
|
||
| Thank you for visiting our Javascript Pizzeria. We hope to serve you next time!`); | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
parseInt()💡