Membuat Konversi Suhu Dengan Javascript Dan Bootstrap

Membuat Konversi Suhu Dengan Javascript Dan Bootstrap , Dengan bantuan Javascript kita akan membuat Konversi Suhu dinamis dengan html dan  . selain akan lebih indah dilihat, tampilan dari html akan lebih menarik  karena tampilan akan di buat rapih dengan Bootstrap.

Langkah awal kita perlu menginstall library bootstrap pada html yaitu dengan mendownload  file bootstrap , bisa di download di sini .

Atau bisa juga langsung download template Binary Admin nya disini

Letakkan file bootstrap tadi dalam 1 folder , 

 

Buat file html dengan nama konversi.html

Jangan lupa hubungkan dengan framework bootstrap dengan menambahkan kode berikut :

<!-- BOOTSTRAP STYLES-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLES-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->
<link href="assets/css/custom.css" rel="stylesheet" />
<!-- GOOGLE FONTS-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />

Ubah dan sesuai tampilan sesuai selera tampilan yang saya buat nantinya akan seperti ini

Dari Gambar di atas dapat dilihat ada 3 buah Konversi Suhu Celcius ke Reamur dengan javascript , Konversi Suhu Celcius ke Kelvin  dengan javascript dan Konversi Suhu Celcius ke Farenheit ,

* Baca juga Cara membuat Upload file dengan PHP

Pertama kita buat tampilan dari konversi Derajat Celcius ke Reamur  

<div class="panel panel-default">
                        <div class="panel-heading">
                         Konversi Suhu (Celcius Ke Reamur)
                        </div>        
                                     
                                    <div class="panel-body"> 
                                    <form name="celc">
                                        <div class="form-group">
                                            <label>Masukan Derajat Celcius</label>
                                            <input class="form-control" name="val1" placeholder="Celcius" />
                                        </div>
                                     <input type="button" name="ll" onclick="cel()" class="btn btn-success btn" value="Konversikan"><br><br>
                                        <div id="hsl" class="alert alert-info">
                                                   Hasilnya :
                                        </div>
                                        <div class="progress progress-striped">
                                          <div class="progress-bar progress-bar-info" id="persen" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">  
                                          </div>
                                        </div>
                                        </form>
                                    </div>
                    </div>

Penjelasan :

Ketika tombol Konversikan di klik maka akan muncul hasil dari konversi dan animasi progresbar akan berjalan.

Fungsi Document.getElementById digunakan untuk mengambil value berdasarkan id , setelah itu buat sebuah konversi Celcius ke Reamur 

 <script type="text/javascript">
                               function cel(){
                                    var x=celc.val1.value
                                   y=(x/100)*80;
                                   document.getElementById("hsl").innerHTML="Hasilnya : "+y+" Reamur";
                                   document.getElementById("persen").style.width=x+"%";
                               }
                           </script>

Baca Juga Membuat Crud Mysqli dengan PHP

Selanjutnya membuat konversi suhu Celcius ke Kelvin , buat tampilan nya 

 <div class="panel panel-default">
                        <div class="panel-heading">
                         Konversi Suhu (Celcius Ke Kelvin)
                        </div>        
                                     
                                    <div class="panel-body"> 
                                    <form name="kelv">
                                        <div class="form-group">
                                            <label>Masukan Derajat Celcius</label>
                                            <input  class="form-control" name="val2" placeholder="Celcius" />
                                        </div>
                                     <input type="button"  onclick="kel()" class="btn btn-danger btn" value="Konversikan"><br><br>
                                        <div id="hslKel" class="alert alert-info">
                                                   Hasilnya :
                                        </div>
                                        <div class="progress progress-striped">
                                          <div class="progress-bar progress-bar-danger" id="persenK" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">  
                                          </div>
                                        </div>
                                        </form>
                                    </div>
                    </div>

Fungsi  dan  javascript yang digunakan sama seperti konversi suhu Celcius ke Reamur yang membedakan dari konversi suhu celcius ke reamur pada saat konversi nya saja.

 <script type="text/javascript">
                               function kel(){

                                     x=eval(kelv.val2.value);
                                   k=x+273;

                                   document.getElementById("hslKel").innerHTML="Hasilnya : "+k+" Kelvin";
                                   document.getElementById("persenK").style.width=x+"%";
                               }
                           </script>

Terakhir kita buat konversi suhu celcius ke farenheit , berikut kode Tampilan programnya :

<div class="panel panel-default">
                        <div class="panel-heading">
                         Konversi Suhu (Celcius Ke Farenheit)
                        </div>        
                                      
                                    <div class="panel-body"> 
                                    <form name="fare">
                                        <div class="form-group">
                                            <label>Masukan Derajat Celcius</label>
                                            <input  class="form-control" name="val2" placeholder="Celcius" />
                                        </div>
                                     <input type="button"  onclick="far()" class="btn btn-warning btn" value="Konversikan"><br><br>
                                        <div id="hslFar" class="alert alert-info">
                                                   Hasilnya :
                                        </div>
                                        <div class="progress progress-striped">
                                          <div class="progress-bar progress-bar-warning" id="persenF" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">  
                                          </div>
                                        </div>
                                        </form>
                                    </div>
                    </div>

Tambahkan Javascript di bawah sebagai pemroses ketika tombol konversi di klik :

<script type="text/javascript">
                               function far(){
                                     x=eval(fare.val2.value);
                                   k=(9/5*x)+32;
                                   document.getElementById("hslFar").innerHTML="Hasilnya : "+k+" Farenheit";
                                   document.getElementById("persenF").style.width=x+"%";
                               }
                           </script>

Kode program Full dapat di download di sini

Demikian Tutorial Membuat Konversi Suhu dengan Javascript , Silahkan tinggal kan komentar jika ada pertanyaan

Author : Wafik ulinnuha

Share this

Related Posts