DOCUMENTATION ON

WEATHER USER INTERFACE (UI) USING

HTML, CSS & JAVASCRIPT
SUBMITTED IN PARTIAL FULFILLMENT OF
THE REQUIREMENTS TO AWARD

THE DEGREE OF

BACHELOR OF ARTIFICIAL INTELLIGENCE AND MACHINE LEARNING

DESIGNED AND DEVELOPED BY

R. Ravikumar(22241A66B5)
P. Harshavardhan Reddy(22241A66B1)
V. Nikhil (22241A66C5)
UNDER THE GUIDANCE OF:

Mr. V.Y.Bharadwaj & Ms. A. Samatha

Asst. professor

DEPARTMENT OF

ARTIFICIAL INTELLIGENCE AND MACHINE LEARNING

GOKARAJU RANGARAJU INSTITUTE OF ENGINEERING AND

TECHNOLOGY

(Bachupally, Hyderabad,500090

Faculty Sign: Hod Sign:

 INDEX
S.N Table of Contents Page Number
o

1 Introduction 3

● Problem Statement
● Goal of the Project

2 Weather UI 3

● Description
● Why HTML, CSS and JS ?

3 Set up Environment & Design HTML 7

Structure
● VS code installation
● HTML source code
● Description of the code

4 Styling UI using CSS 8

● CSS source code

● Description of the Code

5 Fetching Weather Data with JavaScript 12

 JS source code
 OpenWeatherMap API
 API key

6 Testing Weather UI 14

7 Limitations 15

 Limited Dynamic Functionality

 Security concerns
8 Conclusion 16

● Summary of the Project

1. Introduction
Problem Statement
The current state of weather-related websites often lacks a seamless and user-
friendly interface. Many existing platforms struggle with providing a visually
appealing and intuitive user experience for accessing weather information.
Users often face challenges in navigating through complex interfaces, and there
is a need for a simple, responsive, and aesthetically pleasing weather application
that caters to diverse user preferences.
Goal of the Project
The goal of the "Weather UI using HTML, CSS, and JS" project is to design
and develop an interactive and visually engaging web application that provides
users with real-time weather information in a user-friendly manner. The project
aims to address the following key objectives:

2. Weather UI
Description
The project Weather UI is a web application that displays the weather
information of a location. The user can enter the location in the search box, and
the app will retrieve the weather data using an API and display it in a visually
appealing way. The app includes a weather image, temperature, humidity, and
wind speed. The UI is built using HTML, CSS, and JavaScript.
Features
 User-Friendly Interface:
Create a responsive and intuitive user interface that is easy to
navigate, ensuring a positive and seamless user experience for
individuals of all technical backgrounds.
 Real-Time Weather Information:
Integrate with a reliable weather API to fetch and display up-to-
date weather information, including temperature, humidity, wind
speed, and conditions for a specified location.
 Visual Appeal:
 Design visually appealing layouts using HTML and CSS to present
weather data in a clear and aesthetically pleasing manner,
enhancing user engagement and comprehension.
 Customization Options:
Provide users with the ability to customize the displayed weather
information based on their preferences, such as choosing between
Celsius and Fahrenheit, or selecting preferred units for wind speed.
 Geolocation Integration:
Implement geolocation features using JavaScript to automatically
detect and display weather information for the user's current
location, offering a personalized experience.
 Forecasting:
Include a forecast section that allows users to view weather
predictions for the upcoming days, giving them a comprehensive
overview of the weather conditions.
 Cross-Browser Compatibility:
Ensure compatibility with major web browsers to reach a wide
audience, minimizing issues related to inconsistent rendering and
functionality.
 Accessibility
Implement accessibility features to ensure the application is usable
by individuals with disabilities, adhering to web standards and best
practices.
Why HTML, CSS and JS ?
 HTML (Hypertext Markup Language):
Structure and Semantics: HTML provides a structured and
semantic markup language, making it easy to organize and present
content on the web.
Cross-browser Compatibility: HTML is supported by all major
browsers, ensuring consistency in displaying content across
different platforms.
 Accessibility: HTML supports the creation of accessible web
content, allowing developers to implement features that cater to
users with disabilities.
 CSS (Cascading Style Sheets):
Separation of Concerns: CSS allows the separation of design and
structure, making it easier to maintain and update the visual aspects
of a website without altering its underlying structure.
Consistent Styling: With CSS, you can apply consistent styles to
multiple pages, ensuring a cohesive and professional appearance
for the entire website.
Responsive Design: CSS supports responsive design, enabling
websites to adapt to different screen sizes and devices, enhancing
the user experience.
 JavaScript (JS):
Interactivity: JavaScript adds interactivity to web pages, allowing
developers to create dynamic and engaging user experiences.
Client-Side Processing: JavaScript reduces the load on the server
by enabling client-side processing, leading to faster response times
and improved performance.
Extensibility: JavaScript can be used to extend the functionality of
a website through the use of libraries and frameworks, such as
jQuery, React, or Angular.

3. Set Up Environment &Design HTML Structure

Vs code Installation
Download VS Code from https://code.visualstudio.com/download, run
the installer, and follow on-screen instructions. Launch VS Code, install
extensions ( Liveserver ), customize settings, and start coding.
HTML source code
This HTML code represents the structure of a simple weather application.
Code<>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App With JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="search-box">
<input type="text" placeholder="Enter your location" class="input-box">

<button class="fa-solid fa-magnifying-glass" id="searchBtn"></button>

</div>
</div>

<div class="location-not-found">
<h1>Sorry, Location not found!!!</h1>
<img src="/assets/404.png" alt="404 Error">
</div>

<div class="weather-body">
<img src="/assets/cloud.png" alt="Weather Image" class="weather-img">

<div class="weather-box">
<p class="temperature">0 ^°C</p>
<p class="description">light rain</p>
</div>

<div class="weather-details">
<div class="humidity">
<i class="fa-sharp fa-solid fa-droplet"></i>
<div class="text">
<span id="humidity">45%</span>
<p>Humidity</p>
</div>
</div>

<div class="wind">
<i class="fa-solid fa-wind"></i>
<div class="text">
 <span id="wind-speed">12Km/H</span>
<p>Wind Speed</p>
</div>
</div>
</div>
</div>
</div>

<script src="script.js"></script>
<script src="https://kit.fontawesome.com/9b6998f11d.js"
crossorigin="anonymous"></script>
</body>
</html>

4. Styling using CSS

CSS source code
*{
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: sans-serif;
}

body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #25d8d2;
}

.container{
width: 400px;
height: min-content;
background-color: #fff;
border-radius: 12px;
 padding: 28px;
}

.search-box{
width: 100%;
height: min-content;
display: flex;
justify-content: space-between;
align-items: center;
}

.search-box input{
width: 84%;
font-size: 20px;
text-transform: capitalize;
color: #000;
background-color: #e6f5fb;
padding: 12px 16px;
border-radius: 14px;
}

.search-box input::placeholder{
color: #000;
}

.search-box button{
width: 46px;
height: 46px;
background-color: #e6f5fb;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
}

.search-box button:hover{
color: #fff;
background-color: #ababab;
}

.weather-body{
justify-content: center;
align-items: center;
 flex-direction: column;
margin-block: 20px;
display: none;
}
.weather-body img{
width: 60%;
}

.weather-box{
margin-block: 20px;
text-align: center;
}

.weather-box .temperature{
font-size: 40px;
font-weight: 800;
position: relative;
}

.weather-box .temperature sup{

font-size: 20px;
position: absolute;
font-weight: 600;
}

.weather-box .description{
font-size: 20px;
font-weight: 700;
text-transform: capitalize;
}

.weather-details{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 30px;
}

.humidity, .wind{
display: flex;
align-items: center;
}
.humidity{
margin-left: 20px;
}

.wind{
margin-right: 20px;
}

.weather-details i{
font-size: 36px;
}

.weather-details .text{
margin-left: 10px;
font-size: 16px;
}

.text span{
font-size: 20px;
font-weight: 700;
}

.location-not-found{
margin-top: 20px;
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
}

.location-not-found h1{
font-size: 20px;
color: #6b6b6b;
margin-block-end: 15px;
}
.location-not-found img{
width: 80%;
}
5. Fetching Weather Data with JavaScript
JS source code
const inputBox = document.querySelector('.input-box');
const searchBtn = document.getElementById('searchBtn');
const weather_img = document.querySelector('.weather-img');
const temperature = document.querySelector('.temperature');
const description = document.querySelector('.description');
const humidity = document.getElementById('humidity');
const wind_speed = document.getElementById('wind-speed');
const location_not_found = document.querySelector('.location-not-found');
const weather_body = document.querySelector('.weather-body');
async function checkWeather(city){
const api_key = "2ce5171d854cc7408ed95e791ab31e78";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=$
{api_key}`;
const weather_data = await fetch(`${url}`).then(response => response.json());
if(weather_data.cod === `404`){
location_not_found.style.display = "flex";
weather_body.style.display = "none";
console.log("error");
return;
}
console.log("run");
location_not_found.style.display = "none";
weather_body.style.display = "flex";
temperature.innerHTML = `${Math.round(weather_data.main.temp - 273.15)}°C`;
description.innerHTML = `${weather_data.weather[0].description}`;
humidity.innerHTML = `${weather_data.main.humidity}%`;
wind_speed.innerHTML = `${weather_data.wind.speed}Kmph`;
switch(weather_data.weather[0].main){
case 'Clouds':
weather_img.src = "/assets/cloud.png";
break;
case 'Clear':
weather_img.src = "/assets/clear.png";
break;
case 'Rain':
weather_img.src = "/assets/rain.png";
break;
case 'Mist':
weather_img.src = "/assets/mist.png";
 break;
case 'Snow':
weather_img.src = "/assets/snow.png";
break;

}
console.log(weather_data);
}
searchBtn.addEventListener('click', ()=>{
checkWeather(inputBox.value);
});
Open weather Map Api
6. Testing Weather UI

7. Limitations
HTML:
 Limited Dynamic Functionality: HTML is primarily a markup language
for creating static content. While it provides structure, it lacks the ability
to create dynamic and interactive elements without the help
of JavaScript.
 Limited Styling Options: HTML has limited styling capabilities, and for
more complex visual designs, CSS is required.
CSS:
 Browser Compatibility: Achieving consistent styling across different
browsers can be challenging due to variations in how browsers interpret
CSS rules.
 Learning Curve: CSS can be complex, and mastering advanced
techniques, such as responsive design or CSS animations, may require a
significant learning curve.
JavaScript:
 Security Concerns: JavaScript executing on the client side can be
vulnerable to security issues, and developers need to be cautious about
potential security risks like cross-site scripting (XSS).
  Dependency on Client-Side Processing: Relying too heavily on
JavaScript for essential functionalities can lead to usability issues if users
have JavaScript disabled or if there are network latency problems.

8 . Summary of the Project

In conclusion, the Weather UI project represents a leap forward in user-centric
design, seamlessly blending functionality with aesthetic appeal. With its
intuitive interface and real-time updates, users can effortlessly access accurate
weather information while enjoying a visually pleasing experience.
The thoughtful incorporation of customization options and geolocation features
ensures a personalized touch, making the Weather UI a standout choice for
anyone seeking a delightful and efficient way to stay informed about the ever-
changing skies. Embrace the future of weather applications – where form meets
function, providing users with a delightful journey through the atmospheric
elements.