Skip to main content

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>>



Comments

  1. anonymus7 September 2020 at 14:56

    bro will u post the solutions of codechef september challenge

    ReplyDelete
    Replies
    1. spoj-solution7 September 2020 at 15:00

      Last 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.

      Delete
    2. anonymus7 September 2020 at 19:35

      plz help on chefina and swaps.I am not getting any thing on it?

      Delete
  2. anonymus9 September 2020 at 14:08

    what you decided to post solution or not?

    ReplyDelete
  3. Unknown9 October 2020 at 02:20

    where is hints

    ReplyDelete

Post a Comment

Popular posts from this blog

Write a JSP which insert the details of the 3 or 4 users who register with the web site by using registration form. Authenticate the user when he submits the login form using the user name and password from the database

Write a JSP which does the following job   Insert the details of the 3 or 4 users who register with the web site (week9) by using registration form. Authenticate the user when he submits the login form using the user name and password from      the database (similar to week8 instead of cookies). Description JSP scripting elements let you insert Java code into the servlet that will be generated from the current JSP page. There are three forms: Expressions of the form  <%= expression %>  that are evaluated and inserted into the output, Scriptlets of the form  <% code %>  that are inserted into the servlet's  service  method, and Declarations of the form  <%! code %>  that are inserted into the body of the servlet class, outside of any existing methods. Each of these is described in more detail below. JSP Expressions A JSP  expression  is used to insert Java values directly...
Post a Comment
Read more

Write a code simulating ARP /RARP protocols

   Write a code simulating ARP /RARP protocols . Aim:        To write a java program for simulating ARP/RARP protocols ALGORITHM: server 1. Create a server socket and bind it to port. 2. Listen for new connection and when a connection arrives, accept it. 3. Send server ‟ s date and time to the client. 4. Read client ‟ s IP address sent by the client. 5. Display the client details. 6. Repeat steps 2-5 until the server is terminated. 7. Close all streams. 8. Close the server socket. 9. Stop. Client 1. Create a client socket and connect it to the server ‟ s port number. 2. Retrieve its own IP address using built-in function. 3. Send its address to the server. 4. Display the date & time sent by the server. 5. Close the input and output streams. 6. Close the client socket. 7. Stop. Program Program for Address Resolutuion Protocol (ARP) using TCP Client: import java.io.*; import java.net.*; impor...
Post a Comment
Read more

Importants Links of Leetcode

  Here are all the important discussion posts which contain brief descriptions about a topic with its problem list. Recursion:- A.   https://leetcode.com/tag/recursion/discuss/1733447/Become-Master-In-Recursion Binary Tree and Binary Search Tree:- A.   https://leetcode.com/tag/binary-tree/discuss/1212004/Binary-Trees-study-guide B.   https://leetcode.com/tag/binary-tree/discuss/1820334/Become-Master-in-Tree C.   https://leetcode.com/tag/binary-tree/discuss/1094690/Views-and-Traversal-of-binary-tree-or-Important-topics-or-Must-Read-%3A- ) Dynamic Programming:- A.   https://leetcode.com/discuss/study-guide/458695/Dynamic-Programming-Patterns B.   https://leetcode.com/tag/dynamic-programming/discuss/1437879/Dynamic-Programming-Patterns C.   https://leetcode.com/tag/dynamic-programming/discuss/662866/DP-for-Beginners-Problems-or-Patterns-or-Sample-Solutions D.   https://leetcode.com/tag/dynamic-programming/discuss/1050391/Must-do-Dynamic-programm...
Post a Comment
Read more