Scribd
Upload
43 views12 pages

Taran 2

Uploaded by

yashsoni33033
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
43 views12 pages

Taran 2

Uploaded by

yashsoni33033
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

CHAPTER 8

Coding
HTML
<!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>WeatherAPI</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Merriweather+
Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<h1>Weather App</h1>
<div class="tab-container">
<p class="tab" data-userWeather>Your Weather</p>
<p class="tab" data-searchWeather>Search Weather</p>
</div>
<div class="weather-container">
<!-- grant location container-->
<div class="sub-container grant-location-container">
<img src="location.png" width="80" height="80" loading="lazy">
<p>Grant Location Access</p>
[13]
<p>Allow Access to get weather Information</p>
<button class="btn" data-grantAccess>Grant Access</button>
</div>

<!-- search form -> form-container-->


<form class="form-container" data-searchForm>
<input placeholder="Search for City..." data-searchInput>
<button class="btn" type="submit">
<img src="search.png" width="20" height="20" loading="lazy">
</button>
</form>

<!--- loading screen container -->


<div class="sub-container loading-container">
<img src="loading.gif" width="150" height="150">
<p>Loading</p>
</div>

<!-- show weather info -->


<div class="sub-container user-info-container">

<!--city name and Flag-->


<div class="name">
<p data-cityName></p>
<img data-countryIcon>
</div>

<!-- weather descriptuion-->


<p data-weatherDesc></p>
<!--weather Icon-->
<img data-weatherIcon>
<!--temperature-->
<p data-temp></p>
[14]
<!--3 cards - parameters-->
<div class="parameter-container">

<!--card 1-->
<div class="parameter">
<img src="wind.png" >
<p>windspeed</p>
<p data-windspeed></p>
</div>

<!--card 2-->
<div class="parameter">
<img src="humidity.png" >
<p>humidity</p>
<p data-humidity></p>
</div>

<!--card 3-->
<div class="parameter">
<img src="cloud.png" >
<p>Clouds</p>
<p data-cloudiness></p>
</div>

</div>

</div>

</div>

</div>

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

</body>
</html>
[15]
Java script
const userTab = document.querySelector("[data-userWeather]");
const searchTab = document.querySelector("[data-searchWeather]");
const userContainer = document.querySelector(".weather-container");

const grantAccessContainer = document.querySelector(".grant-location-


container");
const searchForm = document.querySelector("[data-searchForm]");
const loadingScreen = document.querySelector(".loading-container");
const userInfoContainer = document.querySelector(".user-info-
container");

//initially vairables need????

let oldTab = userTab;


const API_KEY = "d1845658f92b31c64bd94f06f7188c9c";
oldTab.classList.add("current-tab");
getfromSessionStorage();

function switchTab(newTab) {
if(newTab != oldTab) {
oldTab.classList.remove("current-tab");
oldTab = newTab;
oldTab.classList.add("current-tab");

if(!searchForm.classList.contains("active")) {
//kya search form wala container is invisible, if yes then make it
visible
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");
searchForm.classList.add("active");
}
else {
[16]
searchForm.classList.remove("active");
userInfoContainer.classList.remove("active");
//ab main your weather tab me aagya hu, toh weather bhi display karna
poadega, so let's check local storage first
//for coordinates, if we haved saved them there.
getfromSessionStorage();
}
}
}

userTab.addEventListener("click", () => {
//pass clicked tab as input paramter
switchTab(userTab);
});

searchTab.addEventListener("click", () => {
//pass clicked tab as input paramter
switchTab(searchTab);
});

//check if cordinates are already present in session storage


function getfromSessionStorage() {
const localCoordinates = sessionStorage.getItem("user-coordinates");
if(!localCoordinates) {
//agar local coordinates nahi mile
grantAccessContainer.classList.add("active");
}
else {
const coordinates = JSON.parse(localCoordinates);
fetchUserWeatherInfo(coordinates);
}

async function fetchUserWeatherInfo(coordinates) {


const {lat, lon} = coordinates;
// make grantcontainer invisible
grantAccessContainer.classList.remove("active");
[17]
//make loader visible
loadingScreen.classList.add("active");

//API CALL
try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=$
{lat}&lon=${lon}&appid=${API_KEY}&units=metric`
);
const data = await response.json();

loadingScreen.classList.remove("active");
userInfoContainer.classList.add("active");
renderWeatherInfo(data);
}
catch(err) {
loadingScreen.classList.remove("active");
//HW

function renderWeatherInfo(weatherInfo) {
//fistly, we have to fethc the elements

const cityName = document.querySelector("[data-cityName]");


const countryIcon = document.querySelector("[data-countryIcon]");
const desc = document.querySelector("[data-weatherDesc]");
const weatherIcon = document.querySelector("[data-weatherIcon]");
const temp = document.querySelector("[data-temp]");
const windspeed = document.querySelector("[data-windspeed]");
const humidity = document.querySelector("[data-humidity]");
const cloudiness = document.querySelector("[data-cloudiness]");
[18]
console.log(weatherInfo);

//fetch values from weatherINfo object and put it UI elements


cityName.innerText = weatherInfo?.name;
countryIcon.src = `https://flagcdn.com/144x108/$
{weatherInfo?.sys?.country.toLowerCas e()}.png`;
desc.innerText = weatherInfo?.weather?.[0]?.description;
weatherIcon.src = `http://openweathermap.org/img/w/$
{weatherInfo?.weather?.[0]?.icon}.png`;
temp.innerText = `${weatherInfo?.main?.temp} °C`;
windspeed.innerText = `${weatherInfo?.wind?.speed} m/s`;
humidity.innerText = `${weatherInfo?.main?.humidity}%`;
cloudiness.innerText = `${weatherInfo?.clouds?.all}%`;

function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
//HW - show an alert for no gelolocation support available
}
}

function showPosition(position) {

const userCoordinates = {
lat: position.coords.latitude,
lon: position.coords.longitude,
}

[19]
sessionStorage.setItem("user-coordinates", JSON.stringify(userCoordinates));
fetchUserWeatherInfo(userCoordinates);

const grantAccessButton = document.querySelector("[data-grantAccess]");


grantAccessButton.addEventListener("click", getLocation);

const searchInput = document.querySelector("[data-searchInput]");

searchForm.addEventListener("submit", (e) => {


e.preventDefault();
let cityName = searchInput.value;

if(cityName === "")


return;
else
fetchSearchWeatherInfo(cityName);
})

async function fetchSearchWeatherInfo(city) {


loadingScreen.classList.add("active");
userInfoContainer.classList.remove("active");
grantAccessContainer.classList.remove("active");

try {
const response = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=$
{API_KEY}&units=metric`
);
const data = await response.json();
loadingScreen.classList.remove("active");
userInfoContainer.classList.add("active");
renderWeatherInfo(data);
}
catch(err) {
//hW
}
} [20]
CSS .tab{
*,*::before,*::after { cursor: pointer;
margin: 0; font-size: 0.875rem;
padding: 0; letter-spacing: 1.75px;
box-sizing: border-box; padding: 5px 8px;
font-family: 'Merriweather Sans', sans-serif; }
}

:root {
.tab.current-tab{
--colorDark1: #112D4E; background-color: rgba(219, 226,
--colorDark2: #3F72AF; 239, 0.5);
--colorLight1: #DBE2EF; border-radius: 4px;
--colorLight2: #F9F7F7; }
}
.weather-container{
.wrapper{
margin-block:4rem;
width:100vw;
height:100vh; }
color: var(--colorLight2);
background-image: linear-gradient(160deg, .btn{
#112d4e 0%, #3f72af 100%);; all: unset;
} /* appearance: none;
border:none;
h1 { color: white; */
text-align: center;
font-size: 0.85rem;
text-transform:uppercase;
padding-top: 20px; text-transform: uppercase;
} border-radius: 5px;
background-color: var(--
.tab-container { colorDark2);
width:90%; cursor: pointer;
max-width: 550px; padding: 10px 30px;
margin: 0 auto; margin-bottom: 10px;
margin-top: 4rem;
}
display: flex;
justify-content: space-between; .sub-container{
} display:flex;
flex-direction:column; [21]
align-items: center; .loading-container p{
} text-transform: uppercase;
}
.grant-location-container{
display:none; .user-info-container{
} display:none;
}
.grant-location-container.active{
display:flex; .user-info-container.active{
} display: flex;
}
.grant-location-container img{
margin-bottom: 2rem; .name{
} display: flex;
align-items: center;
.grant-location-container p:first-of-type{ gap: 0 0.5rem;
font-size: 1.75rem; margin-bottom: 1rem;
font-weight: 600; }
}
.user-info-container p{
.grant-location-container p:last-of-type{ font-size:1.5rem;
font-size:0.85rem; font-weight:200;
font-weight: 500; }
margin-top: 0.75rem;
margin-bottom: 1.75rem; .user-info-container img{
letter-spacing: 0.75px; width:90px;
} height:90px;
}
.loading-container{
display: none; .name p{
} font-size:2rem;
}
.loading-container.active{
display: flex; .name img{
} [22]
width: 30px; height:50px;
height:30px; }
object-fit: contain;
} .parameter p:first-of-type{
font-size: 1.15rem;
.user-info-container p[data-temp] { font-weight:600;
font-size:2.75rem; text-transform: uppercase;
font-weight:700; }
}
.parameter p:last-of-type{
.parameter-container{ font-size: 1rem;
width:90%; font-weight: 200;
display: flex; }
gap: 10px 20px;
justify-content: center; .form-container{
align-items: center; display: none;
margin-top: 2rem; width:90%;
} max-width:550px;
margin:0 auto;
.parameter{ justify-content: center;
width:30%; align-items: center;
max-width:200px; gap: 0 10px;
background-color: rgba(219, 226, 239, margin-bottom: 3rem;
0.5);; }
border-radius: 5px;
padding:1rem; .form-container.active{
display: flex; display: flex;
flex-direction: column; }
gap:5px 0;
/* justify-content: space-between; */ .form-container input{
align-items: center; all:unset;
} width: calc(100% - 80px);
.parameter img{ height:40px;
width:50px; padding: 0 20px;
[23]
background-color:rgba(219, 226, 239,
0.5);
border-radius: 10px;
}

.form-container input::placeholder{
color: rgba(255, 255, 255, 0.7);
}

.form-container input:focus{
outline: 3px solid rgba(255, 255, 255,
0.7);
}

.form-container .btn {
padding:unset;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin-bottom:1px;
}

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy