Vue.js Temperature Converter (Celsius + Fahrenheit) Widget in Browser Using Javascript Full Project For Beginners

Vue.js Temperature Converter (Celsius + Fahrenheit) Widget in Browser Using Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a temperature converter widget in browser using vue.js. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to create an index.html file and copy paste the following code

 

index.html

 

<!DOCTYPE html>
<html>
  <head>
    <title>Currency Converter in Javascript</title>
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <style>
    body {
     font-family: 'Nunito', sans-serif;
     color: #0d090a;
     background: #521945;
}
 hr {
     border: 0;
     border-bottom: 1px solid #0d090a;
}
 h3 {
     margin: 0;
}
 #app {
     max-width: 340px;
     padding: 30px 30px 60px 30px;
     border-radius: 4px;
     margin: 30px auto;
     background-color: #eaf2ef;
}
 input.degrees {
     background-color: #fff;
     border: 1px solid #999;
     padding: 7px;
     border-radius: 5px;
     width: 40px;
     outline: none;
}
 input.degrees:focus {
     border-color: #333;
}
 .switcher {
     height: 20px;
     width: 72px;
     cursor: pointer;
     float: left;
     padding: 7px 20px 4px 0;
}
 .switcher span {
     display: block;
     width: 16px;
     line-height: 20px;
     text-align: center;
     color: #ccc;
     transition: color 0.15s linear;
}
 .switcher span.unit-f {
     float: left;
}
 .switcher span.unit-c {
     float: right;
}
 .switcher.F .unit-c {
     color: #0d090a;
}
 .switcher.F .switch span {
     margin: 0 0 0 20px;
}
 .switcher.C .unit-f {
     color: #0d090a;
}
 .switcher.C .switch span {
     margin: 0 20px 0 0;
}
 .switch {
     width: 40px;
     height: 20px;
     border-radius: 10px;
     border: 2px solid #0d090a;
     padding: 2px;
     float: left;
     box-sizing: border-box;
}
 .switch span {
     display: block;
     width: 12px;
     height: 12px;
     border-radius: 6px;
     background-color: #0d090a;
     transition: margin 0.15s ease-out;
}
 .field {
     float: left;
}
 .result {
     padding-left: 20px;
}
 
    </style>
  </head>
  <body>
    <div id="app">
        <h3>{{ name }}</h3>
        <hr>
        <div class="switcher" v-bind:class="[ unit ]" v-on:click="changeUnit">
            <span class="unit-f">F</span>
            <div class="switch"><span></span></div>
            <span class="unit-c">C</span>
        </div>
        <div class="field">
            <input type="number" v-model="deg" v-on:change="convert" v-on:keyup="convert" class="degrees">      
            <span class="result">{{ degrees }}° {{ unit }}</span>
        </div>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="script.js"></script>
</html>

 

See also  Vue.js Input Mask Form Fields Validation Example Using vue-input-mask Library For Phone Numbers,Credit Cards & Dates Full Project For Beginners

 

And now create a script.js file and copy paste the following code

 

script.js

 

var data = {
    name: "Temperature converter",
    unit: "F",
    degrees: 32,
    deg: 0
};

var vm = new Vue({
    el: '#app',

    data: data,

    methods: {
        changeUnit: function () {
            if (this.unit === "C") {
                this.unit = "F";
            } else {
                this.unit = "C";
            }
            return this.convert();
        },

        convert: function () {
            var f = this.deg;
            if (this.unit === "F") {
                f = Math.round(f * 9 / 5 + 32);
            } else {
                f = Math.round((f - 32) * 5 / 9);
            }
            return this.degrees = f;
        }
    }

});

 

See also  Vue.js Vuex Store Server Side Pagination of Data Using Router in Javascript Full Project For Beginners

 

And now if you open index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply