Skip to content

Instantly share code, notes, and snippets.

@gaspaonrocks

gaspaonrocks/weatherapp.css

Created March 16, 2017 09:00
Show Gist options
  • Save gaspaonrocks/d7cd19f0dd7df1b855318a14f9d3391b to your computer and use it in GitHub Desktop.
Save gaspaonrocks/d7cd19f0dd7df1b855318a14f9d3391b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
weatherapp.css
body {
display: flex;
flex-direction: column;
}
div {
background-color: grey;
text-align: center;
width: 50%;
margin: auto;
border: 2px black solid;
}
#input {
background-color: #494949;
color: white;
}
Raw
weatherapp.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weather App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="weatherapp.css" rel="stylesheet">
</head>
<body>
<div id="input">
<p> Ask for the weather in
<input id="city" type="text" placeholder="your city">
</input>
<input id="fetch" type="submit" value="FETCH !"></input>
</p>
<button id="reset" type="reset">AGAIN !</button>
</div>
<div class="display" id="title">
<p>The weather in your city :</p>
</div>
<div class="display" id="temp">
<p>La température actuelle est de</p>
</div>
<div class="display" id="sky">
<p>Regardez le ciel !</p>
<img src="" id="icon">
</div>
<script src="weatherapp.js">
</script>
</body>
</html>
Raw
weatherapp.js
window.addEventListener("DOMContentLoaded", function () {
const body = document.getElementsByTagName("body")[0];
function displayWeather(data, city) {
var div = document.getElementById("title");
var pNb = div.getElementsByTagName("p");
if (pNb.length == 2) {
return;
} else {
var pCity = document.createElement("p");
pCity.textContent = city;
document.getElementById("title").appendChild(pCity);
var temp = data.main.temp;
var pTemp = document.createElement("p");
pTemp.textContent = temp + "°C";
document.getElementById("temp").appendChild(pTemp);
var icon = data.weather[0].icon;
document.getElementById("icon").src = "http://openweathermap.org/img/w/" + icon + ".png";
var caption = data.weather[0].description;
var pCaption = document.createElement("p");
pCaption.textContent = caption;
document.getElementById("sky").appendChild(pCaption);
}
};
document.getElementById("fetch").addEventListener('click', function () {
var city = document.getElementById("city").value;
if (city == "") {
alert("Veuillez entrer une ville ! GRINGO !!")
return;
} else {
var apiXhr = new XMLHttpRequest();
if (apiXhr) {
apiXhr.onreadystatechange = function () {
if (apiXhr.readyState === XMLHttpRequest.DONE) {
if (apiXhr.status === 200) {
var data = JSON.parse(apiXhr.responseText);
displayWeather(data, city);
} else {
alert('Une erreur s’est produite.');
}
}
};
apiXhr.open('GET', 'http://api.openweathermap.org/data/2.5/weather?q=' + city + '&lang=fr&units=metric&APPID=1bb8b9643fcf40f10d845bc78c254b76');
apiXhr.send();
};
}
})
document.getElementById("reset").addEventListener('click', function () {
var display = document.getElementsByClassName("display");
if (document.getElementById("city").value == "") {
alert("Tu n'as pas consulté la météo, GRINGO...");
return;
} else {
document.getElementById("city").value = "";
document.getElementById("icon").src = "";
for (let i = 0; i < display.length; i++) {
var child = display[i].lastElementChild;
display[i].removeChild(child);
}
}
})
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment