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

Create a socket for HTTP for web page upload and download

Create a socket for HTTP for web page upload and download. Aim: To write a java program for socket for HTTP for web page upload and download . Algorithm 1.Start the program. 2.Get the frame size from the user 3.To create the frame based on the user request. 4.To send frames to server from the client side. 5.If your frames reach the server it will send ACK signal to client otherwise it will send NACK signal to client. 6.Stop the program Program : Client import javax.swing.*; import java.net.*; import java.awt.image.*; import javax.imageio.*; import java.io.*; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; public class Client{ public static void main(String args[]) throws Exception{ Socket soc; BufferedImage img = null; soc=new Socket("localhost",4000); System.out.println("Client is running. ");  try { System.out.println("Reading image from disk. "); im...
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

Write program to find ε – closure of all states of any given NFA with ε transition.

 Write program to find ε – closure of all states of any given NFA with ε transition. Agenda 1.Program 2.Input/Output 1.Program #include <stdio.h> #include <string.h> char  result[ 20 ][ 20 ], copy[ 3 ], states[ 20 ][ 20 ]; void  add_state( char  a[ 3 ],  int  i) {   strcpy(result[i], a); } void  display( int  n) {    int  k =  0 ;   printf( "nnn Epsilon closure of %s = { " , copy);    while  (k < n) {     printf( " %s" , result[k]);     k++;   }   printf( " } nnn" ); } int  main() {   FILE * INPUT;   INPUT = fopen( "input.dat" ,  "r" );    char  state[ 3 ];    int  end, i =  0 , n, k =  0 ;  ...
Post a Comment
Read more