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>>
bro will u post the solutions of codechef september challenge
ReplyDeleteLast time many people massage me don't post the solution so currently i have not any plan for posting solution if there were sufficient people then i will.
Deleteplz help on chefina and swaps.I am not getting any thing on it?
Deletewhat you decided to post solution or not?
ReplyDeletewhere is hints
ReplyDelete