TheCodingLady/alexandra.html

## alexandra.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">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h2>Where do you code?</h2>
        <p> <input type="text" id="cityname"></input>

            <input type="button" value="Go" onclick="Data()"></input>
        </p>


    <div>
        <p>The temperature is: <span id="temp"></span></p>
    </div>

    <div>
        <p>The humidity is: <span id="hum"></span></p>
    </div>

    <script src="index.js">

    </script>


</body>
</html>

## index.js
function Data() {

    let cityname = document.getElementById('cityname').value;
    console.log(cityname);

    let result = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityname + '&APPID=7edca5e94374bbf688174e890e849976&units=metric'

    const req = new XMLHttpRequest();

    req.onreadystatechange = function(event) {
    // XMLHttpRequest.DONE === 4
        if (this.readyState === XMLHttpRequest.DONE) {
            if (this.status === 200) {
            console.log(req);
            justcelsius(this.responseText);
            } else {
            console.log("Status de la réponse: %d (%s)", this.status, this.statusText);
            }
        }
    };

    req.open('GET', result, true);
    req.send(null);

    function justcelsius(place){
        place = JSON.parse(place);
        console.log(place);
        // then, put data in the html

        document.getElementById("temp").innerText = place.main.temp;

        document.getElementById("hum").innerText = place.main.humidity;

    }
}
	<!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">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<title>Document</title>
	</head>
	<body>
	<h2>Where do you code?</h2>
	<p> <input type="text" id="cityname"></input>

	<input type="button" value="Go" onclick="Data()"></input>
	</p>


	<div>
	<p>The temperature is: <span id="temp"></span></p>
	</div>

	<div>
	<p>The humidity is: <span id="hum"></span></p>
	</div>

	<script src="index.js">

	</script>


	</body>
	</html>
	function Data() {

	let cityname = document.getElementById('cityname').value;
	console.log(cityname);

	let result = 'http://api.openweathermap.org/data/2.5/weather?q=' + cityname + '&APPID=7edca5e94374bbf688174e890e849976&units=metric'

	const req = new XMLHttpRequest();

	req.onreadystatechange = function(event) {
	// XMLHttpRequest.DONE === 4
	if (this.readyState === XMLHttpRequest.DONE) {
	if (this.status === 200) {
	console.log(req);
	justcelsius(this.responseText);
	} else {
	console.log("Status de la réponse: %d (%s)", this.status, this.statusText);
	}
	}
	};

	req.open('GET', result, true);
	req.send(null);

	function justcelsius(place){
	place = JSON.parse(place);
	console.log(place);
	// then, put data in the html

	document.getElementById("temp").innerText = place.main.temp;

	document.getElementById("hum").innerText = place.main.humidity;

	}
	}