Weather News Website

 

Prerequisite-

1.HTML

2.CSS

3.Javascript

Characteristics of Website-

Current Temperature,Max Temperature,Location,Description,Wind Speed.

How it Work-

We fetch data from API 

Step 1-

Create account on https://openweathermap.org/ for Api.

step 2-

Show json data .

Javascript code-

<script type="text/javascript">

window.addEventListener("load",()=>{

let long;

let lat;

if(navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(position=>{

long=position.coords.longitude;

late=position.coords.latitude;

const Api="https://api.openweathermap.org/data/2.5/weather?lat="+late+"&lon="+long+"&appid=API KEY";

//console.log(Api);

fetch(Api)

.then(response=>{

return response.json();

})

.then(data=>{

var dt=data;

console.log(dt);

var json_object=JSON.parse(JSON.stringify(dt));

var x=parseInt(json_object.main.temp);

var y=(parseInt(x)-273.15);

document.getElementById("tmp").innerHTML="Temparature "+y+"`c";

var x=parseInt(json_object.main.temp_max);

var y=(parseInt(x)-273.15);

document.getElementById("mxTmp").innerHTML="Max Temp "+y+"`c";

 

document.getElementById("des").innerHTML="Description-"+json_object.weather[0].description;

document.getElementById("wdSpeed").innerHTML="wind Speed -"+data.wind.speed;

document.getElementById("loc").innerHTML="Current Weather in "+data.name+"/"+data.sys.country;

 

});

});

}

});

</script>>

CSS code-

<style>

body {

margin: 100px 100px 75px 100px;

background-color: coral;

background: linear-gradient(rgb(100,240,100),rgb(48,62,143));

}

h1{

font-size: 15;

font-family: sans-serif;

font-style: oblique;

 

}

p{

border-style: double;

}

</style>

Complete code-

</!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<style>

body {

margin: 100px 100px 75px 100px;

background-color: coral;

background: linear-gradient(rgb(100,240,100),rgb(48,62,143));

}

h1{

font-size: 15;

font-family: sans-serif;

font-style: oblique;

 

}

p{

border-style: double;

}

</style>

<script type="text/javascript">

window.addEventListener("load",()=>{

let long;

let lat;

if(navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(position=>{

long=position.coords.longitude;

late=position.coords.latitude;

const Api="https://api.openweathermap.org/data/2.5/weather?lat="+late+"&lon="+long+"&appid=abb0c011119d36f2fe4d4244b91955d2";

//console.log(Api);

fetch(Api)

.then(response=>{

return response.json();

})

.then(data=>{

var dt=data;

console.log(dt);

var json_object=JSON.parse(JSON.stringify(dt));

var x=parseInt(json_object.main.temp);

var y=(parseInt(x)-273.15);

document.getElementById("tmp").innerHTML="Temparature "+y+"`c";

var x=parseInt(json_object.main.temp_max);

var y=(parseInt(x)-273.15);

document.getElementById("mxTmp").innerHTML="Max Temp "+y+"`c";

 

document.getElementById("des").innerHTML="Description-"+json_object.weather[0].description;

document.getElementById("wdSpeed").innerHTML="wind Speed -"+data.wind.speed;

document.getElementById("loc").innerHTML="Current Weather in "+data.name+"/"+data.sys.country;

 

});

});

}

});

</script>>

<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-sun" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

<path d="M3.5 8a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0z"/>

<path fill-rule="evenodd" d="M8.202.28a.25.25 0 0 0-.404 0l-.91 1.255a.25.25 0 0 1-.334.067L5.232.79a.25.25 0 0 0-.374.155l-.36 1.508a.25.25 0 0 1-.282.19l-1.532-.245a.25.25 0 0 0-.286.286l.244 1.532a.25.25 0 0 1-.189.282l-1.509.36a.25.25 0 0 0-.154.374l.812 1.322a.25.25 0 0 1-.067.333l-1.256.91a.25.25 0 0 0 0 .405l1.256.91a.25.25 0 0 1 .067.334L.79 10.768a.25.25 0 0 0 .154.374l1.51.36a.25.25 0 0 1 .188.282l-.244 1.532a.25.25 0 0 0 .286.286l1.532-.244a.25.25 0 0 1 .282.189l.36 1.508a.25.25 0 0 0 .374.155l1.322-.812a.25.25 0 0 1 .333.067l.91 1.256a.25.25 0 0 0 .405 0l.91-1.256a.25.25 0 0 1 .334-.067l1.322.812a.25.25 0 0 0 .374-.155l.36-1.508a.25.25 0 0 1 .282-.19l1.532.245a.25.25 0 0 0 .286-.286l-.244-1.532a.25.25 0 0 1 .189-.282l1.508-.36a.25.25 0 0 0 .155-.374l-.812-1.322a.25.25 0 0 1 .067-.333l1.256-.91a.25.25 0 0 0 0-.405l-1.256-.91a.25.25 0 0 1-.067-.334l.812-1.322a.25.25 0 0 0-.155-.374l-1.508-.36a.25.25 0 0 1-.19-.282l.245-1.532a.25.25 0 0 0-.286-.286l-1.532.244a.25.25 0 0 1-.282-.189l-.36-1.508a.25.25 0 0 0-.374-.155l-1.322.812a.25.25 0 0 1-.333-.067L8.203.28zM8 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z"/>

</svg>

<div>

 

<h2 id="loc">Location</h2>

</div>

<div class="double">

<h1 id="tmp">Temparature</h1>

<h1 id="mxTmp">Max Temp</h1>

 

<h1 id="des">Description</h1>

<h1 id="wdSpeed">wind Speed</h1>

</div>

<div id="anim">

</div>

 

</body>

</html>>