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

React 19: New hook useActionState

Self Writing Lang Graph State

TypeScript for Domain-Driven Design (DDD)

How to Build a QR Code Generator with API Using HTML, CSS, and JavaScript