victoriastuart/weather.html

## weather.html
<!DOCTYPE html>
<html lang="en-us">

<!--
  Example derived from:
  https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditional
-->

<head>
  <meta charset="utf-8" />
  <title>Weather JS Exercise: temperature input box; selections; DOM interaction; ...</title>
</head>

<body>

<!-- HTML -->

Enter today's temperature:
<input type="text" id="inputTemp" placeholder="enter temperature" size=1 autofocus/>
(press Enter)

<br />

<p id='temp'></p>


<label for="weather">Select today's weather: </label>
<select>
  <option value="">--Make a choice--</option>
  <option value="sunny">Sunny</option>
  <option value="rainy">Rainy</option>
  <option value="snowing">Snowing</option>
  <option value="overcast">Overcast</option>
</select>

<p id='weather'></p>


<!-- JS -->

<script src="weather.js" type="text/javascript" charset="utf-8" /></script>

<script>

  <!-- JS embedded here, for ease of viewing in this example: -->

  var para = document.getElementById('temp');

  // http://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field

  window.onkeyup = keyup;

  function keyup(e) {
    // append your input text to a JavaScript variable (every key press):
    temperature = e.target.value;
    //console.log('t: ', temperature);               // each keypress adds the text to 'temperature', a string
    //console.log('type: ', typeof(temperature));    // type: string

    // listen for the ENTER key press, at which point the text (string) in the input box is assigned to the JS variable:
    if (e.keyCode == 13) {
      var temperature = temperature;
      //console.log(temperature);
      para.textContent = 'Temperature: ' + temperature;
    }
  }

  var para2 = document.getElementById('weather');

  var select = document.querySelector('select');
  select.addEventListener('change', setWeather);

  function setWeather() {
    var choice = select.value;

    // Initially I wasn't sure how to get the input box value ('temperature') without
    // reloading the page; however, the following statement programmatically grabs it:
    if (choice === 'sunny') {
      var temperature = document.getElementById("inputTemp").value;
    }

    // NOW, 'temperature' is available for use, here:
    if (choice === 'sunny' && temperature < 86) {
      para2.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
    } else if (choice === 'sunny' && temperature >= 86) {
      para2.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
    } else if (choice === 'rainy') {
      para2.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out too long.';
    } else if (choice === 'snowing') {
      para2.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
    } else if (choice === 'overcast') {
      para2.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
    } else {
      para2.textContent = '';
    }
  }

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en-us">

	<!--
	Example derived from:
	https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditional
	-->

	<head>
	<meta charset="utf-8" />
	<title>Weather JS Exercise: temperature input box; selections; DOM interaction; ...</title>
	</head>

	<body>

	<!-- HTML -->

	Enter today's temperature:
	<input type="text" id="inputTemp" placeholder="enter temperature" size=1 autofocus/>
	(press Enter)

	<br />

	<p id='temp'></p>


	<label for="weather">Select today's weather: </label>
	<select>
	<option value="">--Make a choice--</option>
	<option value="sunny">Sunny</option>
	<option value="rainy">Rainy</option>
	<option value="snowing">Snowing</option>
	<option value="overcast">Overcast</option>
	</select>

	<p id='weather'></p>


	<!-- JS -->

	<script src="weather.js" type="text/javascript" charset="utf-8" /></script>

	<script>

	<!-- JS embedded here, for ease of viewing in this example: -->

	var para = document.getElementById('temp');

	// http://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field

	window.onkeyup = keyup;

	function keyup(e) {
	// append your input text to a JavaScript variable (every key press):
	temperature = e.target.value;
	//console.log('t: ', temperature); // each keypress adds the text to 'temperature', a string
	//console.log('type: ', typeof(temperature)); // type: string

	// listen for the ENTER key press, at which point the text (string) in the input box is assigned to the JS variable:
	if (e.keyCode == 13) {
	var temperature = temperature;
	//console.log(temperature);
	para.textContent = 'Temperature: ' + temperature;
	}
	}

	var para2 = document.getElementById('weather');

	var select = document.querySelector('select');
	select.addEventListener('change', setWeather);

	function setWeather() {
	var choice = select.value;

	// Initially I wasn't sure how to get the input box value ('temperature') without
	// reloading the page; however, the following statement programmatically grabs it:
	if (choice === 'sunny') {
	var temperature = document.getElementById("inputTemp").value;
	}

	// NOW, 'temperature' is available for use, here:
	if (choice === 'sunny' && temperature < 86) {
	para2.textContent = 'It is ' + temperature + ' degrees outside — nice and sunny. Let\'s go out to the beach, or the park, and get an ice cream.';
	} else if (choice === 'sunny' && temperature >= 86) {
	para2.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
	} else if (choice === 'rainy') {
	para2.textContent = 'Rain is falling outside; take a rain coat and a brolly, and don\'t stay out too long.';
	} else if (choice === 'snowing') {
	para2.textContent = 'The snow is coming down — it is freezing! Best to stay in with a cup of hot chocolate, or go build a snowman.';
	} else if (choice === 'overcast') {
	para2.textContent = 'It isn\'t raining, but the sky is grey and gloomy; it could turn any minute, so take a rain coat just in case.';
	} else {
	para2.textContent = '';
	}
	}

	</script>
	</body>
	</html>