Temperature Converter using HTML, CSS and JAVASCRIPT…

We will make one simple project Temperature converter using HTML, CSS and Javascript.

We will use querySelector for getting data in webpage.

HTML Code:

<div id=”celcius”>
<input type=”number” placeholder=”celcius…”>
</div>
<div id=”fahrenheit”>
<input type=”number” placeholder=”fahrenheit…”>
</div>
<div id=”kelvin”>
<input type=”number” placeholder=”kelvin…”>
</div>

CSS Code:

@import url(‘https://fonts.googleapis.com/css2?family=Asap&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: red;
}
div{
height:33.33vh;
}
#fahrenheit{
border-top: 4px solid white;
border-bottom: 4px solid white;
}
input[type=number]{
width: 100%;
height:100%;
color: white;
font-family: asap, sans-serif;
background:black;
font-size: 3em;
text-align: center;
border: 0;

}

::-webkit-input-placeholder{
color: #222222;
}

JS Code:

const celciusInput= document.querySelector(‘#celcius > input’);
const fahrenheitInput= document.querySelector(‘#fahrenheit > input’);
const kelvinInput= document.querySelector(‘#kelvin > input’);

function roundNum(num){
return Math.round(num*100)/100;
}
function celciusToFahrenheitAndKelvin(){
const cTemp= parseFloat(celciusInput.value);
const fTemp= (cTemp*(9/5)) +32;
const kTemp= cTemp+273.15;
fahrenheitInput.value= roundNum(fTemp);
kelvinInput.value= roundNum(kTemp);
}
function fahrenheitToCelciusAndKelvin(){
const fTemp= parseFloat(fahrenheitInput.value);
const cTemp= (fTemp-32)*(5/9);
const kTemp= (fTemp+459.67)*5/9;
celciusInput.value= roundNum(cTemp);
kelvinInput.value= roundNum(kTemp);
}
function kelvinToFahrenheitAndCelcius(){
const kTemp= parseFloat(kelvinInput.value);
const cTemp= kTemp-273.15;
const fTemp= 9/5 * (kTemp-273)+ 32;
celciusInput.value= roundNum(cTemp);
fahrenheitInput.value= roundNum(fTemp);
}

celciusInput.addEventListener(‘input’,celciusToFahrenheitAndKelvin);
fahrenheitInput.addEventListener(‘input’,fahrenheitToCelciusAndKelvin);
kelvinInput.addEventListener(‘input’,kelvinToFahrenheitAndCelcius);

Happy Reading: