DEV Community

Cover image for Temperature converter with background changer using vanilla javascript

Posted on

Temperature converter with background changer using vanilla javascript

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


<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <!-- Link css -->
    <link rel="stylesheet" href="style.css">

    <title>Temperature Converter</title>


    <!-- Vidoes will be chnaged according to the Temperature -->

    <video autoplay muted loop id="default-video">
        <source src="" type="video/mp4">
    <video autoplay muted loop id="summer-video">
        <source src="" type="video/mp4">
    <video autoplay muted loop id="auttum-video">
        <source src="" type="video/mp4">
    <video autoplay muted loop id="winter-video">
        <source src="" type="video/mp4">

        <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
                        <!-- 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>
                            <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 class="form-group d-grid pt-4">
                                <input type="submit" value="Calculate" class="btn btn-dark calculateBtn">

                        <!-- 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 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 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 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>

    <!-- Not showing Don't know why :'(' -->
        <h4>Made with &#10084; by <a href="" target="_blank">isuro</a></h4>

    <script src="" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

    <script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode

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 = 'none'; = 'none'; = 'none';

//Defining Calculating elements
const calculateBtn = document.querySelector('.calculateBtn');
const temperatureUnit = document.querySelector('#tempUnit');

//Listen for value when calculated clicked
//Listen for value when option is clicked

//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');

        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);
        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);
        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);
        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;


//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){ = 'block'; = 'none'; = 'none'; = 'none';
   else if(celsius >= 20  &&  celsius <= 29){ = 'none'; = 'block'; = 'none'; = 'none';
    else { = 'none'; = 'none'; = 'block'; = 'none';

    //clear Input
    UIinputValue.value = '';
    UIinputValueUnit.value = '';

Enter fullscreen mode Exit fullscreen mode

Css Code

@import url('');

    font-family: 'Audiowide', cursive;

    margin-top: 5%;

    padding: 5%
/* Curved border */
    border-radius: 50px;
    background-color: rgba(216, 221, 216, 0.726);

    color: #000;

/* Video Positioning */
position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;

Enter fullscreen mode Exit fullscreen mode

Any Suggesitions appriciated.

Top comments (0)