Refactor HTML structure and styles

chandler767 · Oct 29, 2024 · 499c514 · 499c514
1 parent 54447c9
commit 499c514
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -40,8 +40,8 @@ <h3>Waiting for weather data...</h3>
             <section id="currentConditions" class="card" hidden>
                 <h2>Current Conditions</h2>
                 <p>Temperature: <span id="temp"></span></p>
-                <p>Humidity: <span id="humidity"></span></p>
                 <p>Wet Bulb: <span id="wetBulb"></span></p>
+                <p>Humidity: <span id="humidity"></span></p>
                 <p id="snowQuality">Snow Quality: <span id="quality"></span></p>
             </section>
             <div class="view-switch" id="viewSwitch" hidden>

diff --git a/script.js b/script.js
@@ -30,8 +30,8 @@ function update12HourForecast(hourly) {
 
         hourEl.innerHTML = `
             <h3>${hour.toLocaleTimeString([], { hour: 'numeric', hour12: true })}</h3>
-            <p>Temp: ${temp.toFixed(1)}°</p>
-            <p>Wet Bulb: ${wetBulb.toFixed(1)}°</p>
+            <p>Temp: ${temp.toFixed(1)}°${isCelsius ? 'C' : 'F'}</p>
+            <p>Wet Bulb: ${wetBulb.toFixed(1)}°${isCelsius ? 'C' : 'F'}</p>
             <p>Humidity: ${humidity}%</p>
             <p>Snow Quality: ${getSnowQuality(wetBulb)}</p>
         `;
@@ -112,9 +112,9 @@ function updateCurrentConditions(hourly, daily) {
     const humidity = hourly.relative_humidity_2m[new Date().getHours()];
     const wetBulb = calculateWetBulb(currentTemp, humidity);
 
-    document.getElementById('temp').textContent = `${currentTemp.toFixed(1)} °${isCelsius ? 'C' : 'F'}`;
+    document.getElementById('temp').textContent = `${currentTemp.toFixed(1)}°${isCelsius ? 'C' : 'F'}`;
     document.getElementById('humidity').textContent = `${humidity}%`;
-    document.getElementById('wetBulb').textContent = `${wetBulb.toFixed(1)} °${isCelsius ? 'C' : 'F'}`;
+    document.getElementById('wetBulb').textContent = `${wetBulb.toFixed(1)}°${isCelsius ? 'C' : 'F'}`;
     document.getElementById('currentConditions').style.border = '5px solid';
     document.getElementById('currentConditions').style.borderColor = getBorderColor(wetBulb);
 
@@ -266,8 +266,8 @@ function createForecastCard(date, period, temp, wetBulb, humidity, isNight = fal
 
     card.innerHTML = `
         <h3>${new Date(date).toLocaleDateString()} (${period})</h3>
-        <p>${period === 'Day' ? 'High' : 'Low'} Temp: ${temp.toFixed(1)}°</p>
-        <p>Wet Bulb: ${wetBulb.toFixed(1)}°</p>
+        <p>${period === 'Day' ? 'High' : 'Low'} Temp: ${temp.toFixed(1)}°${isCelsius ? 'C' : 'F'}</p>
+        <p>Wet Bulb: ${wetBulb.toFixed(1)}°${isCelsius ? 'C' : 'F'}</p>
         <p>Humidity: ${humidity}%</p>
         <p>Snow Quality: ${getSnowQuality(wetBulb)}</p>
     `;