From 3f224c1c8651cae0bd45c97011e9ca7ae63a60f9 Mon Sep 17 00:00:00 2001 From: Pranika Kalimuthu <123928079+PranikaBaby@users.noreply.github.com> Date: Sat, 19 Oct 2024 08:29:54 +0530 Subject: [PATCH] Create weatherforecast.js --- weatherforecast.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) create mode 100644 weatherforecast.js diff --git a/weatherforecast.js b/weatherforecast.js new file mode 100644 index 0000000..7443c18 --- /dev/null +++ b/weatherforecast.js @@ -0,0 +1,46 @@ +// Sample data for daily weather and 5-day forecast +const dailyWeather = { + temperature: "75°F", + condition: "Sunny", +}; + +const fiveDayForecast = [ + { day: "Monday", temperature: "70°F", condition: "Cloudy" }, + { day: "Tuesday", temperature: "72°F", condition: "Rainy" }, + { day: "Wednesday", temperature: "68°F", condition: "Sunny" }, + { day: "Thursday", temperature: "74°F", condition: "Partly Cloudy" }, + { day: "Friday", temperature: "78°F", condition: "Sunny" }, +]; + +// Function to render daily weather +function renderDailyWeather() { + const dailyWeatherCard = document.getElementById("daily-weather"); + dailyWeatherCard.innerHTML = ` +

${dailyWeather.condition}

+

Temperature: ${dailyWeather.temperature}

+ `; +} + +// Function to render 5-day forecast +function renderFiveDayForecast() { + const fiveDayForecastContainer = document.getElementById("five-day-forecast"); + fiveDayForecast.forEach((day) => { + const forecastCard = document.createElement("div"); + forecastCard.classList.add("weather-card"); + forecastCard.innerHTML = ` +

${day.day}

+

Temperature: ${day.temperature}

+

Condition: ${day.condition}

+ `; + fiveDayForecastContainer.appendChild(forecastCard); + }); +} + +// Initialize the weather data +function init() { + renderDailyWeather(); + renderFiveDayForecast(); +} + +// Call the init function to load data +init();