Technigo · Maryyy-ux · Sep 8, 2024 · Sep 8, 2024 · Sep 8, 2024 · HIPPIEKICK
diff --git a/7172270-uhd_3840_2160_25fps.mp4 b/7172270-uhd_3840_2160_25fps.mp4
diff --git a/README.md b/README.md
@@ -1,11 +1,14 @@
 # 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 assignment was to create a site with JavaScript (my first approach to JavaScript on the boot camp) to include a bot on the page.  The main goal of the site is the introduction to JavaScript, not the layout. it's a basic site!
 
 ## 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?
+Although I am on my Software engineers first course so I don't have had JavaScript yet, I have had Java course as well as C+- language course (different but with variables, strings, arrays, etc) so I have a little background on this coding problems. 
+
+If I will have had a little more time I would like to create a properly layouted bot (in a box, with the colors and the images, etc) as well as a fully web page (with all the menus and options). 
 
 ## 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
+I have deployed the project on Netlify: https://66dde3fcd116e57b6d1fefd1--merry-gecko-a9c5af.netlify.app/
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Maria's Pizzeria</title>
+  <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>
+  <header>
+    <div class="logo">Maria's Pizza</div>
+    <nav class="nav-links" id="nav-links">
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Services</a></li>
+        <li><a href="#">About us</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </nav>
+    <div class="hamburger" id="hamburger">
+      &#9776; <!-- Icono de hamburguesa -->
+    </div>
+
+  </header>
+
+
+  <div class="video-container">
+    <video autoplay muted loop id="background-video">
+      <source src="7172270-uhd_3840_2160_25fps.mp4" type="video/mp4">
+    </video>
+    <div class="overlay-text">
+      <h1>Maria's Pizza</h1>
+      <p>Logic is executed automatically.</p>
+      <script src="./script.js"></script>
+      <link rel="<script src=" switch.js">
+      </script>
+    </div>
+  </div>
+
+
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,110 @@
+
+// Step 1 - Welcome and introduction
+alert(`Welcome to Maria's Pizza. Ready to Start? - Click 'OK' to begin.`);
+
+var userName = prompt("What's your name?");
+alert("Hi, " + userName + "!");
+
+// Step 2 - Food choice
+var foodChoice = prompt(
+  "Please select a food type by entering the corresponding number:\n1. Pizza\n2. Pasta\n3. Salad"
+);
+
+var foodType;
+
+if (foodChoice == "1") {
+  foodType = "Pizza";
+  alert("You have selected Pizza.");
+} else if (foodChoice == "2") {
+  foodType = "Pasta";
+  alert("You have selected Pasta.");
+} else if (foodChoice == "3") {
+  foodType = "Salad";
+  alert("You have selected Salad.");
+} else {
+  alert("Invalid choice. Please refresh and try again.");
+}
+
+// Step 3 - Subtype choice
+var subtypeChoice;
+var subtype;
+
+if (foodType == "Pizza") {
+  subtypeChoice = prompt(
+    "Please select a type of Pizza:\n1. Margherita\n2. Pepperoni\n3. Hawaiian"
+  );
+  if (subtypeChoice == "1") {
+    subtype = "Margherita Pizza";
+  } else if (subtypeChoice == "2") {
+    subtype = "Pepperoni Pizza";
+  } else if (subtypeChoice == "3") {
+    subtype = "Hawaiian Pizza";
+  } else {
+    alert("Invalid choice. Please refresh and try again.");
+  }
+} else if (foodType == "Pasta") {
+  subtypeChoice = prompt(
+    "Please select a type of Pasta:\n1. Spaghetti Bolognese\n2. Fettuccine Alfredo\n3. Penne Arrabiata"
+  );
+  if (subtypeChoice == "1") {
+    subtype = "Spaghetti Bolognese";
+  } else if (subtypeChoice == "2") {
+    subtype = "Fettuccine Alfredo";
+  } else if (subtypeChoice == "3") {
+    subtype = "Penne Arrabiata";
+  } else {
+    alert("Invalid choice. Please refresh and try again.");
+  }
+} else if (foodType == "Salad") {
+  subtypeChoice = prompt(
+    "Please select a type of Salad:\n1. Caesar Salad\n2. Greek Salad\n3. Garden Salad"
+  );
+  if (subtypeChoice == "1") {
+    subtype = "Caesar Salad";
+  } else if (subtypeChoice == "2") {
+    subtype = "Greek Salad";
+  } else if (subtypeChoice == "3") {
+    subtype = "Garden Salad";
+  } else {
+    alert("Invalid choice. Please refresh and try again.");
+  }
+}
+
+// Step 4 - Age
+var ageGroup = prompt(
+  "Is the meal intended for a child or an adult?\nPlease enter 'child' or 'adult'."
+);
+
+var cost;
+if (ageGroup.toLowerCase() == "child") {
+  cost = "$5.99";
+} else if (ageGroup.toLowerCase() == "adult") {
+  cost = "$9.99";
+} else {
+  alert("Invalid choice. Please refresh and try again.");
+}
+
+var orderMessage =
+  "You have ordered a " +
+  subtype +
+  " for a " +
+  ageGroup +
+  ". The total cost is " +
+  cost +
+  ".";
+alert(orderMessage);
+
+// Step 5 - Order confirmation
+var confirmation = prompt(
+  "Do you confirm your order? Please enter 'yes' or 'no'."
+);
+
+if (confirmation.toLowerCase() == "yes") {
+  alert("Thank you, " + userName + "! Your meal will be prepared shortly.");
+} else if (confirmation.toLowerCase() == "no") {
+  alert(
+    "We're sorry to hear that. Feel free to order anytime. Have a great day!"
+  );
+} else {
+  alert("Invalid response. Please refresh and try again.");
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,128 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Montserrat", sans-serif;
+  background: #0026ff;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+
+body,
+html {
+  height: 100%;
+  font-family: Arial, sans-serif;
+}
+
+header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  z-index: 10;
+}
+
+.logo {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.nav-links {
+  display: flex;
+}
+
+.nav-links ul {
+  list-style: none;
+  display: flex;
+  gap: 20px;
+}
+
+.nav-links a {
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+}
+
+.hamburger {
+  display: none;
+  font-size: 30px;
+  cursor: pointer;
+}
+
+
+@media (max-width: 768px) {
+  .nav-links {
+    position: absolute;
+    top: 80px;
+    right: 0;
+    width: 200px;
+    background-color: rgba(0, 0, 0, 0.8);
+    flex-direction: column;
+    display: none;
+  }
+
+  .nav-links ul {
+    flex-direction: column;
+    padding: 20px 0;
+  }
+
+  .nav-links a {
+    padding: 10px;
+    text-align: center;
+  }
+
+  .hamburger {
+    display: block;
+  }
+}
+
+
+.video-container {
+  position: relative;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+}
+
+#background-video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+}
+
+.overlay-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  color: white;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
+}
+
+.overlay-text h1 {
+  font-size: 4rem;
+  margin-bottom: 1rem;
+}
+
+.overlay-text p {
+  font-size: 1.5rem;
+}