diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..0647067d Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/README.md b/README.md index 33c7e601..bdf3dea6 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,13 @@ -# Project Name +# Bella Italia 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 task is to create a order functionality for a fictional pizzeria using JavaScript concepts like variables, conditionals and native methods. ## 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 started with the basic logic and tried to get that to work. After that was working I started looking into how I could improve my code. I wanted to make sure the prompt asked again when the user had an invalid option and also that it would stop executing the code if the user clicked "Cancel". + +I also did the stretch goals and did a version where I use 'switch' instead of if/else statements. ## 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 +[View it live here »](https://bellaitaliapizzeria.netlify.app/) diff --git a/code/.DS_Store b/code/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/code/.DS_Store differ diff --git a/code/favicon.png b/code/favicon.png new file mode 100644 index 00000000..28dfc58a Binary files /dev/null and b/code/favicon.png differ diff --git a/code/index.html b/code/index.html index f7844d6b..c792f661 100644 --- a/code/index.html +++ b/code/index.html @@ -3,7 +3,8 @@ - Javascript Pizzeria + Bella Italia Pizzeria + -

Javascript Pizzeria

-

Logic is executed automatically

- +

Bella Italia Pizzeria

+ + diff --git a/code/script.js b/code/script.js index 34ca0f34..8ca9f75e 100644 --- a/code/script.js +++ b/code/script.js @@ -1,19 +1,177 @@ -// Start here +const startOrder = () => { + // Step 1 - Welcome and introduction + alert(`Benvenuto! Welcome! +Click the button below to begin your order.`); -// Step 1 - Welcome and introduction -// Your code goes here -alert( - `Welcome to our Javascript Pizzeria. Ready to Start? - Click 'OK' to begin.` -) + // Step 2 – Ask the user for their name + let userName = prompt("What is your name?"); -// Step 2 - Food choice -// Your code goes here + // If no name is provided (= the user clicks Cancel), assign Anonynous + if (!userName) { + userName = "Anonymous"; + } -// Step 3 - Subtype choice -// Your code goes here + // Step 3 – Welcome with their name + Ask for the type of food they want to order + // Using Do...while statement to prompt again if invalid value is entered + let foodType = ""; + do { + let foodInput = prompt(` +Ciao ${userName} 👋 +What would you like to eat today? -// Step 4 - Age -// Your code goes here +Enter a number: + 1 – Pizza 🍕 + 2 – Pasta 🍝 + 3 – Salad 🥗 +`); -// Step 5 - Order confirmation -// Your code goes here + // If user clicks cancel abort the order process + if (foodInput === null) { + alert("You cancelled the order. Goodbye!"); + return; + } + + // Parse the user's input + foodType = parseInt(foodInput); + + // Assign the appropriate food type based on the user's input + if (foodType === 1) { + foodType = "Pizza"; + } else if (foodType === 2) { + foodType = "Pasta"; + } else if (foodType === 3) { + foodType = "Salad"; + } else { + // Alert the user if an invalid selection was made + foodType = null; + alert( + "Sorry, that's not on the menu today. Please type 1, 2 or 3 to make your selection." + ); + } + } while (foodType === null); // Keep asking until a valid option is chosen + + // Step 4 - Ask for the specific type of food within the chosen category + let subFoodTypes = ""; + let subFoodSelection = ""; + + // Set the sub-food options based on the selected food type + if (foodType === "Pizza") { + subFoodTypes = `Enter a number: + 1 – Margaritha + 2 – Capricciosa + 3 – Hawaii`; + } else if (foodType === "Pasta") { + subFoodTypes = `Enter a number: + 1 – Carbonara + 2 – Vongole + 3 – Lasagna`; + } else if (foodType === "Salad") { + subFoodTypes = `Enter a number: + 1 – Caprese + 2 – Insalata Russa + 3 – Giardiniera`; + } else { + subFoodTypes = null; + } + + // Use another do...while loop to get valid input for sub-food selection + do { + let subFoodInput = prompt(` +${foodType}, what an excellent choice! +What type would you like? + +${subFoodTypes} + `); + + // If user clicks cancel abort the order process + if (subFoodInput === null) { + alert("You cancelled the order. Goodbye!"); + return; + } + + // Parse the user's input + subFoodSelection = parseInt(subFoodInput); + + // Assign the sub-food based on user's input + if (foodType === "Pizza") { + if (subFoodSelection === 1) { + subFoodSelection = "Margaritha"; + } else if (subFoodSelection === 2) { + subFoodSelection = "Capricciosa"; + } else if (subFoodSelection === 3) { + subFoodSelection = "Hawaii"; + } else { + subFoodSelection = null; + } + } else if (foodType === "Pasta") { + if (subFoodSelection === 1) { + subFoodSelection = "Carbonara"; + } else if (subFoodSelection === 2) { + subFoodSelection = "Spaghetti Alle Vongole"; + } else if (subFoodSelection === 3) { + subFoodSelection = "Lasagne"; + } else { + subFoodSelection = null; + } + } else if (foodType === "Salad") { + if (subFoodSelection === 1) { + subFoodSelection = "Caprese"; + } else if (subFoodSelection === 2) { + subFoodSelection = "Insalata Russa"; + } else if (subFoodSelection === 3) { + subFoodSelection = "Giardiniera"; + } else { + subFoodSelection = null; + } + } + + // Alert the user if they make an invalid sub-food selection + if (subFoodSelection === null) { + alert( + "We're all out of that for today I'm afraid. Please type 1, 2 or 3 to make your selection." + ); + } + } while (subFoodSelection === null); // Keep asking until a valid selection is made + + // Step 5 - Ask for the user's age to determine the portion size + let pizzaSize = prompt( + `Is the pizza for an adult or a child? + +Please enter your age.` + ); + + // Step 6 - Confirm the order details and ask for confirmation + let orderConfirmation = ""; + + do { + if (Number(pizzaSize) >= 12) { + // Confirm adult-sized order if age is higher than 12 + orderConfirmation = prompt(`Fantastico ${userName}! +Please confirm your order: +A delicious ${subFoodSelection} ${foodType} in adult size. + +To confirm your order, type 'Yes'. +To decline, type anything else. + `); + } else if (Number(pizzaSize) < 12) { + // Confirm child-sized order if age is lower than 12 + orderConfirmation = prompt(`Bellissimo ${userName}! +Please confirm your order: +A perfectly crafted ${subFoodSelection} ${foodType} in child size. + +To confirm your order, type 'Yes'. +To decline, type anything else. + `); + } else { + // Prompt again if age input is invalid + pizzaSize = null; + } + } while (pizzaSize === null); // Keep asking until valid input is given + + // Step 7 - Final message based on confirmation + if (orderConfirmation.toLowerCase() === "yes") { + alert(`Splendido ${userName}! Your order is on it's way.`); + } else { + alert("No worries, hope too see you soon again. Arrivederci!"); + } +}; diff --git a/code/style.css b/code/style.css index d384d122..97e74ecb 100644 --- a/code/style.css +++ b/code/style.css @@ -6,15 +6,38 @@ body { font-family: "Montserrat", sans-serif; - background: #0026ff; - color: white; + background: linear-gradient( + to left, + #ce2b37 0%, + #ce2b37 33.33333333333333%, + #f1f2f1 33.33333333333333%, + #f1f2f1 66.66666666666666%, + #009246 66.66666666666666%, + #009246 99.99999999999999% + ); + color: black; display: flex; justify-content: center; align-items: center; flex-direction: column; - min-height: 100vh; + min-height: 100svh; } -p { - font-size: 1.5em; -} +button { + all: unset; + cursor: pointer; + color: white; + background-color: black; + font-weight: 500; + padding: 1rem 2rem; + margin-top: 1.5rem; + position: relative; + top: 0; + transition: 0.25s ease; + transition-property: background, top; + + &:hover { + background-color: rgba(0,0,0,0.85); + top: -3px; + } +} \ No newline at end of file diff --git a/code/switch.js b/code/switch.js new file mode 100644 index 00000000..6ae08694 --- /dev/null +++ b/code/switch.js @@ -0,0 +1,203 @@ +const startOrder = () => { + // Step 1 - Welcome and introduction + alert(`Benvenuto! Welcome! +Click the button below to begin your order.`); + + // Step 2 – Ask the user for their name + let userName = prompt("What is your name?"); + + // If no name is provided (= the user clicks Cancel), assign Anonynous + if (!userName) { + userName = "Anonymous"; + } + + // Step 3 – Welcome with their name + Ask for the type of food they want to order + // Using Do...while statement to prompt again if invalid value is entered + let foodType = ""; + do { + let foodInput = prompt(` +Ciao ${userName} 👋 +What would you like to eat today? + +Enter a number: + 1 – Pizza 🍕 + 2 – Pasta 🍝 + 3 – Salad 🥗 +`); + + // If user clicks cancel abort the order process + if (foodInput === null) { + alert("You cancelled the order. Goodbye!"); + return; + } + + // Parse the user's input + foodType = Number(foodInput); + + // Assign the appropriate food type based on the user's input + switch (foodType) { + case 1: + foodType = "Pizza"; + break; + case 2: + foodType = "Pasta"; + break; + case 3: + foodType = "Salad"; + break; + default: + foodType = null; + alert( + "Sorry, that's not on the menu today. Please type 1, 2 or 3 to make your selection." + ); + } + } while (foodType === null); // Keep asking until a valid option is chosen + + // Step 4 - Ask for the specific type of food within the chosen category + let subFoodTypes = ""; + let subFoodSelection = ""; + + // Set the sub-food options based on the selected food type + switch (foodType) { + case "Pizza": + subFoodTypes = `Enter a number: + 1 – Margaritha + 2 – Capricciosa + 3 – Hawaii`; + break; + + case "Pasta": + subFoodTypes = `Enter a number: + 1 – Carbonara + 2 – Vongole + 3 – Lasagna`; + break; + + case "Salad": + subFoodTypes = `Enter a number: + 1 – Caprese + 2 – Insalata Russa + 3 – Giardiniera`; + break; + + default: + subFoodTypes = null; + } + + // Use another do...while loop to get valid input for sub-food selection + do { + let subFoodInput = prompt(` +${foodType}, what an excellent choice! +What type would you like? + +${subFoodTypes} +`); + + // If user clicks cancel abort the order process + if (subFoodInput === null) { + alert("You cancelled the order. Goodbye!"); + return; + } + + // Parse the user's input + subFoodSelection = Number(subFoodInput); + + // Assign the sub-food based on user's input + switch (foodType) { + case "Pizza": + switch (subFoodSelection) { + case 1: + subFoodSelection = "Margaritha"; + break; + case 2: + subFoodSelection = "Capricciosa"; + break; + case 3: + subFoodSelection = "Hawaii"; + break; + default: + subFoodSelection = null; + } + break; + case "Pasta": + switch (subFoodSelection) { + case 1: + subFoodSelection = "Carbonara"; + break; + case 2: + subFoodSelection = "Spaghetti Alle Vongole"; + break; + case 3: + subFoodSelection = "Lasagne"; + break; + default: + subFoodSelection = null; + } + break; + case "Salad": + switch (subFoodSelection) { + case 1: + subFoodSelection = "Caprese"; + break; + case 2: + subFoodSelection = "Insalata Russa"; + break; + case 3: + subFoodSelection = "Giardiniera"; + break; + default: + subFoodSelection = null; + } + break; + } + + // Alert the user if they make an invalid sub-food selection + if (subFoodSelection === null) { + alert( + "We're all out of that for today I'm afraid. Please type 1, 2 or 3 to make your selection." + ); + } + } while (subFoodSelection === null); // Keep asking until a valid selection is made + + // Step 5 - Ask for the user's age to determine the portion size + let pizzaSize = prompt( + `Is the pizza for an adult or a child? + +Please enter your age.` + ); + + // Step 6 - Confirm the order details and ask for confirmation + let orderConfirmation = ""; + + do { + if (Number(pizzaSize) >= 12) { + // Confirm adult-sized order if age is equal or higher than 12 + orderConfirmation = prompt(`Fantastico ${userName}! +Please confirm your order: +A delicious ${subFoodSelection} ${foodType} in adult size. + +To confirm your order, type 'Yes'. +To decline, type anything else. + `); + } else if (Number(pizzaSize) < 12) { + // Confirm child-sized order if age is lower than 12 + orderConfirmation = prompt(`Bellissimo ${userName}! +Please confirm your order: +A perfectly crafted ${subFoodSelection} ${foodType} in child size. + +To confirm your order, type 'Yes'. +To decline, type anything else. + `); + } else { + // Prompt again if age input is invalid + pizzaSize = null; + } + } while (pizzaSize === null); // Keep asking until valid input is given + + // Step 7 - Final message based on confirmation + if (orderConfirmation.toLowerCase() === "yes") { + alert(`Splendido ${userName}! Your order is on it's way.`); + } else { + alert("No worries, hope too see you soon again. Arrivederci!"); + } +}; diff --git a/instructions.md b/instructions.md index c5f8ebe6..59705153 100644 --- a/instructions.md +++ b/instructions.md @@ -79,4 +79,3 @@ We recommend creating an extra `script.js` file under the name `switch.js` to ha - **Test and validate:** Thoroughly test your refactored code with various inputs to ensure that it behaves as expected and produces the correct outputs. Refactoring the code using a switch case approach not only showcases your coding versatility but also contributes to writing cleaner and more efficient code. It's a valuable skill that can lead to more readable and maintainable programs in the long run. - diff --git a/pull_request_template.md b/pull_request_template.md deleted file mode 100644 index e239e19f..00000000 --- a/pull_request_template.md +++ /dev/null @@ -1,6 +0,0 @@ -## Netlify link -Add your Netlify link here like this (update with the correct one): - -https://my-netlify-link.netlify.app - -PS. Don't forget to add it in your readme as well.