Temperature converter with background changer using vanilla javascript

#html #javascript #css #bootstrap

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">&deg;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">&deg;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">&deg;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">&deg;R</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Not showing Don't know why :'(' -->
    <footer>
        <h4>Made with &#10084; 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 ='&deg;C';
        }
        if(UIoptionValue == 'fahrenheit'){
            UIinputValueUnit.innerHTML ='&deg;F';
        }
        if(UIoptionValue == 'kelvin'){
            UIinputValueUnit.innerHTML ='&deg;K';
        }
        if(UIoptionValue == 'rankine'){
            UIinputValueUnit.innerHTML ='&deg;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.

DEV Community

Temperature converter with background changer using vanilla javascript

Top comments (0)

Read next

How easy it was to deploy my nextjs portfolio site

Cara Penggunaan Axios di ReactJS - GET dan POST Request

Edit HTML files visually.

🚀 12 Dev Tools + Gen Z UX Secrets + CSS Animations (5-min read)