Finished dynemic temperature feature

index.html

@@ -49,7 +49,7 @@ <h1>Test Your SPEEL Dev</h1>
                             </defs>
                         </svg>
                         <h2>Sunny Play</h2>
-                        <p>Our center is located in beautiful Miami, and it&rsquo;s currently 84°F at our pet playground.</p>
+                        <p>Our center is located in beautiful Miami, and it&rsquo;s currently <span id="temperature-output"></span>°F at our pet playground.</p>
                     </div>
                     <div class="intro-feature">
                         <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
@@ -127,7 +127,7 @@ <h3>Barksalot</h3>
                 <div class="pet-card">
                     <div class="pet-card-text">
                         <h3>Barksalot</h3>
-                        <p class="pet-description">Meowsalot is the most talkative cat we’ve ever come across. Constant meowing, chirping and purring!</p>
+                        <p class="pet-description">Meowsalot is the most talkative cat we&rsquo;ve ever come across. Constant meowing, chirping and purring!</p>
                         <p class="pet-age">1 years old</p>
                     </div>
                     <div class="pet-card-photo">
@@ -147,7 +147,7 @@ <h3>Barksalot</h3>
                 <div class="pet-card">
                     <div class="pet-card-text">
                         <h3>Barksalot</h3>
-                        <p class="pet-description">Purrsloud has the loudest and most relaxing purr that’s come through our center. Come hear it yourself.</p>
+                        <p class="pet-description">Purrsloud has the loudest and most relaxing purr that&rsquo;s come through our center. Come hear it yourself.</p>
                         <p class="pet-age">4 years old</p>
                     </div>
                     <div class="pet-card-photo">
@@ -160,6 +160,7 @@ <h3>Barksalot</h3>
     <footer class="site-footer">
         <p>&copy; 2023 Fake Adoption Center. All rights reserved</p>
     </footer>
+    <script src="main.js"></script>
 </body>
 
 </html>

main.js

@@ -0,0 +1,8 @@
+async function start() {
+    const weatherPromise = await fetch("https://api.weather.gov/gridpoints/MFL/110,50/forecast")
+    const weatherData = await weatherPromise.json()
+    const ourTemperature = weatherData.properties.periods[0].temperature
+    document.querySelector('#temperature-output').textContent = ourTemperature
+}
+
+start()