I am building a super simple page that converts Fahrenheit to Celsius and visa versa. On this page, I want to load different moving backgrounds I found online that are in external files. For instance, if the user enters "32" or less in the Fahrenheit section, then the background has a snow effect. Here's the code I have:
HTML:
<section id="form_div">
<form id="conversion_form">
<label>
Will you be entering the temperature in Farenheit? Or Celsius?
</label>
<input type="radio" name="measurement" id="farenheit" value="farenheit">Farenheit
<input type="radio" name="measurement" id="celsius" value="celsius">Celcius
<span id="measurement_f">
<label>
What is the tempurature (in Farenheit)?
</label>
<input type="number" name="temp" id="fTemp" maxlength="4">°F
</span>
<span id="measurement_c">
<label>
What is the tempurature (in Celsius)?
</label>
<input type="number" name="temp" id="cTemp" maxlength="4">°C
</span>
</form>
<button id="F">Convert to Farenheit</button>
<button id="C">Convert to Celsius</button>
<section id="output"></section>
</section>
JAVASCRIPT:
document.getElementById('measurement_f').style.display = 'none';
document.getElementById('measurement_c').style.display = 'none';
document.getElementById('F').style.display = 'none';
document.getElementById('C').style.display = 'none';
document.getElementById('farenheit').onclick = function(){
document.getElementById('measurement_c').style.display = 'none';
document.getElementById('F').style.display = 'none';
document.getElementById('cTemp').value = '';
document.getElementById('output').innerHTML = '';
document.getElementById('measurement_f').style.display = 'block';
document.getElementById('C').style.display = 'block';
}
document.getElementById('celsius').onclick = function(){
document.getElementById('measurement_f').style.display = 'none';
document.getElementById('C').style.display = 'none';
document.getElementById('fTemp').value = '';
document.getElementById('output').innerHTML = '';
document.getElementById('measurement_c').style.display = 'block';
document.getElementById('F').style.display = 'block';
}
document.getElementById('C').onclick = function() {
var fTempVal = parseInt(document.getElementById('fTemp').value);
var cTempVal = (fTempVal - 32) * (5 / 9);
document.getElementById('output').innerHTML = cTempVal.toFixed('0') + '°C';
if(fTempVal <= '32') {
//Load <script src="js/snowstorm.js">
}
return false;
}
document.getElementById('F').onclick = function() {
var cTempVal = parseFloat(document.getElementById('cTemp').value);
var fTempVal = (cTempVal * (9 / 5)) + 32;
document.getElementById('output').innerHTML = fTempVal.toFixed('0') + '°F';
if(cTempVal <= '0') {
//Load <script src="js/snowstorm.js">
}
return false;
}
Aucun commentaire:
Enregistrer un commentaire