Skip to content

Commit

Permalink
fix code materialize JS assignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlyssaKirstine
AlyssaKirstine committed Nov 19, 2024
1 parent c6bf24c commit d950add
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 151 deletions.
19 changes: 13 additions & 6 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<title>Elise’s Pumpkin Loaf Bakery</title>
</head>

Expand All @@ -17,9 +18,7 @@ <h1>Elise’s Pumpkin Loaf Bakery</h1>
<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">
<a href="materialize.html">Link to materialize page</a>
<a href="https://raec.rocklinusd.org/documents/gradportfoliofiles/standard%20application.pdf"
target="_blank">Apply Today!</a>
</div>
Expand All @@ -46,15 +45,15 @@ <h2>Contact Us</h2>
<h2>Follow Our Socials!</h2>
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">instagram</i>Instagram</div>
<div class="collapsible-header"><i class="material-icons">Instagram</i></div>
<div class="collapsible-body"><span>@Elise’sPumpkinloaves</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">facebook</i>Facebook</div>
<div class="collapsible-header"><i class="material-icons">Facebook</i></div>
<div class="collapsible-body"><span>@Elise’sPumpkinloaves</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">ondemand_video</i>TikTok</div>
<div class="collapsible-header"><i class="material-icons">TikTok</i></div>
<div class="collapsible-body"><span>@Elise’sPumpkinloaves</span></div>
</li>
</ul>
Expand All @@ -71,6 +70,14 @@ <h2>Recreate the Fun at Home!</h2>
<footer>
<p>&copy; 2024 Elise’s Pumpkin Loaf Bakery. All rights reserved.</p>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
</script>
</body>

</html>
274 changes: 142 additions & 132 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Elise's Pumpkin Loaf Bakery</title>
</head>

Expand Down Expand Up @@ -36,7 +36,8 @@ <h2>What we strive for as a company</h2>
<p>We also believe that our menu, while mainly autumnal, encapsulates the fact that fall flavors can be
enjoyed every season. While our specialty is pumpkin loaves, our menu diversifies with lattes,
espressos, coffee cakes, cupcakes, sourdough loaves, and tarts. Give us a stop by to experience the
<u>Elise's Pumpkin Loaves</u> difference.</p>
<u>Elise's Pumpkin Loaves</u> difference.
</p>

<h2>Our Menu</h2>
<ul>
Expand All @@ -45,134 +46,143 @@ <h2>Our Menu</h2>
<li>Sourdough Loaves</li>
<li>Pumpkin Loaves</li>
</ul>
</section>

<h2>Pumpkin Loaves (our specialty menu)</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<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>
<tr>
<td>The Classic</td>
<td>Our original loaf, made with an in-house pumpkin puree that perfectly encapsulates the sweet
taste of pumpkin.</td>
<td>$4.95</td>
</tr>
</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>

<h2>Cold Foam Lattes</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Sweet Cream Cold Brew</td>
<td>Our specially formulated in-house cold brew topped with a sweet cream cold foam, can be ordered
in small, medium, or large.</td>
<td>$4.95</td>
</tr>
<tr>
<td>Sweet Cream Pumpkin Cold Brew</td>
<td>Our specially formulated in-house cold brew topped with a sweet cream pumpkin cold foam (made
with real pumpkins), can be ordered in small, medium, or large.</td>
<td>$5.95</td>
</tr>
<tr>
<td>Matcha Latte</td>
<td>A caffeinated, creamy, and frothy tea-based drink, can be ordered in small, medium, or large.</td>
<td>$7.95</td>
</tr>
<tr>
<td>Peppermint Cream Latte</td>
<td>Our in-house cold brew topped with a whipped peppermint cream cold foam, can be ordered in
small, medium, or large.</td>
<td>$8.95</td>
</tr>
</table>

<h2>Sourdough Loaves</h2>
<table>
<tr>
<td>Crusty, tangy bread with a chewy interior and airy texture.</td>
<td>$7.00</td>
</tr>
</table>

<h2>Fruit Tarts</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Classic Tarty-Tart</td>
<td>A classic tart topped with fresh whipped cream, glazed kiwis, strawberries, blueberries, and
mandarin oranges.</td>
<td>$3.95</td>
</tr>
</table>

<h3>Enter your phone number here to be entered into our monthly cookie drawing!</h3>
<h2>Help us select our next best seller!</h2>
<form>
<label for="flavorSelect">Select your favorite pumpkin loaf flavor:</label>
<select id="flavorSelect">
<option>Pumpkin Spice</option>
<option>Chocolate Chip Pumpkin</option>
<option>Cinnamon Swirl</option>
<option>Vanilla Glazed</option>
</select>
<br><br>
<input type="button" onclick="submitFlavor()" value="Submit Flavor">
</form>
<p id="flavorMessage"></p>

<script>
function submitFlavor() {
let flavorSelect = document.getElementById("flavorSelect");
let selectedFlavor = flavorSelect.options[flavorSelect.selectedIndex].text;
let flavorMessage = document.querySelector("#flavorMessage");
flavorMessage.innerHTML = "Great choice! You selected the " + selectedFlavor + " flavor. We hope you enjoy it!";
}
</script>

<!-- Carousel Section -->
<h2>Our Product Carousel</h2>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://imgur.com/8l09XDZ" alt="Image 1"></a>
<a class="carousel-item" href="#two!"><img src="https://imgur.com/B4rfhDJ" alt="Image 2"></a>
<a class="carousel-item" href="#three!"><img src="https://imgur.com/HrsP3W9" alt="Image 3"></a>
<a class="carousel-item" href="#four!"><img src="https://imgur.com/WVI1Hqf" alt="Image 4"></a>
</div>

<script>
// Initialize the carousel
document.addEvent
<h2>Pumpkin Loaves (our specialty menu)</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<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>
<tr>
<td>The Classic</td>
<td>Our original loaf, made with an in-house pumpkin puree that perfectly encapsulates the sweet
taste of pumpkin.</td>
<td>$4.95</td>
</tr>
</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>

<h2>Cold Foam Lattes</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Sweet Cream Cold Brew</td>
<td>Our specially formulated in-house cold brew topped with a sweet cream cold foam, can be ordered
in small, medium, or large.</td>
<td>$4.95</td>
</tr>
<tr>
<td>Sweet Cream Pumpkin Cold Brew</td>
<td>Our specially formulated in-house cold brew topped with a sweet cream pumpkin cold foam (made
with real pumpkins), can be ordered in small, medium, or large.</td>
<td>$5.95</td>
</tr>
<tr>
<td>Matcha Latte</td>
<td>A caffeinated, creamy, and frothy tea-based drink, can be ordered in small, medium, or large.</td>
<td>$7.95</td>
</tr>
<tr>
<td>Peppermint Cream Latte</td>
<td>Our in-house cold brew topped with a whipped peppermint cream cold foam, can be ordered in
small, medium, or large.</td>
<td>$8.95</td>
</tr>
</table>

<h2>Sourdough Loaves</h2>
<table>
<tr>
<td>Crusty, tangy bread with a chewy interior and airy texture.</td>
<td>$7.00</td>
</tr>
</table>

<h2>Fruit Tarts</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Classic Tarty-Tart</td>
<td>A classic tart topped with fresh whipped cream, glazed kiwis, strawberries, blueberries, and
mandarin oranges.</td>
<td>$3.95</td>
</tr>
</table>

<h3>Enter your phone number here to be entered into our monthly cookie drawing!</h3>
<h2>Help us select our next best seller!</h2>
<form>
<label for="flavorSelect">Select your favorite pumpkin loaf flavor:</label>
<select id="flavorSelect">
<option>Pumpkin Spice</option>
<option>Chocolate Chip Pumpkin</option>
<option>Cinnamon Swirl</option>
<option>Vanilla Glazed</option>
</select>
<br><br>
<input type="button" onclick="submitFlavor()" value="Submit Flavor">
</form>
<p id="flavorMessage"></p>

<script>
function submitFlavor() {
let flavorSelect = document.getElementById("flavorSelect");
let selectedFlavor = flavorSelect.options[flavorSelect.selectedIndex].text;
let flavorMessage = document.querySelector("#flavorMessage");
flavorMessage.innerHTML = "Great choice! You selected the " + selectedFlavor + " flavor. We hope you enjoy it!";
}
</script>

<!-- Carousel Section -->
<h2>Our Product Carousel</h2>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://i.imgur.com/8l09XDZ.jpeg" alt="Image 1"></a>
<a class="carousel-item" href="#two!"><img src="https://i.imgur.com/B4rfhDJ.jpeg" alt="Image 2"></a>
<a class="carousel-item" href="#three!"><img src="https://i.imgur.com/HrsP3W9.jpeg" alt="Image 3"></a>
<a class="carousel-item" href="#four!"><img src="https://i.imgur.com/WVI1Hqf.jpeg" alt="Image 4"></a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems);
});
</script>

</body>

</html>
0 jquery.html → jquery.html
View file
File renamed without changes.
15 changes: 8 additions & 7 deletions materialize.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
<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/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="styles.css"> <!-- Link to the external stylesheet -->
<title>Elise's Pumpkin Loaf Bakery</title>
</head>
<body>

Expand All @@ -17,7 +19,6 @@
<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>
</nav>
Expand Down Expand Up @@ -118,10 +119,10 @@ <h2>Pumpkin Loaves (Our Specialty Menu)</h2>
</div>

<div class="image-gallery">
<img src="images/cinnamonpumpkinloaf.jpg" alt="Cinnamon Loaf" class="responsive-img">
<img src="images/nutpumpkinloaf.jpg" alt="Nut Pumpkin Loaf" class="responsive-img">
<img src="images/pumpkinloafclassic.jpg" alt="Classic Pumpkin Loaf" class="responsive-img">
<img src="images/vanillaglazedpumpkinloaf.jpg" alt="Vanilla Glazed Pumpkin Loaf" class="responsive-img">
<img src="images/cinnamonpumpkinloaf.jpeg" alt="Cinnamon Loaf" class="responsive-img" />
<img src="images/nutpumpkinloaf.jpeg" alt="Nut Pumpkin Loaf" class="responsive-img" />
<img src="images/pumpkinloafclassic.jpeg" alt="Classic Pumpkin Loaf" class="responsive-img" />
<img src="images/vaniallglazedpumpkinloaf.jpeg" alt="Vanilla Glazed Pumpkin Loaf" class="responsive-img" />
</div>

<h2>Cold Foam Lattes</h2>
Expand Down Expand Up @@ -240,7 +241,7 @@ <h3>Help us select our next best seller!</h3>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</footer>
</body>
</html>
Loading

0 comments on commit d950add

Please sign in to comment.