diff --git a/README.md b/README.md index 33c7e601..51475897 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,17 @@ # Project Name -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 project this week, and the first project in sprint 2, our task was to produce a Pizzeria bot, virtual online Pizzeria with the basic javascript that we studied during this week, using alerts and prompts. ## The problem -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? +I looked at Damiens video and used his example with the "alarm clock" as a basis. I had problems getting each step to work when I first tried using const instead of let and to move on to the next prompt or alert when making an incorrect input, such as choosing nr 4 instead of 1, 2, 3 which are the available options. + +Then I googled and got the response to use while loops. I tried that with some google help and Matildas instructions on the Thursday session and it worked out well. + +I have used let as variable and assigned empty strings as initial values to the variable. I have used while loops to check if the user's input is not one of the valid options by using === strict equality operator. I struggled with keeping my head straight with all the different meal choices, subtypes, portion sizes etc. + +If Í hade more time I would try to add more prompts and alerts such as more meal options and add a background image or hero, an order button and dig deeper into the JS basics and how to write less code but achieve the same. ## View it live -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 +https://mamamia-pizzeria.netlify.app/ \ No newline at end of file diff --git a/code/index.html b/code/index.html index f7844d6b..4bed4a94 100644 --- a/code/index.html +++ b/code/index.html @@ -3,7 +3,7 @@ - Javascript Pizzeria + Mama Mia Pizzeria -

Javascript Pizzeria

-

Logic is executed automatically

+

Mama Mia Pizzeria

+

Pizza, Pasta and Salads

diff --git a/code/script.js b/code/script.js index 34ca0f34..b6a7079e 100644 --- a/code/script.js +++ b/code/script.js @@ -1,19 +1,187 @@ -// Start here +// I have used while loops and let before const, so the variable can change in the loop. I have also assigned empty strings. The empty string is useful since it doesn’t imply any pre-selection or default choice, which means the code will rely entirely on user input, in this case the different meal choices. -// Step 1 - Welcome and introduction -// Your code goes here -alert( - `Welcome to our Javascript Pizzeria. Ready to Start? - Click 'OK' to begin.` -) +// A while loop is a control flow structure in programming that repeatedly executes a block of code as long as a given condition evaluates to true. The condition is checked before each iteration of the loop, and if the condition is false, the loop terminates. -// Step 2 - Food choice -// Your code goes here -// Step 3 - Subtype choice -// Your code goes here +alert(`Welcome to Mama Mia Pizzeria 🍕 Ready to order? - Click 'OK' to begin.`) -// Step 4 - Age -// Your code goes here +let userName = prompt(`What's your name?`) -// Step 5 - Order confirmation -// Your code goes here +if (!userName) { + userName = "anonymous" +} +alert(`Thank you for choosing our restaurant, ${userName.toUpperCase()}! We're here to make your experience memorable.`) + + +// Step 2 - What type of food + +// Added while loops to check if the user's input is not one of the valid options by using === ( strict equality operator) and with the loop keep prompting the user until he/she provide the valid input (one of the alternative meal choices or subtypes) + +let mealChoice = "" +while (!(mealChoice === "1" || mealChoice === "2" || mealChoice === "3")) { + mealChoice = prompt( + + `What would you like to order? Choose the dish number 1, 2 or 3 according to below: + + 1. Pizza + 2. Pasta + 3. Salad + ` + ) +// If none of the valid options (!) are chosen the alert below will show) + + if (!(mealChoice === "1" || mealChoice === "2" || mealChoice === "3")) { + alert(`I'm sorry ${userName}, that is not a valid option. Please choose number 1, 2 or 3.`) + } +} + +let selectedMeal = "" +let subType = "" + +if (mealChoice === "1") { + selectedMeal = "pizza" + alert(`Thank you ${userName}, you have chosen no 1, Pizza`) + + // Step 3 - Subtype choice for Pizza. // Added while loops to check if the user's input is not one of the valid options by using === (strict equality operator) + let pizzaType = "" + + while (!(pizzaType === "1" || pizzaType === "2" || pizzaType === "3")) { + pizzaType = prompt( + + `What kind of Pizza would you like? Choose between no 1, 2 or 3 according to below: + + 1. Capricciosa + 2. Hawaii + 3. Kebab + ` + ) + + if (pizzaType === "1") { + + subType = "Capricciosa" + alert(`You have chosen no 1, Capricciosa. Love your choice!`) + + } else if (pizzaType === "2") { + subType = "Hawaii" + alert(`You have chosen no 2, Hawaii. Aloha!`) + } else if (pizzaType === "3") { + subType = "Kebab" + alert(`You have chosen no 3, Kebab pizza. Great choice!`) + + } else { + + alert(`I'm sorry ${userName}, that is not a valid option. Please choose number 1, 2 or 3.`) + } + } + + +} else if (mealChoice === "2") { + selectedMeal = "pasta" + alert(`Thank you ${userName}, you have chosen no 2, Pasta`) + +// Step 3 - Subtype choice for Pasta. // Added while loops to check if the user's input is not one of the valid options by using === (equals) + + let pastaType = "" + + while (!(pastaType === "1" || pastaType === "2" || pastaType === "3")) { + + pastaType = prompt( + `What kind of pasta would you like? Choose between no 1, 2 or 3 according to below: + + 1. Bolognese + 2. Carbonara + 3. Lasagna + ` + ) + + if (pastaType === "1") + { + subType = 'Bolognese' + alert(`You have chosen no 1, Bolognese. Great choice!`) + + } else if (pastaType === "2") { + subType = 'Carbonara' + alert(`You have chosen no 2, Carbonara. Splendido!`) + } else if (pastaType === "3") { + subType = 'Lasagna' + alert(`You have chosen no 3, Lasagna. Delicious choice!`) + + } else { + alert(`I'm sorry ${userName}, that is not a valid option. Please choose number 1, 2 or 3.`) + } + } + +} else if (mealChoice === "3") { + selectedMeal = "salad" + + alert(`Thank you ${userName}, you have chosen no 3, Salad`) + + // Step 3 - Subtype choice for Salad + let saladType = "" + + while (!(saladType === "1" || saladType === "2" || saladType === "3")) { + + saladType = prompt( + + ` What kind of salad would you like? Choose between no 1, 2 or 3 according to below: + + 1. Caesar + 2. Greek + 3. Ham & cheese + ` + ) + + if (saladType === "1") { + subType = "Caesar" + + alert (`You have chosen no 1, Caesar salad. Fresh choice!`) + } else if (saladType === "2") { + subType = "Greek" + alert (`You have chosen no 2, Greek salad. Healthy choice!`) + } else if (saladType === "3") { + subType = "Ham & cheese" + alert (`You have chosen no 3, Ham & cheese salad. Great choice!`) + } else { + alert (`I'm sorry ${userName}, that is not a valid option. Please choose number 1, 2 or 3.`) + } + } +} + +// Step 4 - Portion size // Added while loops to check if the user's input is not one of the valid options by using === (equals) +let age = "" +let portionSize = "" + +while (!(age === "1" || age === "2")) { + age = prompt( + + `Is this order for an adult or child? Please choose corresponding number below. + + 1. Adult + 2. Child + ` + ) + + if (age === "1") { + portionSize = 'adult' + + alert(`You have chosen an adult portion.`) + } else if (age === "2") { + portionSize = 'child' + + alert(`You have chosen a child portion.`) + } else { + alert (`I'm sorry ${userName}, that is not a valid option. Please choose number 1 or 2.`) + } +} + +// Step 5 - Order confirmation I used confirmOrder.toLowercase to make sure that the user input is not case sensitive. In other words, they can write YES, yes or No, no and it will be valid. + +let confirmOrder = prompt (`Do you confirm the order of ${portionSize} portion, + ${subType} ${selectedMeal}? Confirm by writing Yes or No.`) + +if (confirmOrder.toLowerCase() === "yes") { + alert(`Thank you for your order, ${userName}! We will start preparing your meal and we hope you will enjoy the food!`) + +} else { + alert(`You have declined the order, ${userName}. Please come back again if you want to order another time!`) +} diff --git a/code/style.css b/code/style.css index d384d122..dae6842c 100644 --- a/code/style.css +++ b/code/style.css @@ -6,8 +6,10 @@ body { font-family: "Montserrat", sans-serif; - background: #0026ff; + background: linear-gradient(130deg, rgb(8, 163, 39) 55%, white, rgb(255, 0, 0)); color: white; + width: 100%; + height:64px; display: flex; justify-content: center; align-items: center; @@ -18,3 +20,4 @@ body { p { font-size: 1.5em; } + diff --git a/pull_request_template.md b/pull_request_template.md index e239e19f..46dbda47 100644 --- a/pull_request_template.md +++ b/pull_request_template.md @@ -1,6 +1,6 @@ ## Netlify link Add your Netlify link here like this (update with the correct one): -https://my-netlify-link.netlify.app +https://mamamia-pizzeria.netlify.app/ PS. Don't forget to add it in your readme as well.