added jquery.html page

added jquery.html page with jquery intercation as well as navigation to the page
Miami-University-ETBD · Nov 11, 2024 · fc20468 · fc20468
1 parent e98e306
commit fc20468
Show file tree

Hide file tree

Showing 9 changed files with 126 additions and 95 deletions.
diff --git a/Elise---Malles.code-workspace b/Elise---Malles.code-workspace
diff --git a/Elise-Malles.code-workspace b/Elise-Malles.code-workspace
diff --git a/about.html b/about.html
@@ -16,6 +16,7 @@ <h1>Elise’s Pumpkin Loaf Bakery</h1>
                 <a href="index.html">Bakery Home</a>
                 <a href="about.html">Conract Information and Social Medias</a>
                 <a href="sisterlocation.html">Information about Expanding Location</a>
+                <a href="jquery.html">JQuery</a>
                 <link rel="stylesheet"
                 <a href=materialize.html>Link to materialize page</a>
                     href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

diff --git a/about.html b/about.html
diff --git a/index.html b/index.html
@@ -14,6 +14,7 @@
         <a href="index.html">Bakery Home</a>
         <a href="about.html">Contact Information and Social Media</a>
         <a href="sisterlocation.html">Information about Expanding Location</a>
+        <a href="jquery.html">JQuery</a>
         <ul>
             <li><a href="materialize.html">Expanding Location</a></li>
             <li><a href="materialize2.html">Expanding Location</a></li>

diff --git a/jquery.html b/jquery.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Elise's Pumpkin Loaf Bakery</title>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+
+    <!-- Link to Custom Styles (styles.css) -->
+    <link rel="stylesheet" href="styles.css">
+
+    <!-- jQuery Library -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
+    <!-- jQuery Script to Handle Interaction -->
+    <script>
+        $(document).ready(function(){
+            // Hide paragraph when clicked
+            $("p").click(function(){
+                $(this).hide();
+            });
+
+            // Add text before and after images
+            $("img").before(function(){
+                return "<p>Freshly baked and ready to enjoy!</p>";
+            });
+
+            $("img").after(function(){
+                return "<p>Delicious " + $(this).attr('alt') + " - Come try it today!</p>";
+            });
+
+            // Slide down panel when #flip is clicked
+            $("#flip").click(function(){
+                $("#panel").slideDown("slow");
+            });
+        });
+    </script>
+
+    <!-- Style for the Panel and Flip Interaction -->
+    <style>
+        #panel, #flip {
+            padding: 5px;
+            text-align: center;
+            background-color: #e5eecc;
+            border: solid 1px #c3c3c3;
+        }
+
+        #panel {
+            padding: 50px;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <!-- Header of the website -->
+    <header>
+        <h1>Welcome to Elise's Pumpkin Loaf Bakery</h1>
+        <div class="navbar">
+            <a href="index.html">Bakery Home</a>
+            <a href="sisterlocation.html">Recipe Cards</a>
+            <a href="about.html">Celebrity Favorites</a>
+            <a href="materialize.html">Materialize</a>
+            <a href="materialize2.html">Materialize</a>
+            <a href="jquery.html">JQuery</a>
+        </div>
+    </header>
+
+    <div class="container">
+        <h1>Welcome to Pumpkin Loaf Bakery</h1>
+
+        <!-- Specialty Pumpkin Loaves Menu Section -->
+        <h2>Pumpkin Loaves (Our Specialty Menu)</h2>
+
+        <!-- Table for Pumpkin Loaves -->
+        <table>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Description</th>
+                    <th>Price</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Nutmeg Pumpkin Loaf</td>
+                    <td>Our classic loaf with a nutty twist, good for all you nuts out there! (contains: nuts, do not consume if you are allergic to nuts)</td>
+                    <td>$5.95</td>
+                </tr>
+                <tr>
+                    <td>Vanilla Glazed Loaf</td>
+                    <td>If the classic loaf isn't sweet enough for you, try our classic loaf drizzled with vanilla bean sweet glaze.</td>
+                    <td>$4.95</td>
+                </tr>
+                <tr>
+                    <td>Cinnamon Snap Loaf</td>
+                    <td>Classic loaf with a warm cinnamon blend and slight notes of peppermint.</td>
+                    <td>$6.95</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <div class="image-gallery">
+            <img src="images/cinnamonpumpkinloaf.jpeg" alt="Cinnamon Loaf">
+            <img src="images/nutpumpkinloaf.jpeg" alt="Nut Pumpkin Loaf">
+            <img src="images/pumpkinloafclassic.jpeg" alt="Classic Pumpkin Loaf">
+            <img src="images/vaniallglazedpumpkinloaf.jpeg" alt="Vanilla Glazed Pumpkin Loaf">
+        </div>
+
+        <div id="flip">Click to slide down panel</div>
+        <div id="panel">
+            <p>We are a small, locally run and operated business on the corner of High Street and S Poplar Street in the
+            historic downtown of Oxford, Ohio. We believe that customers should be able to taste the heart, soul, and
+            passion put into each of our products, which is why we make everything in-house but our heavily renowned
+            pastry chefs. We can pridefully say all of our ingredients come from the local Oxford area, because we are
+            committed to supporting a greater cause and giving back to the community who has truly given us everything.
+            Serving the Oxford Community since 2002, and committed to continue servicing for more to come!</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/materialize.html b/materialize.html
@@ -16,6 +16,7 @@
                 <li><a href="sisterlocation.html">Expanding Location</a></li>
                 <li><a href=materialize.html>Expanding Location</a></li>
                 <li><a href=materialize2.html>Expanding Location</a></li>
+                <a href="jquery.html">JQuery</a>
                 <link rel="stylesheet" href="styles.css"> <!-- Link to the external stylesheet --
             </ul>
         </div>

diff --git a/materialize2.html b/materialize2.html
@@ -17,6 +17,7 @@
                 <li><a href="about.html">Contact Information</a></li>
                 <li><a href="sisterlocation.html">Expanding Location</a></li>
                 <li><a href="materialize.html">Expanding Location</a></li>
+                <a href="jquery.html">JQuery</a>
                 <li><a href="materialize2.html">Expanding Location</a></li> <!-- Fixed href link -->
             </ul>
         </div>

diff --git a/sisterlocation.html b/sisterlocation.html
@@ -17,6 +17,7 @@ <h1>We're Expanding!</h1>
            <a href="sisterlocation.html">Information about Expanding Location</a>
            <li><a href=materialize.html>Expanding Location</a></li>
            <li><a href=materialize2.html>Expanding Location</a></li>
+           <a href="jquery.html">JQuery</a>
            <link rel="stylesheet" href="styles.css">
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
        </div>