Experiment 7
Displaying the 3-Day
Weather Forecast
Exp.7 Displaying the 3-Day Weather Forecast
Lab 7 Objectives:
● Create an HTML section within the weather application for displaying the 3-day weather
forecast.
Prerequisites: The prerequisites of this lab are-
● Completion of Lab 6
● Basic understanding of HTML structure and elements
Outcomes: By the end of this lab, students will be able to:
● Design an HTML section to display the 3-day weather forecast.
● Structure HTML elements to represent forecasted weather information.
● Create a visually appealing and well-organized forecast display
Description:
1. Opening the Project in VS Code: Open Visual Studio Code and open the weather-app
project directory.
2. Planning the Forecast Section: Planning helps ensure a clear vision for the forecast
section and facilitates efficient implementation.
● Determine the layout and structure of the 3-day weather forecast section.
● Decide which weather parameters to include for each day (e.g., date, temperature,
weather icon, description)
3. Adding HTML Structure: Proper HTML structure lays the foundation for organizing and
styling the forecast display.
● Open the index.html file and identify the appropriate location to add the
forecast section.
● Use HTML elements to create a structured layout for displaying the forecasted
weather information.
Sample Code (HTML):
<div class="forecast">
<h2>3-Day Weather Forecast</h2>
<div class="forecast-days">
<!-- Forecast data for each day will be added dynamically
-->
</div>
</div>
4. Designing Day Cards: Day cards provide a consistent format for presenting forecast
information and improve visual clarity.
● Create HTML templates for individual day cards within the forecast section.
● Define the layout and content structure for each day's weather forecast.
Sample Code (HTML):
<div class="day-card">
<div class="day-date">Monday, May 25</div>
<div class="day-weather-icon"><img src="weather-icon.png"
alt="Weather Icon"></div>
<div class="day-temperature">25°C</div>
<div class="day-description">Partly Cloudy</div>
</div>
5. Styling Day Cards: Styling day cards improves readability and visual appeal, enhancing
the overall forecast display.
● Apply CSS styles to the day cards to enhance their appearance and layout.
● Use properties such as padding, margin, background color, and border to create
visually appealing cards.
Sample Code (CSS):
.day-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
6. Testing and Refinement: Testing helps identify any issues or inconsistencies in the
forecast display, allowing for refinement and improvement.
● Test the forecast section in a web browser to ensure proper layout and styling.
● Make adjustments as needed to improve alignment, spacing, and overall
presentation.
7. Committing Changes to Git: Regularly committing changes ensures a clean and
organized project history, facilitating collaboration and troubleshooting.
● Commit the CSS changes to the Git repository to track the progress and maintain
version control.
● Use descriptive commit messages to document the changes made.
Commands:
git add .
git commit -m "Designed HTML section for 3-day weather forecast"
git push
Additional Resources:
● HTML Elements Reference: HTML Reference on MDN
● CSS Box Model: CSS Box Model on MDN
