diff --git a/README.md b/README.md index 33c7e601..074f3402 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,36 @@ -# Project Name +# JavaScript Pizzeria -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. +The assignment was to make a pizza order flow by using the JavaScript methods alert() and prompt(). -## The problem +## 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”. -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? +### 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. -## View it live +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. + +### 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. -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 +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/ diff --git a/code/index.html b/code/index.html index f7844d6b..e3e8e95f 100644 --- a/code/index.html +++ b/code/index.html @@ -1,18 +1,20 @@ - - - - Javascript Pizzeria - - - - -

Javascript Pizzeria

-

Logic is executed automatically

- - + + + + + Javascript Pizzeria + + + + + +

Javascript Pizzeria

+

Logic is executed automatically

+ + + diff --git a/code/script.js b/code/script.js index 34ca0f34..55a39db3 100644 --- a/code/script.js +++ b/code/script.js @@ -1,19 +1,152 @@ // Start here // Step 1 - Welcome and introduction -// Your code goes here 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 -// Your code goes here +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!` + ) -// Step 3 - Subtype choice -// Your code goes here + //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 -// Your code goes here +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 -// Your code goes here +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!`); +} \ No newline at end of file diff --git a/code/style.css b/code/style.css index d384d122..404c659d 100644 --- a/code/style.css +++ b/code/style.css @@ -17,4 +17,4 @@ body { p { font-size: 1.5em; -} +} \ No newline at end of file diff --git a/code/switch.js b/code/switch.js new file mode 100644 index 00000000..c49a2521 --- /dev/null +++ b/code/switch.js @@ -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!`); +}