gaspaonrocks/weatherapp.css

## 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;
}

## 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>

## 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);
            }
        }
    })
})
	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;
	}
	<!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>
	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);
	}
	}
	})
	})