gregoire-bessagnet/index.html

## 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>HTTP Request MDR</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>
<body>


  <div class="container">

  <title>Salut, c'est Evelyne Dhéliat !</title>
    <h1>Salut, c'est Evelyne Dhéliat !</h1>
    <h3>Je te donne la météo pour la ville de ton choix</h3>

<form>
    <input type="text" placeholder="Chercher pour" id="citytext">
     <button id="btn" class="btn btn-default">Chercher</button>
</form>


<div id="output">

</div>

<script src="script.js"></script>
</body>
</html>

## script.js
document.getElementById("btn").addEventListener("click", function(){
var citysubmitted = document.getElementById("citytext").value;
console.log(citysubmitted);
event.preventDefault();

const APPID = "c8b12079e9467ab075130e3b4a785750";
const IMGURL = "http://openweathermap.org/img/w/";
const IMGEXT = ".png";

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        console.log("ca passe");
	    var data = JSON.parse(xhr.responseText);
		console.log(data);
		var temperature = data.list["0"].main.temp;
		var imageUrl = data.list["0"].weather["0"].icon;
 		var conditionsElt = document.createElement("div");
    	conditionsElt.textContent = "Il fait actuellement " + temperature;
    	var imageElt = document.createElement("img");
    	imageElt.src = IMGURL + imageUrl + IMGEXT;
    	var meteoElt = document.getElementById("output");
    	meteoElt.appendChild(conditionsElt);
    	meteoElt.appendChild(imageElt);

    } else {
        	console.log('Une erreur s’est produite.');
    	}
    };
};
		xhr.open("GET", "http://api.openweathermap.org/data/2.5/find?q=" + citysubmitted + "&units=metric&APPID=" + APPID, true);
		xhr.send();

}, false);
	<!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>HTTP Request MDR</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

	</head>
	<body>



	<div class="container">

	<title>Salut, c'est Evelyne Dhéliat !</title>
	<h1>Salut, c'est Evelyne Dhéliat !</h1>
	<h3>Je te donne la météo pour la ville de ton choix</h3>

	<form>
	<input type="text" placeholder="Chercher pour" id="citytext">
	<button id="btn" class="btn btn-default">Chercher</button>
	</form>


	<div id="output">

	</div>

	<script src="script.js"></script>
	</body>
	</html>
	document.getElementById("btn").addEventListener("click", function(){
	var citysubmitted = document.getElementById("citytext").value;
	console.log(citysubmitted);
	event.preventDefault();

	const APPID = "c8b12079e9467ab075130e3b4a785750";
	const IMGURL = "http://openweathermap.org/img/w/";
	const IMGEXT = ".png";

	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function() {
	if (xhr.readyState === XMLHttpRequest.DONE) {
	if (xhr.status === 200) {
	console.log("ca passe");
	var data = JSON.parse(xhr.responseText);
	console.log(data);
	var temperature = data.list["0"].main.temp;
	var imageUrl = data.list["0"].weather["0"].icon;
	var conditionsElt = document.createElement("div");
	conditionsElt.textContent = "Il fait actuellement " + temperature;
	var imageElt = document.createElement("img");
	imageElt.src = IMGURL + imageUrl + IMGEXT;
	var meteoElt = document.getElementById("output");
	meteoElt.appendChild(conditionsElt);
	meteoElt.appendChild(imageElt);

	} else {
	console.log('Une erreur s’est produite.');
	}
	};
	};
	xhr.open("GET", "http://api.openweathermap.org/data/2.5/find?q=" + citysubmitted + "&units=metric&APPID=" + APPID, true);
	xhr.send();

	}, false);