Technigo · zoe-lindqvist · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/README.md b/README.md
@@ -1,11 +1,37 @@
-# Project Name
+# Trattoria 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.
+An interactive JavaScript-based food ordering system where users select their name, food choices, and order details. The program is built using JavaScript's alert() and prompt() methods to interact with the user. Conditional statements and functions were used to handle different choices.
+
+The project consists of five steps:
+
+- Welcome and Introduction: Welcoming the user and collecting their name.
+
+- Food Choice: Letting the user select a food type (Pizza, Pasta, Salad).
+
+- Subtype Choice: Choosing a subtype based on the previous food choice.
+
+- Age Confirmation: Confirming whether the food is for an adult or a child.
+
+- Order Confirmation: Asking the user to confirm their order or decline.
 
 ## 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?
+The approach to the problem was structured into logical steps, focusing on user interaction through prompts and alerts. Each step progressively built on the previous one, guiding the user through a food ordering process.
+
+Planning:
+
+- Background Image: Preloaded to ensure smooth user experience.
+
+- Input Handling: Designed a reusable getValidSelection() function to validate user choices for food and subtypes.
+
+- Iterative Process: Built the order process step by step (welcome, food choice, subtype, age, confirmation).
+
+- Edge Case Handling: Added error handling for invalid inputs (e.g., non-numeric age, incorrect food options).
+
+Technologies:
+
+- JavaScript, HTML, CSS
 
 ## 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://trattoria-pizzeria.netlify.app/
diff --git a/code/index.html b/code/index.html
@@ -3,16 +3,23 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Javascript Pizzeria</title>
+    <title>Trattoria Pizzeria</title>
+    <link rel="preload" href="trattoria.jpg" as="image" />
     <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"
     />
+    <!-- Favicon Pizza Emoji -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml, <svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍕</text></svg>"
+    />
   </head>
   <body>
-    <h1>Javascript Pizzeria</h1>
-    <p>Logic is executed automatically</p>
+    <h1>- Welcome -</h1>
+    <p>Place your order</p>
+    <p><a href="#" id="start-order">here</a></p>
     <script src="./script.js"></script>
   </body>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -1,19 +1,160 @@
-// Start here
+// preloads the background img to avoid delays
+// URL of the background image
+const bgImageUrl = "trattoria.jpg";
 
-// Step 1 - Welcome and introduction
-// Your code goes here
-alert(
-  `Welcome to our Javascript Pizzeria. Ready to Start? - Click 'OK' to begin.`
-)
+// Create a new Image object to preload the image
+const img = new Image();
+img.src = bgImageUrl;
 
-// Step 2 - Food choice
-// Your code goes here
+// Wait for the background image to load
+img.onload = () => {
+  // Set the background image once it has been loaded
+  document.body.style.backgroundImage = `url(${bgImageUrl})`;
 
-// Step 3 - Subtype choice
-// Your code goes here
+  // Function to get valid user selection
+  // Two parameters (promptText: for questions), (options: for valid inputs)
+  const getValidSelection = (promptText, options) => {
+    // 1. Ask the user for input
+    const userSelection = prompt(promptText);
+    // 2. Check if input is valid
+    if (options.includes(userSelection)) {
+      // 3. Return input if valid
+      return userSelection;
+    } else {
+      alert("Invalid selection. Please choose a valid option.");
+      return getValidSelection(promptText, options); // Recursive call, ensures that the user keeps getting prompted until they provide a valid input
+    }
+  };
 
-// Step 4 - Age
-// Your code goes here
+  // Function to start the order process---------------------------------------
+  const startOrder = () => {
+    // Step 1 - Welcome and introduction
+    alert(
+      "Welcome to Trattoria Pizzeria. Ready to Start? - Click 'OK' to begin."
+    );
 
-// Step 5 - Order confirmation
-// Your code goes here
+    let userName;
+
+    // Keep prompting the user until a valid name is entered
+    while (!userName) {
+      userName = prompt("Please enter your name:");
+      if (!userName) {
+        alert("No name entered. Please enter your name to continue.");
+      }
+    }
+
+    alert(`Hi ${userName}, nice to meet you!`);
+
+    // Step 2 - Food choice
+    const foodOptions = ["1", "2", "3"];
+    const foodTypeOptions = {
+      1: "Pizza",
+      2: "Pasta",
+      3: "Salad",
+    };
+
+    const userSelection = getValidSelection(
+      `What type of food would you like to order?
+      Please select a number: 
+
+      1 - Pizza
+      2 - Pasta
+      3 - Salad`,
+      foodOptions
+    );
+
+    const foodType = foodTypeOptions[userSelection];
+
+    // Step 3 - Subtype choice
+    const subtypeOptions = {
+      Pizza: {
+        1: "Napolitana",
+        2: "Hawaiian",
+        3: "Pepperoni",
+      },
+      Pasta: {
+        1: "Carbonara",
+        2: "Vongole",
+        3: "Lasagna",
+      },
+      Salad: {
+        1: "Greek Salad",
+        2: "Insalata Russa",
+        3: "Giardiniera",
+      },
+    };
+
+    const subtypePrompt = {
+      Pizza: `Select a Pizza type
+      Enter a number: 
+
+      1 - Napolitana
+      2 - Hawaiian
+      3 - Pepperoni`,
+      Pasta: `Select a Pasta type
+      Enter a number:
+
+      1 - Carbonara
+      2 - Vongole
+      3 - Lasagna`,
+      Salad: `Select a Salad type
+      Enter a number: 
+
+      1 - Greek Salad
+      2 - Insalata Russa
+      3 - Giardiniera`,
+    };
+
+    const subtypeOptionsList = Object.keys(subtypeOptions[foodType]);
+
+    const subtypeSelection = getValidSelection(
+      subtypePrompt[foodType],
+      subtypeOptionsList
+    );
+
+    const subtype = subtypeOptions[foodType][subtypeSelection];
+
+    // Step 4 - Age
+    let age;
+    let cost;
+    let ageLabel;
+
+    while (true) {
+      age = parseInt(
+        //convert a string into an integer
+        prompt("Is this food for a child or an adult? Type your age:"),
+        10
+      );
+      //checks if a value is Not a Number (NaN)
+      if (isNaN(age)) {
+        alert("Invalid input. Please type a valid number.");
+      } else {
+        ageLabel = age >= 18 ? "adult" : "child"; //ternary operator, a shorthand way of writing an if-else
+        cost = age >= 18 ? "€15" : "€10";
+        break; // stops the loop from running further
+      }
+    }
+
+    // Step 5 - Confirm order details
+    const confirmation = confirm(
+      `You have ordered ${foodType} (${subtype}) for one ${ageLabel}. That will be ${cost}. Click "OK" to confirm or "Cancel" to modify.`
+    );
+
+    if (confirmation) {
+      alert("Thank you for your order! Your meal will be prepared.");
+    } else {
+      alert("Order cancelled. We hope to see you again!");
+    }
+  }; // closing startOrder function----------------------------------------
+
+  // Add event listener to start the order process when "here" is clicked
+  document.getElementById("start-order").addEventListener("click", (event) => {
+    event.preventDefault(); //the default action is stopped i.e promt
+    startOrder();
+  });
+};
+
+// Anonymous function handles errors if the image fails to load
+img.onerror = () => {
+  alert("Failed to load background image.");
+};
diff --git a/code/style.css b/code/style.css
@@ -5,16 +5,45 @@
 }
 
 body {
+  background-image: url("trattoria.jpg");
   font-family: "Montserrat", sans-serif;
-  background: #0026ff;
-  color: white;
+  color: rgb(236, 236, 236);
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   min-height: 100vh;
+  min-width: none;
+  background-color: rgb(24, 24, 24);
+  background-size: cover; /*Ensures the image covers the entire background;*/
+  background-attachment: fixed; /* Keeps the background fixed during scroll */
+  background-size: contain; /* Ensures the whole image is visible */
+  background-position: center; /* Centers the image */
+  background-repeat: repeat-x;
 }
 
 p {
-  font-size: 1.5em;
+  display: flex;
+  text-align: center;
+  font-size: 2em;
+}
+
+h1 {
+  display: flex;
+  font-weight: bold;
+  font-size: 3em;
+}
+
+/* Style for links */
+a {
+  color: white; /* Always white */
+
+  text-decoration: underline;
+  font-size: 1em; /* Default font size */
+  transition: font-size 0.3s ease, text-decoration 0.3s ease; /* Smooth transition */
+}
+
+a:hover {
+  font-size: 1.2em; /* Increase the font size on hover */
+  text-decoration: underline; /* Underline on hover */
 }
diff --git a/code/trattoria.jpg b/code/trattoria.jpg
diff --git a/instructions.md b/instructions.md
diff --git a/pull_request_template.md b/pull_request_template.md