Lesson 2 - Learning construction - STEP 4 solution

by nathanesa

HTML

<h1>C TO F CONVERTER</h1>

<img src="https://freesvg.org/img/hot.png?w=150&h=150&fit=fill&fm=png">

<form>
  <label>Enter Celsius:</label>
  <input id="celsiusInput" type="number" value="37" maxlength="4" size="4" oninput='enterValue()'>
</form>
<br>
<br>
<br>

<p id="output"> </p>

CSS

body {
  background-color: #505562;
  text-align: center;
}

h1 {
  color: white;
  font-size: 50px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

p {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  width: 250px;
  margin: 0 auto;
  font-size: 30px;
}

label {
  color: white;
  font-size: 20px;
}

input {
  margin: 20px;
  font-size: 20px;
  width:40px;
}

button {
  font-size: 20px;
  border-radius: 5px;
}

JavaScript

//get user input
function enterValue() {
 
	let celsius = document.getElementById('celsiusInput').value;
  
	// convert user input to an integer (number) 
	// not crucial in js for small programs, but good to know the data type
	celsius = parseInt(celsius);

	// add formula to convert celcius to fahrenheit
	let fahrenheit = (celsius * 9/5 ) + 32;

	// output concatenation
	document.getElementById('output').innerHTML = celsius + ' \u00B0 C / ' + fahrenheit + '\u00B0 F';

  
}