diff --git a/css/styles.css b/css/styles.css index 3dbb80d..42b3b16 100644 --- a/css/styles.css +++ b/css/styles.css @@ -341,4 +341,5 @@ input:active { position: absolute; background-color: white; border: 1px solid #ccc; - } \ No newline at end of file + } + \ No newline at end of file diff --git a/index.html b/index.html index adf7cc1..e8b6e54 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,43 @@ crossorigin="anonymous" referrerpolicy="no-referrer" /> Weather App + + + + + + Rive Animation as Background + + + + + +
@@ -89,7 +126,9 @@

7-Day Forecast

+ + diff --git a/let_it_snow_let_it_snow.riv b/let_it_snow_let_it_snow.riv new file mode 100644 index 0000000..f9367a9 Binary files /dev/null and b/let_it_snow_let_it_snow.riv differ diff --git a/scripts/script.js b/scripts/script.js index 36051a6..894478f 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -57,6 +57,22 @@ async function fetchWeather(city) { if (!response.ok) throw new Error("Failed to fetch weather data."); const data = await response.json(); + console.log(data); + + const weatherText = data.current.condition.text; + + switch (true) { + case weatherText.includes("rain", "Overcast"): + changeRivBg("sky_rain.riv"); + break; + case weatherText.includes("snow"): + changeRivBg("let_it_snow_let_it_snow.riv"); + break; + default: + changeRivBg("sky_sun_cloud.riv"); + break; + } + updateWeatherUI(data); updateForecastUI(data.forecast.forecastday); } catch (error) { @@ -194,5 +210,34 @@ searchInput.addEventListener("input", () => { updateRecentSearches(""); // Refresh recent searches in the dropdown when input is clicked }); +// Global variable to track the current canvas +let currentCanvas = null; + +function changeRivBg(background) { + // If there's an existing canvas, clear it before creating a new one + if (currentCanvas) { + const context = currentCanvas.getContext("2d"); + context.clearRect(0, 0, currentCanvas.width, currentCanvas.height); // Clear the canvas + document.body.removeChild(currentCanvas); // Optionally remove it from the DOM + } + + const r = new rive.Rive({ + src: background, // Your Rive animation + canvas: document.createElement("canvas"), // Create a new canvas element + autoplay: true, + stateMachines: "State Machine 1", + onLoad: () => { + const canvas = r.canvas; + canvas.id = "riveCanvas"; + + // Track the new canvas globally + currentCanvas = canvas; + + document.body.appendChild(canvas); // Append the canvas to body + r.resizeDrawingSurfaceToCanvas(); // Ensure the canvas resizes to match the viewport + }, + }); +} + // Render recent searches on page load document.addEventListener("DOMContentLoaded", () => updateRecentSearches("")); diff --git a/sky_rain.riv b/sky_rain.riv new file mode 100644 index 0000000..15a8d15 Binary files /dev/null and b/sky_rain.riv differ diff --git a/sky_sun_cloud.riv b/sky_sun_cloud.riv new file mode 100644 index 0000000..f531e20 Binary files /dev/null and b/sky_sun_cloud.riv differ