Skip to content

Instantly share code, notes, and snippets.

@emmanuelmakana

emmanuelmakana/index.html

Created January 6, 2021 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emmanuelmakana/0e3acaf169d5257d7fbdffea16452eb7 to your computer and use it in GitHub Desktop.
Save emmanuelmakana/0e3acaf169d5257d7fbdffea16452eb7 to your computer and use it in GitHub Desktop.
Download ZIP
OpenWeatherMap Api // source https://jsbin.com/zererus
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>OpenWeatherMap Api</title>
<link rel="stylesheet" href="style.css">
<style id="jsbin-css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Nunito",sans-serif;
background: #f8f8f8;
}
.input{
text-align: center;
margin: 100px auto;
}
input[type="submit"]{
padding: 15px 30px;
background: #e7e7e7;
border: none;
border-radius: 1px;
font-family: "Nunito",sans-serif;
font-weight:bold;
font-size: 20px;
}
.input input[type="text"]{
width: 600px;
height: 55px;
padding: 5px 10px;
background: #e7e7e7;
border: none;
border-radius: 1px;
font-family: "Nunito",sans-serif;
font-weight:bold;
font-size: 20px;
}
.card{
width: 50%;
background: #e7e7e7;
height: 40vh;
margin: 50px auto;
border-radius: 2px;
}
.close{
float: right;
margin-top: -2px;
cursor: pointer;
margin-right: 20px;
}
.card h1{
padding: 5px 0;
text-align: center;
}
.card p{
text-align: center;
margin:40px 0;
font-size:20px;
}
.h1{
align-items: center;
}
p{
align-items: center;
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="main">
<div class="header">
<h1>OpenWeatherMap API</h1>
<p>Enter any city name in the input box below to get the data</p>
</div>
<div class="input">
<input type="text" placeholder="Enter the city" class="input_text">
<input type="submit" value="Submit" class="submit">
</div>
</div>
<div class="container">
<div class="card">
<h1 class="name" id="name"></h1>
<p class="temp"></p>
<p class="clouds"></p>
<p class="desc"></p>
</div>
</div>
<script src="app.js"></script>
<script id="jsbin-javascript">
functionNew();
function functionNew() {
var input = document.querySelector('.input_text');
var main = document.querySelector('#name');
var temp = document.querySelector('.temp');
var desc = document.querySelector('.desc');
var clouds = document.querySelector('.clouds');
var button = document.querySelector('.submit');
button.addEventListener('click', function () {
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + input.value + '&appid=547f404728ebf3116780dedb88c3719c')
.then(response => response.json())
.then(data => {
var tempValue = data['main']['temp'];
var nameValue = data['name'];
var descValue = data['weather'][0]['description'];
main.innerHTML = nameValue;
desc.innerHTML = "Desc : " + descValue;
temp.innerHTML = "Temp : " + tempValue;
input.value = "";
})
.catch(() => alert("Wrong city name!"));
});
}
</script>
<script id="jsbin-source-css" type="text/css">*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Nunito",sans-serif;
background: #f8f8f8;
}
.input{
text-align: center;
margin: 100px auto;
}
input[type="submit"]{
padding: 15px 30px;
background: #e7e7e7;
border: none;
border-radius: 1px;
font-family: "Nunito",sans-serif;
font-weight:bold;
font-size: 20px;
}
.input input[type="text"]{
width: 600px;
height: 55px;
padding: 5px 10px;
background: #e7e7e7;
border: none;
border-radius: 1px;
font-family: "Nunito",sans-serif;
font-weight:bold;
font-size: 20px;
}
.card{
width: 50%;
background: #e7e7e7;
height: 40vh;
margin: 50px auto;
border-radius: 2px;
}
.close{
float: right;
margin-top: -2px;
cursor: pointer;
margin-right: 20px;
}
.card h1{
padding: 5px 0;
text-align: center;
}
.card p{
text-align: center;
margin:40px 0;
font-size:20px;
}
.h1{
align-items: center;
}
p{
align-items: center;
font-family: sans-serif;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">functionNew();
function functionNew() {
var input = document.querySelector('.input_text');
var main = document.querySelector('#name');
var temp = document.querySelector('.temp');
var desc = document.querySelector('.desc');
var clouds = document.querySelector('.clouds');
var button = document.querySelector('.submit');
button.addEventListener('click', function () {
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + input.value + '&appid=547f404728ebf3116780dedb88c3719c')
.then(response => response.json())
.then(data => {
var tempValue = data['main']['temp'];
var nameValue = data['name'];
var descValue = data['weather'][0]['description'];
main.innerHTML = nameValue;
desc.innerHTML = "Desc : " + descValue;
temp.innerHTML = "Temp : " + tempValue;
input.value = "";
})
.catch(() => alert("Wrong city name!"));
});
}
</script></body>
</html>
Raw
jsbin.zererus.css
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Nunito",sans-serif;
background: #f8f8f8;
}
.input{
text-align: center;
margin: 100px auto;
}
input[type="submit"]{
padding: 15px 30px;
background: #e7e7e7;
border: none;
border-radius: 1px;
font-family: "Nunito",sans-serif;
font-weight:bold;
font-size: 20px;
}
.input input[type="text"]{
width: 600px;
height: 55px;
padding: 5px 10px;
background: #e7e7e7;
border: none;
border-radius: 1px;
font-family: "Nunito",sans-serif;
font-weight:bold;
font-size: 20px;
}
.card{
width: 50%;
background: #e7e7e7;
height: 40vh;
margin: 50px auto;
border-radius: 2px;
}
.close{
float: right;
margin-top: -2px;
cursor: pointer;
margin-right: 20px;
}
.card h1{
padding: 5px 0;
text-align: center;
}
.card p{
text-align: center;
margin:40px 0;
font-size:20px;
}
.h1{
align-items: center;
}
p{
align-items: center;
font-family: sans-serif;
}
Raw
jsbin.zererus.js
functionNew();
function functionNew() {
var input = document.querySelector('.input_text');
var main = document.querySelector('#name');
var temp = document.querySelector('.temp');
var desc = document.querySelector('.desc');
var clouds = document.querySelector('.clouds');
var button = document.querySelector('.submit');
button.addEventListener('click', function () {
fetch('https://api.openweathermap.org/data/2.5/weather?q=' + input.value + '&appid=547f404728ebf3116780dedb88c3719c')
.then(response => response.json())
.then(data => {
var tempValue = data['main']['temp'];
var nameValue = data['name'];
var descValue = data['weather'][0]['description'];
main.innerHTML = nameValue;
desc.innerHTML = "Desc : " + descValue;
temp.innerHTML = "Temp : " + tempValue;
input.value = "";
})
.catch(() => alert("Wrong city name!"));
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment