Skip to content

Instantly share code, notes, and snippets.

@RizkyRajitha
Last active Apr 22, 2020
Embed
What would you like to do?
<script>
import axios from "axios";
const appid_openweather = "ac0fdd38df429674be21355a4850114b"; //openweathermap appid
const appid_heremaps = "lmuiUmhDK2JQwBnORnRB"; //here maps appid
const appcode_heremaps = "W3YBbdzlsKOER9SvMF_V1g"; //here maps app code
var loading = false; //get loading state varialble
var city = ""; //store input value varialble1
var temp = ""; //store temp varialble
var humidity = ""; //store humidity varialble
var disc = ""; //store weather discription varialble
var mapurl = ""; //define varialble for map image url
var zoomlevel = 14.5; //change zoom level ot the map image , parametert defined in here maps api
var incomeData =null; //varialble for openweathermap data
const submitHandler = () => {
//submit handler function
loading = true; //chage loading state to true
console.log(city);
axios //send a http get request to openweathermap api to fetch data
.get(
`http://api.openweathermap.org/data/2.5/weather?q=${city}&APPID=${appid_openweather}&units=metric`
)
.then(data => {
//get data upone a sucsessfull response
loading = false; //chage loading state to false
console.log(data.data);
incomeData = data.data; //assign response data to the variable
temp = incomeData.main.temp;
humidity = incomeData.main.humidity;
disc = incomeData.weather[0].description;
console.log(temp + " " + humidity + " " + disc);
mapurl = `https://image.maps.api.here.com/mia/1.6/mapview?app_id=${appid_heremaps}&app_code=${appcode_heremaps}&c=${incomeData.coord.lat},${incomeData.coord.lon}&t=0&z=${zoomlevel}&w=500
&h=500`; //set the url to of the map image
})
.catch(err => {
//handle error
console.log(err.response);
loading = false; //chage loading state to false
window.alert(err.response.data.message); //alert to the user upon a api error
city = ""; //clear form input
});
};
</script>
<style>
.data {
text-align: center;
}
.maindiv {
text-align: center;
margin-top: 5%;
}
.tabledata {
margin-left: 10%;
}
.ulwrpper {
width: 50%;
text-align: left;
margin-left: 38%;
}
.forminput {
margin-top: 3%;
}
/* loader style */
.loader {
margin-left: 45%;
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div class="maindiv">
<h1>weather Geo web app</h1>
{#if loading}
<div class="loader" />
{/if}
<!-- add a html form to handle data -->
<form class="forminput" on:submit|preventDefault={submitHandler}>
<!-- bind the value with the city variable we declared -->
<input bind:value={city} placeholder="Enter your city" />
<button>Fetch Data</button>
</form>
<!-- svelte supports conditions and logic in markup like pug , hbs view engines -->
{#if incomeData!==null}
<div class="data">
<div class="ulwrpper">
<table class="tabledata" style="width:40%">
<tr>
<td>Tempurature :</td>
<td>
<span>{temp}&deg;</span>
</td>
</tr>
<tr>
<td>Humidity :</td>
<td>
<span>{humidity}%</span>
</td>
</tr>
<tr>
<td>weather like :</td>
<span>{disc}</span>
</tr>
</table>
</div>
<img src={mapurl} alt="mapImageView" />
</div>
{/if}
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment