Technigo · jacquelinekellyhunt · Sep 3, 2024 · Sep 3, 2024 · Sep 3, 2024 · HIPPIEKICK
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
 # 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.
+This project is a small introduction to a JavaScript language. This Pizzeria Ordering System is an interactive web-based application that guides "clients" through customising their food order. It prompts users to input their name, choose between pizza, pasta, or salad, and select specific dish types like Margherita or Caesar Salad. The system also requests the user's age to determine whether to prepare a child-sized or adult-sized portion, then asks for final order confirmation using "Yes" or "No." The project demonstrates basic JavaScript functions, input handling, and conditional logic.
 
 ## 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?
+To implement the system, I used vanilla JavaScript, focusing on the use of prompt() and alert() for user interaction. The logic was built using functions and conditional statements (such as if/else) to control the flow based on user inputs. I structured the project around functions to modularise different tasks like selecting food type and confirming the order, ensuring the program remained organised and easy to follow (which was A struggle).
+If I had more time, I would enhance the project by adding error handling for invalid inputs, refining the UI to replace the basic prompt() and alert() boxes with more visually appealing forms, and perhaps implementing a responsive design using HTML and 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://pizzzabot.netlify.app
diff --git a/code/Screenshot 2024-09-03 at 11.17.59.png b/code/Screenshot 2024-09-03 at 11.17.59.png
diff --git a/code/index.html b/code/index.html
@@ -11,8 +11,11 @@
     />
   </head>
   <body>
-    <h1>Javascript Pizzeria</h1>
-    <p>Logic is executed automatically</p>
-    <script src="./script.js"></script>
+    <div class="header">
+      <h1>Javascript Pizzeria</h1>
+      <p>Logic is executed automatically</p>
+    </div>
+      <img src="Screenshot 2024-09-03 at 11.17.59.png" alt="PizzaBot" width="400">
   </body>
+  <script src="./script.js"></script>
 </html>
diff --git a/code/script.js b/code/script.js
@@ -1,19 +1,131 @@
-// Start here
-
 // Step 1 - Welcome and introduction
-// Your code goes here
-alert(
-  `Welcome to our Javascript Pizzeria. Ready to Start? - Click 'OK' to begin.`
-)
+alert("Welcome to our Javascript Pizzeria. Ready to Start? - Click 'OK' to begin.");
+
+// Ask for the user's name and store the answer in a variable
+const userName = prompt("Please insert your name for the Pizzeria to remember your order :)");
+
+// Greet the user with their name
+alert("Hi, " + userName + "! Thanks for taking an order from our Javascript Pizzeria.");
+
+// Declare variables for foodType and chosenSubtype globally
+
+
+// Step 2 - activating the choosingFood function
+choosingFood();
+
+// Function to ask for food type
+function QuestionFoodtype() {
+  const foodChoice = prompt("Please let us know which type of dish you would like to order. Please write a number:\n1 - Pizza\n2 - Pasta \n3 - Salad");
+  return parseInt(foodChoice);
+}
+
+//for the function to loop properly I have built 2 separate functions - one for the question, where the client orders the number from the menu and - second for the process of the answers, whether the client has inserted a correct menu number or not - thus looping the function
+function choosingFood() {
+  foodType = QuestionFoodtype();
+
+  if (foodType === 1) {
+    foodTypeName = "Pizza";
+    alert("Great, thank you! You've chosen a Pizza!");
+  } 
+  else if (foodType === 2) {
+    foodTypeName = "Pasta";
+    alert("Great, thank you! You've chosen a Pasta!");
+  } 
+  else if (foodType === 3) {
+    foodTypeName = "Salad";
+    alert("Great, thank you! You've chosen a Salad!");
+  } 
+  else {
+    alert("Unfortunately, we don't have that type of dish, please try again!");
+    choosingFood();
+    return;
+  }
+
+  QuestionSubFoodType(foodType);
+}
+
+//at this point of process, we know what type of menu item the client has chosen
+//Step 3 - now asking the type of dish
+function QuestionSubFoodType(foodType) {
+  let subtype;
+
+  if (foodType === 1) {
+    subtype = prompt("What type of pizza would you like?\n1 - Margharita\n2 - Pepperoni\n3 - Hawaiian");
+  } 
+  else if (foodType === 2) {
+    subtype = prompt("What type of pasta would you like?\n1 - Bolognese\n2 - Crema di pollo\n3 - Pesto");
+  } 
+  else if (foodType === 3) {
+    subtype = prompt("What type of salad would you like?\n1 - Caesar\n2 - Greek\n3 - Mozzarella");
+  } 
+
+  //from this point, we now know everything the client has chosen from the menu - the food dish and the type of dish
+  if (foodType === 1) {
+    if (subtype === "1") {
+      chosenSubtype = "Margharita";
+    } 
+    else if (subtype === "2") {
+      chosenSubtype = "Pepperoni";
+    } 
+    else if (subtype === "3") {
+      chosenSubtype = "Hawaiian";
+    } 
+    else {
+      alert("Unfortunately, we do not have that item on the menu, try again.");
+      QuestionSubFoodType(foodType);
+      return;
+    }
+  } 
+  else if (foodType === 2) {
+    if (subtype === "1") {
+      chosenSubtype = "Bolognese";
+    } 
+    else if (subtype === "2") {
+      chosenSubtype = "Crema di pollo";
+    } 
+    else if (subtype === "3") {
+      chosenSubtype = "Pesto";
+    } 
+    else {
+      alert("Unfortunately, we do not have that item on the menu, try again.");
+      QuestionSubFoodType(foodType);
+      return;
+    }
+  } 
+  else if (foodType === 3) {
+    if (subtype === "1") {
+      chosenSubtype = "Caesar";
+    } 
+    else if (subtype === "2") {
+      chosenSubtype = "Greek";
+    } 
+    else if (subtype === "3") {
+      chosenSubtype = "Mozzarella";
+    } 
+    else {
+      alert("Unfortunately, we do not have that item on the menu, try again.");
+      QuestionSubFoodType(foodType);
+      return;
+    }
+  }
+
+  alert("You have chosen " + chosenSubtype + ". Thank you, " + userName + "!");
+}
 
-// Step 2 - Food choice
-// Your code goes here
+//Now I have gotten to a point of where the client has made fully their order - final alert with the suborder and name
+//Step 4 - now asking the client's age
 
-// Step 3 - Subtype choice
-// Your code goes here
+let age = parseInt(prompt("Can you also tell us your age in numbers, so we know whether we can prepare the order for an adult or a child?"));
 
-// Step 4 - Age
-// Your code goes here
+if (age <= 18) {
+  confirmation = prompt("Thank you for the info! One child-size, " + foodTypeName + " " + chosenSubtype + " coming right up. That'll be €10. Are you sure you want to order this? \nPlease confirm: \nyes \nno");
+} else {
+  confirmation = prompt("Thank you for the info! One adult-size, " + foodTypeName + " " + chosenSubtype + " coming right up. That'll be €15. Are you sure you want to order this? \nPlease confirm: \nYes \nNo");
+}
 
-// Step 5 - Order confirmation
-// Your code goes here
+//Step 5 - the last stretch with the confirmation code
+if (confirmation.toLowerCase() === "yes") {
+  alert("Thank you for your order, my friend! That will take around 10 minutes.");
+} else if (confirmation.toLowerCase() === "no") {
+  alert("Alrighty! See you next time!");
+}
diff --git a/code/style.css b/code/style.css
@@ -6,7 +6,7 @@
 
 body {
   font-family: "Montserrat", sans-serif;
-  background: #0026ff;
+  background: #221213;
   color: white;
   display: flex;
   justify-content: center;
@@ -15,6 +15,21 @@ body {
   min-height: 100vh;
 }
 
+.header {
+  text-align: center;
+  margin-top: 200px;
+}
+
+.header h1 {
+  margin: 0;
+  font-size: 2.5em; 
+}
+
+.header p {
+  margin: 0;
+  font-size: 1.2em; 
+}
+
 p {
   font-size: 1.5em;
 }