A weather forecast application that displays hourly and daily weather data in a user-friendly interface. Built with HTML, CSS, and JavaScript.
- General Info
- Screenshots
- Technologies
- Setup
- Code Examples
- Features
- To-Do List
- Project Status
- Contact
Weather Forecast is a web-based application that fetches and displays weather data (hourly and daily) from an API. It presents the data in a visually structured layout with dynamic DOM rendering and scroll-based background color changes that reflect different times of the day.
- HTML5
- CSS3
- JavaScript (Vanilla)
- OpenWeather API
- Visual Studio Code (IDE)
-
Clone this repository:
git clone https://github.com/yourusername/weather-forecast.git
-
Navigate to the project folder:
cd weather-forecast -
Open
index.htmlin your browser.
const renderWeather = (dailyWeather) => {
dom.container.innerHTML = '';
for (const [day, hourlyWeather] of Object.entries(dailyWeather)) {
const weatherDom = createWeatherDom(day, hourlyWeather);
dom.container.append(weatherDom);
}
};-
Display weather data grouped by day and hour
-
Scroll to reveal different parts of the day with dynamic color backgrounds
-
Select date range to re-fetch and update the forecast dynamically
-
Optimized layout for readability and interaction
-
Use user's location to fetch weather data
-
Improve UI/UX design for different screen sizes
-
Add temperature units toggle (°C / °F)
Project is: Base project completed
By boba-milktea