1.

INTRODUCTION

A weather web app created using HTML, CSS, and JavaScript is a powerful tool that provides real-time
weather information to users. This app utilizes the capabilities of these three languages to create an interactive
and visually appealing interface that allows users to access accurate weather data.

The HTML structure of the web app includes various elements such as headings, buttons, input fields, and
containers to organize the content. These elements are used to display the weather information and provide
user interaction.

CSS is used to style the web app, giving it a visually appealing look and feel. It allows us to customize the
colors, fonts, layouts, and overall design of the app. CSS also enables us to make the web app responsive,
ensuring that it adapts to different screen sizes and devices.

JavaScript is the backbone of the weather web app as it handles the dynamic functionality and interactivity.
It enables us to fetch weather data from APIs (Application Programming Interfaces) such as
OpenWeatherMap or Weatherbit. Using JavaScript's XMLHttpRequest or fetch API, we can send requests
to these APIs and retrieve weather information based on user inputs like location or zip code.

Once the weather data is obtained, JavaScript can parse and manipulate it to extract specific details such as
temperature, humidity, wind speed, and weather conditions like sunny, cloudy, or rainy. These details can
then be displayed on the web app using JavaScript's DOM (Document Object Model) manipulation methods.

To enhance user experience, JavaScript can also provide additional features like auto-complete suggestions
for location input, dynamic backgrounds or icons based on weather conditions, and the ability to toggle
between Celsius and Fahrenheit temperature units.

Overall, a weather web app created using HTML, CSS, and JavaScript is a powerful tool that combines the
strengths of these languages to deliver real-time weather information in an interactive and visually appealing

1|P age
manner. It empowers users to stay informed about the current weather conditions in their desired locations
and enhances their overall web browsing experience.

2|P age
 2. THEORY CONCEPTS

1. HTML structure: The HTML structure of the weather web app includes elements like headings, buttons,
input fields, and containers to organize the content and display weather information.

2. CSS styling: CSS is used to style the web app, allowing customization of colors, fonts, layouts, and overall
design. It also enables responsiveness to different screen sizes and devices.

3. JavaScript functionality: JavaScript handles the dynamic functionality and interactivity of the web app. It
fetches weather data from APIs like OpenWeatherMap or Weatherbit using XMLHttpRequest or fetch API.

4. API integration: The web app integrates with weather APIs to retrieve real-time weather information based
on user inputs like location or zip code.

5. Parsing and manipulation: JavaScript parses and manipulates the weather data to extract specific details
such as temperature, humidity, wind speed, and weather conditions.

6. DOM manipulation: JavaScript's DOM manipulation methods are used to display the extracted weather
details on the web app.

7. Auto-complete suggestions: JavaScript can provide auto-complete suggestions for location input, making
it easier for users to select their desired location.

8. Dynamic backgrounds/icons: JavaScript can dynamically change the backgrounds or icons on the web app
based on the current weather conditions, enhancing visual appeal.

3|P age
9. Temperature unit toggle: JavaScript allows users to toggle between Celsius and Fahrenheit temperature
units, providing flexibility in displaying weather information.

10. Real-time updates: The web app can be designed to periodically fetch updated weather data from the
API, ensuring that users have access to the latest information.

11. Error handling: JavaScript can handle errors in API requests and display appropriate error messages to
users if there are issues with retrieving weather data.

12. Geolocation: JavaScript can utilize the browser's geolocation feature to automatically detect the user's
location and display the weather information without requiring manual input.

13. User-friendly interface: The combination of HTML, CSS, and JavaScript allows for the creation of an
interactive and visually appealing interface that enhances the user experience.

14. Responsive design: CSS enables the web app to adapt to different screen sizes and devices, ensuring a
seamless experience across desktops, tablets, and mobile devices.

15. Cross-browser compatibility: HTML, CSS, and JavaScript are supported by all major web browsers,
ensuring that the weather web app can be accessed by users regardless of their browser preference.

16. Offline functionality: By utilizing service workers and caching techniques, the web app can provide
offline functionality, allowing users to access previously fetched weather data even without an internet
connection.

17. User customization: The web app can allow users to customize certain aspects like background images,
color themes, or preferred weather sources, providing a personalized experience.

4|P age
18. Data visualization: JavaScript libraries like D3.js or Chart.js can be used to create visual representations
of weather data, such as graphs or charts, making it easier for users to interpret and analyze the information.

19. Social media integration: The web app can include social media sharing buttons, allowing users to easily
share weather updates with their friends and followers.

20. Localization: The web app can be designed to support multiple languages, allowing users from different
regions to access weather information in their preferred language.

In summary, a weather web app created using HTML, CSS, and JavaScript combines various concepts such
as API integration, dynamic functionality, responsive design, and user customization to deliver real-time
weather information in an interactive and visually appealing manner.

5|P age
 3. SOURCE CODE

HTML FILE :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Weather App - JavaScript</title>

<link rel="stylesheet" href="font/Rimouski.css">

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<div class="app-title">

<p>Weather</p>

</div>

<div class="notification"> </div>

<div class="weather-container">

<div class="weather-icon">

<img src="icons/unknown.png" alt="">

</div>

<div class="temperature-value">

<p>- °<span>C</span></p>

6|P age
 </div>

<div class="temperature-description">

<p> - </p>

</div>

<div class="location">

<p>-</p>

</div>

</div>

</div>

<script src="app.js"></script>

</body>

</html>

CSS FILE :

*{

font-family: "Rimouski";

body{

background-color: #293251;

.container{

7|P age
 width: 300px;

background-color: #FFF;

display: block;

margin: 0 auto;

border-radius: 10px;

padding-bottom : 50px;

.app-title{

width: 300px;

height: 50px;

border-radius: 10px 10px 0 0;

.app-title p{

text-align: center;

padding: 15px;

margin: 0 auto;

font-size: 1.2em;

color: #293251;

.notification{

background-color: #f8d7da;

8|P age
 display: none;

.notification p{

color: #721c24;

font-size: 1.2em;

margin: 0;

text-align: center;

padding: 10px 0;

.weather-container{

width: 300px;

height: 260px;

background-color: #F4F9FF;

.weather-icon{

width: 300px;

height: 128px;

.weather-icon img{

display: block;

margin: 0 auto;

9|P age
.temperature-value{

width: 300px;

height:60px;

.temperature-value p{

padding: 0;

margin: 0;

color: #293251;

font-size: 4em;

text-align: center;

cursor: pointer;

.temperature-value p:hover{

.temperature-value span{

color: #293251;

font-size: 0.5em;

.temperature-description{

10 | P a g e
}

.temperature-description p{

padding: 8px;

margin: 0;

color: #293251;

text-align: center;

font-size: 1.2em;

.location{

.location p{

margin: 0;

padding: 0;

color: #293251;

text-align: center;

font-size: 0.8em;

11 | P a g e
JAVASCRIPT FILE :

// api key : 82005d27a116c2880c8f0fcb866998a0

// SELECT ELEMENTS

const iconElement = document.querySelector(".weather-icon");

const tempElement = document.querySelector(".temperature-value p");

const descElement = document.querySelector(".temperature-description p");

const locationElement = document.querySelector(".location p");

const notificationElement = document.querySelector(".notification");

// App data

const weather = {};

weather.temperature = {

unit : "celsius"

// APP CONSTS AND VARS

const KELVIN = 273;

// API KEY

const key = "82005d27a116c2880c8f0fcb866998a0";

// CHECK IF BROWSER SUPPORTS GEOLOCATION

if('geolocation' in navigator){

12 | P a g e
 navigator.geolocation.getCurrentPosition(setPosition, showError);

}else{

notificationElement.style.display = "block";

notificationElement.innerHTML = "<p>Browser doesn't Support Geolocation</p>";

// SET USER'S POSITION

function setPosition(position){

let latitude = position.coords.latitude;

let longitude = position.coords.longitude;

getWeather(latitude, longitude);

// SHOW ERROR WHEN THERE IS AN ISSUE WITH GEOLOCATION SERVICE

function showError(error){

notificationElement.style.display = "block";

notificationElement.innerHTML = `<p> ${error.message} </p>`;

// GET WEATHER FROM API PROVIDER

function getWeather(latitude, longitude){

let api =
`http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;

fetch(api)

13 | P a g e
 .then(function(response){

let data = response.json();

return data;

})

.then(function(data){

weather.temperature.value = Math.floor(data.main.temp - KELVIN);

weather.description = data.weather[0].description;

weather.iconId = data.weather[0].icon;

weather.city = data.name;

weather.country = data.sys.country;

})

.then(function(){

displayWeather();

});

// DISPLAY WEATHER TO UI

function displayWeather(){

iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;

tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;

descElement.innerHTML = weather.description;

locationElement.innerHTML = `${weather.city}, ${weather.country}`;

// C to F conversion

function celsiusToFahrenheit(temperature){

14 | P a g e
 return (temperature * 9/5) + 32;

// WHEN THE USER CLICKS ON THE TEMPERATURE ELEMENET

tempElement.addEventListener("click", function(){

if(weather.temperature.value === undefined) return;

if(weather.temperature.unit == "celsius"){

let fahrenheit = celsiusToFahrenheit(weather.temperature.value);

fahrenheit = Math.floor(fahrenheit);

tempElement.innerHTML = `${fahrenheit}°<span>F</span>`;

weather.temperature.unit = "fahrenheit";

}else{

tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;

weather.temperature.unit = "celsius"

});

15 | P a g e
 4. OUTPUT

16 | P a g e
 5. CONCLUSION

In conclusion, creating a weather web app using HTML, CSS, and JavaScript allows for the development of
a versatile and user-friendly platform to access real-time weather information. The HTML structure provides
the foundation for organizing the content and displaying weather details, while CSS styling enables
customization of the app's appearance, making it visually appealing and responsive across different devices.

JavaScript plays a crucial role in the functionality of the web app by integrating with weather APIs to retrieve
accurate and up-to-date weather data based on user inputs. The retrieved data is parsed and manipulated to
extract specific details like temperature, humidity, and wind speed. JavaScript's DOM manipulation methods
then display these details on the web app, creating an interactive interface.

Additional features such as auto-complete suggestions for location input, dynamic backgrounds/icons based
on current weather conditions, and a temperature unit toggle enhance the user experience. Error handling
ensures that users are informed of any issues with retrieving weather data, while geolocation can
automatically detect the user's location for a seamless experience.

The web app can be made even more user-friendly through responsive design, ensuring it adapts to different
screen sizes and devices. Cross-browser compatibility ensures accessibility across various web browsers.
Offline functionality allows users to access previously fetched weather data even without an internet
connection.

User customization options like background images, color themes, and preferred weather sources provide a
personalized experience. Data visualization through libraries like D3.js or Chart.js allows for the creation of
graphs or charts to help users interpret and analyze weather information.

Social media integration enables easy sharing of weather updates, while localization supports multiple
languages for a global user base.

17 | P a g e
In summary, a weather web app created using HTML, CSS, and JavaScript combines the power of these
technologies to deliver real-time weather information in an interactive, visually appealing, and user-friendly
manner. With its versatility and customization options, such a web app can provide an enhanced user
experience for individuals seeking accurate weather updates.

18 | P a g e