Technigo · HeleneWestrin · Sep 2, 2024 · Sep 2, 2024 · Sep 2, 2024 · Sep 2, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git 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
diff --git a/code/favicon.png b/code/favicon.png
diff --git a/code/index.html b/code/index.html
@@ -3,16 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Javascript Pizzeria</title>
+    <title>Bella Italia Pizzeria</title>
+    <link rel="icon" href="./favicon.png" />
     <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>
+    <h1>Bella Italia Pizzeria</h1>
+    <button onclick="startOrder()">Place your order</button>
+    <script src="./switch.js"></script>
   </body>
 </html>
diff --git 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
@@ -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;
+  }
+}