diff --git a/7172270-uhd_3840_2160_25fps.mp4 b/7172270-uhd_3840_2160_25fps.mp4 new file mode 100644 index 00000000..51eb2477 Binary files /dev/null and b/7172270-uhd_3840_2160_25fps.mp4 differ diff --git a/README.md b/README.md index 33c7e601..0bc77132 100644 --- 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 new file mode 100644 index 00000000..faf958b5 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + + Maria's Pizzeria + + + + + + + + +
+ + +
+ ☰ +
+ +
+ + +
+ +
+

Maria's Pizza

+

Logic is executed automatically.

+ + + +
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 00000000..09e8429b --- /dev/null +++ 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 new file mode 100644 index 00000000..4d038b98 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/switch.js b/switch.js new file mode 100644 index 00000000..694a86ac --- /dev/null +++ b/switch.js @@ -0,0 +1,147 @@ +// Step 1 - Welcome and introduction +alert("Welcome to our JavaScript Pizzeria!"); + +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; + +switch (foodChoice) { + case "1": + foodType = "Pizza"; + alert("You have selected Pizza."); + break; + case "2": + foodType = "Pasta"; + alert("You have selected Pasta."); + break; + case "3": + foodType = "Salad"; + alert("You have selected Salad."); + break; + default: + alert("Invalid choice. Please refresh and try again."); + break; +} + +// Step 3 - Subtype choice +var subtypeChoice; +var subtype; + +switch (foodType) { + case "Pizza": + subtypeChoice = prompt( + "Please select a type of Pizza:\n1. Margherita\n2. Pepperoni\n3. Hawaiian" + ); + switch (subtypeChoice) { + case "1": + subtype = "Margherita Pizza"; + break; + case "2": + subtype = "Pepperoni Pizza"; + break; + case "3": + subtype = "Hawaiian Pizza"; + break; + default: + alert("Invalid choice. Please refresh and try again."); + break; + } + break; + + case "Pasta": + subtypeChoice = prompt( + "Please select a type of Pasta:\n1. Spaghetti Bolognese\n2. Fettuccine Alfredo\n3. Penne Arrabiata" + ); + switch (subtypeChoice) { + case "1": + subtype = "Spaghetti Bolognese"; + break; + case "2": + subtype = "Fettuccine Alfredo"; + break; + case "3": + subtype = "Penne Arrabiata"; + break; + default: + alert("Invalid choice. Please refresh and try again."); + break; + } + break; + + case "Salad": + subtypeChoice = prompt( + "Please select a type of Salad:\n1. Caesar Salad\n2. Greek Salad\n3. Garden Salad" + ); + switch (subtypeChoice) { + case "1": + subtype = "Caesar Salad"; + break; + case "2": + subtype = "Greek Salad"; + break; + case "3": + subtype = "Garden Salad"; + break; + default: + alert("Invalid choice. Please refresh and try again."); + break; + } + break; + + default: + alert("Invalid food type. Please refresh and try again."); + break; +} + +// Step 4 - Age +var ageGroup = prompt( + "Is the meal intended for a child or an adult?\nPlease enter 'child' or 'adult'." +); + +var cost; +switch (ageGroup.toLowerCase()) { + case "child": + cost = "$5.99"; + break; + case "adult": + cost = "$9.99"; + break; + default: + alert("Invalid choice. Please refresh and try again."); + break; +} + +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'." +); + +switch (confirmation.toLowerCase()) { + case "yes": + alert("Thank you, " + userName + "! Your meal will be prepared shortly."); + break; + case "no": + alert( + "We're sorry to hear that. Feel free to order anytime. Have a great day!" + ); + break; + default: + alert("Invalid response. Please refresh and try again."); + break; +}