Tried a small javascript project. Temperature converter using vanilla javascript & ES6. you can change into a different unit to try it on. Depending on the resulting background will also be changed. Try it http://bit.ly/3nLEgHT
HTML Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- Link css -->
<link rel="stylesheet" href="style.css">
<title>Temperature Converter</title>
</head>
<body>
<!-- Vidoes will be chnaged according to the Temperature -->
<video autoplay muted loop id="default-video">
<source src="https://isurojit.github.io/temperature-converter/default.mp4" type="video/mp4">
</video>
<video autoplay muted loop id="summer-video">
<source src="https://isurojit.github.io/temperature-converter/summerseason.mp4" type="video/mp4">
</video>
<video autoplay muted loop id="auttum-video">
<source src="https://isurojit.github.io/temperature-converter/auttum.mp4" type="video/mp4">
</video>
<video autoplay muted loop id="winter-video">
<source src="https://isurojit.github.io/temperature-converter/winter.mp4" type="video/mp4">
</video>
<main>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center pt-4">
<h1 id="heading" class="pb-4 display-5">
Temperature Converter
</h1>
<!-- Main form -->
<form id="temp-form">
<!-- Input Elements -->
<div class="form-group pt-2">
<select id="tempUnit" class="form-select" aria-label="Default select example">
<option selected>Select Your Desire Temperature Unit</option>
<option value="fahrenheit">Fahrenheit</option>
<option value="celsius">Celsius</option>
<option value="kelvin">Kelvin</option>
<option value="rankine">Rankine</option>
</select>
</div>
<div class="form-group pt-2">
<div class="input-group">
<input type="number" class="form-control" id="UIinputValue" placeholder="Enter Your Value">
<span class="input-group-text" id="UIinputValueUnit"></span>
</div>
</div>
<div class="form-group d-grid pt-4">
<input type="submit" value="Calculate" class="btn btn-dark calculateBtn">
</div>
</form>
<!-- Results -->
<div class="form-group pt-4">
<div class="input-group pt-1">
<span class="input-group-text"> Value In Celsius:</span>
<input type="number" class="form-control" id="result-celsius" disabled><span class="input-group-text">°C</span>
</div>
<div class="input-group pt-1">
<span class="input-group-text"> Value In Fahrenheit:</span>
<input type="number" class="form-control" id="result-fahrenheit" disabled>
<span class="input-group-text">°F</span>
</div>
<div class="input-group pt-1">
<span class="input-group-text"> Value In Kelvin:</span>
<input type="number" class="form-control" id="result-kelvin" disabled>
<span class="input-group-text">°K</span>
</div>
<div class="input-group pt-1">
<span class="input-group-text"> Value In Rankine:</span>
<input type="number" class="form-control" id="result-rankine" disabled>
<span class="input-group-text">°R</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Not showing Don't know why :'(' -->
<footer>
<h4>Made with ❤ by <a href="https://www.linkedin.com/in/surojit-manna" target="_blank">isuro</a></h4>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
Javascript code
//Defining UI
const UIcelsius = document.querySelector('#result-celsius');
const UIfahrenheit = document.querySelector('#result-fahrenheit');
const UIkelvin = document.querySelector('#result-kelvin');
const UIrankine = document.querySelector('#result-rankine');
const UIinputValue = document.querySelector('#UIinputValue');
const UIinputValueUnit = document.querySelector('#UIinputValueUnit');
//Gathering videos
const defaultVideo = document.querySelector('#default-video');
const summerVideo = document.querySelector('#summer-video');
const autumnVideo = document.querySelector('#auttum-video');
const winterVideo = document.querySelector('#winter-video');
//Initially hide every video except defaut
summerVideo.style.display = 'none';
autumnVideo.style.display = 'none';
winterVideo.style.display = 'none';
//Defining Calculating elements
const calculateBtn = document.querySelector('.calculateBtn');
const temperatureUnit = document.querySelector('#tempUnit');
//Listen for value when calculated clicked
calculateBtn.addEventListener('click',calculateResult);
//Listen for value when option is clicked
temperatureUnit.addEventListener('click',changeUIUnit);
//Defining variables in global scope so that it can be use in outer function.
let celsius,fahrenheit,kelvin,rankine;
//Calculate function
function calculateResult(e){
//getting the input value
let inputNumber = parseInt(UIinputValue.value);
//getting the values from option
let optionValue = (temperatureUnit.options[temperatureUnit.selectedIndex].text).toLowerCase();
//Checking the input and assigning if statement according to that
if(optionValue == "select your desire temperature unit" || isNaN(inputNumber)){
alert('Please Enter Both Number / Temperature Value');
}else
if(optionValue == "celsius"){
celsius = inputNumber;
fahrenheit = ((inputNumber * 9/5)+32).toFixed(2);
kelvin = (inputNumber + 273.15).toFixed(2);
rankine =(inputNumber * 9/5 + 491.67).toFixed(2);
UIresultOutput();
};
if(optionValue == "fahrenheit"){
celsius = ((inputNumber-32)*5/9).toFixed(2);
fahrenheit = inputNumber;
kelvin = (((inputNumber-32)*5/9)+273.15).toFixed(2);
rankine =(inputNumber+ 491.67).toFixed(2);
UIresultOutput();
};
if(optionValue == "kelvin"){
celsius = (inputNumber - 273.15).toFixed(2);
fahrenheit = ((inputNumber - 273.15)*9/5 + 32).toFixed(2);
kelvin = inputNumber;
rankine =(inputNumber * 1.8).toFixed(2);
UIresultOutput();
}
if(optionValue == "rankine"){
celsius = ((inputNumber - 491.67)*5/9).toFixed(2);
fahrenheit = (inputNumber - 459.67).toFixed(2);
kelvin = (inputNumber*5/9).toFixed(2);
rankine =inputNumber;
UIresultOutput();
}
e.preventDefault();
};
//Dynamically Unit changing function
function changeUIUnit(){
let UIoptionValue = (temperatureUnit.options[temperatureUnit.selectedIndex].text).toLowerCase();
if(UIoptionValue == 'celsius'){
UIinputValueUnit.innerHTML ='°C';
}
if(UIoptionValue == 'fahrenheit'){
UIinputValueUnit.innerHTML ='°F';
}
if(UIoptionValue == 'kelvin'){
UIinputValueUnit.innerHTML ='°K';
}
if(UIoptionValue == 'rankine'){
UIinputValueUnit.innerHTML ='°R';
}
}
//Appending result into UI function
function UIresultOutput(){
UIcelsius.value = celsius;
UIfahrenheit.value = fahrenheit;
UIkelvin.value = kelvin;
UIrankine.value = rankine;
if(celsius >= 30){
summerVideo.style.display = 'block';
autumnVideo.style.display = 'none';
winterVideo.style.display = 'none';
defaultVideo.style.display = 'none';
}
else if(celsius >= 20 && celsius <= 29){
summerVideo.style.display = 'none';
autumnVideo.style.display = 'block';
winterVideo.style.display = 'none';
defaultVideo.style.display = 'none';
}
else {
summerVideo.style.display = 'none';
autumnVideo.style.display = 'none';
winterVideo.style.display = 'block';
defaultVideo.style.display = 'none';
}
//clear Input
UIinputValue.value = '';
UIinputValueUnit.value = '';
}
Css Code
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
body{
font-family: 'Audiowide', cursive;
}
.container{
margin-top: 5%;
}
.card{
padding: 5%
}
/* Curved border */
.card,.form-control,.form-select,.input-group-text,.calculateBtn,option{
border-radius: 50px;
background-color: rgba(216, 221, 216, 0.726);
}
.calculateBtn{
color: #000;
}
/* Video Positioning */
#default-video,#summer-video,#auttum-video,#winter-video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Any Suggesitions appriciated.
Top comments (0)