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 an HTML program to design an entry form of student details and send it to store at database server like SQL, Oracle or MS Access

Write an HTML program to design an entry form of student details and send it to store at database server like SQL, Oracle or MS Access <!DOCTYPE html> <html> <head> <title>PHP insertion</title> <link href="css/insert.css" rel="stylesheet"> </head> <body> <div class="maindiv"> <!--HTML Form --> <div class="form_div"> <div class="title"> <h2>Insert Data In Database Using PHP.</h2> </div> <form action="insert.php" method="post"> <!-- Method can be set as POST for hiding values in URL--> <h2>Form</h2> <label>Name:</label> <input class="input" name="name" type="text" value=""> <label>Email:</label> <input class="input" name="email" type="text" value=""> <label>Contact:</label> <inp...
Post a Comment
Read more

Write a code simulating PING and TRACEROUTE commands

  Write a code simulating PING command     Aim:   To Write the java program for simulating ping command   Algorithm Step 1: start the program. Step 2: Include necessary package in java. Step 3: To create a process object p to implement the ping command. Step 4: declare one BufferedReader stream class object. Step 5: Get thedetails of the server          5.1: length of the IP address.          5.2: time required to get the details.          5.3: send packets , receive packets and lost packets.          5.4: minimum ,maximum and average times. Step 6: print the results. Step 7:Stop the program.   Program:   import java.io.*; import java.net.*; class pingserver { public static void main(String args[]) { try { String str; System.out.print(" Enter...
Post a Comment
Read more