Cara Membuat Kalkulator dengan HTML dan CSS
iPunx May 13, 2022 5:14 pm . 7 min read 
Cara membuat kalkulator dengan HTML dan CSS – Dengan coding HTML yang simple kita sudah dapat membuat kalkulator sederhana. Namun dengan bantuan CSS desain kalkulator akan terlihat lebih menarik.
Pada coding pembuatan kalkulator kali ini, kita hanya menggunakan script HTML dan CSS, tanpa bantuan bahasa pemrograman seperti javascript, python, php atau bahasa pemrograman keren lainnya.
Kalkulator yang kita buat sudah meliputi operasi aritmatika dasar. Seperti kalkulator yang baisa beredar di pasaran, coding kalkulator ini sudah meliputi operasi penjumlahan, pengurangan, perkalian, dan pembagian.
Mencoba Aplikasi Kalkulator HTML CSS
Anda dapat melihat hasil coding kalkulator sederhana dengan HTML dan CSS seperti pada aplikasi berikut ini.
Tampilan kalkulator yang kita buat ini mirip seperti kalkulator fisik. Walaupun sederhana, kalkulator ini powerfull untuk digunakan.
Walaupun sepertinya kompleks, namun anda dapat membuat kalkulator seperti di atas hanya dengan menggunakan aplikasi text editor sederhana seperti notepad. Tinggal copy paste source code di bawah dan lakukan seperti petunjuk penempatannya.
Kalkulator yang akan kita buat kali ini hanya memanfaatkan HTML dan CSS. Sangat ringkas dan sederhana tanpa banyak menggunakan tools.
Pertama, Membuat File index.html
Langkah pertama yang harus kita lakukan adalah membuat file index.html. File ini berisi kode HTML untuk membuat kalkulator. Apabila anda menggunakan text editor sederhana seperti notepad, anda tinggal buat file baru kemudian simpan dengan nama index.html.
Anda dapat membuat format tampilan kalkulator dengan HTML. Untuk source code HTML Kalkulaktor dapat anda lihat pada source code kalkulator di bawah ini:
<link rel="stylesheet" href="style.css"> <div class="container"> <fieldset id="container"> <h3>Karce</h3> <form name="calculator"> <input id="display" type="text" name="display" readonly> <input class="button digits" type="button" value="7" onclick="calculator.display.value += '7'"> <input class="button digits" type="button" value="8" onclick="calculator.display.value += '8'"> <input class="button digits" type="button" value="9" onclick="calculator.display.value += '9'"> <input class="button mathButtons" type="button" value="+" onclick="calculator.display.value += ' + '"> <br> <input class="button digits" type="button" value="4" onclick="calculator.display.value += '4'"> <input class="button digits" type="button" value="5" onclick="calculator.display.value += '5'"> <input class="button digits" type="button" value="6" onclick="calculator.display.value += '6'"> <input class="button mathButtons" type="button" value="-" onclick="calculator.display.value += ' - '"> <br> <input class="button digits" type="button" value="1" onclick="calculator.display.value += '1'"> <input class="button digits" type="button" value="2" onclick="calculator.display.value += '2'"> <input class="button digits" type="button" value="3" onclick="calculator.display.value += '3'"> <input class="button mathButtons" type="button" value="x" onclick="calculator.display.value += ' * '"> <br> <input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value = ''"> <input class="button digits" type="button" value="0" onclick="calculator.display.value += '0'"> <input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)"> <input class="button mathButtons" type="button" value="/" onclick="calculator.display.value += ' / '"> </form> </fieldset> </div>
Dari codingan html di atas, kita membuat kalkulator dengan memanfaatkan inputan text readonly agar inputan hanya bisa dilakukan dengan menggunakan button (tombol).
Selanjutnya kita buat button angka 0 – 9, button C (clear) dan button matematika (penambahan, pengurangan, perkalian dan pembagian). Masing-masing button ketika diklik akan mengeksekusi perintah tertentu. Silahkan anda perhatikan pada event onclick masing-masing button.
Kalau dengan hanya menggunakan html saja, pastinya tampilkan kalkulator tidak akan bisa menarik. Untuk itu, kita membutuhkan code CSS (Cascading Style Sheet) agar tampilan kalkulator yang kita buat lebih menarik dan terlihat seperti aplikasi profesional.
Kedua, Membuat File style.css
File style.css berfungsi untuk membuat tampilan kalkulator berbasis HTML dan CSS ini lebih elegan dan menarik. Source code CSS untuk memodifikasi tampilan HTML kalkulator ini juga sangat mudah difahami. Perhatikan per bagian yang akan kita jabarkan berikut ini.
Mengatur Body HTML
Agar tampilan utama kalkulator HTML CSS ini lebih menarik, maka bagian body html kita berikan efek gradien background. Selain itu, pada bagian body kita juga akan mengatur jenis huruf (font) yang akan kita gunakan pada aplikasi calculator HTML CSS ini.
Berikut ini code CSS untuk mengatur background aplikasi kalkulator HTML CSS.
body {
background: linear-gradient(270deg, transparent, #02c8cf);
font-family: Tahoma;
}CSS untuk div Container
Pada div container kita akan mengatur agar tampilan kalkulator berada pada tengah layar. Dengan codingan CSS kita dapat mengatur posisi aplikasi kalkulator. Berikut ini adalah code CSS nya.
Baca Juga:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
}Mempercantik Skin Kalkulator
Skin kalkulator yang kita buat harus memiliki tampilan yang elegan dan keren. Nah, untuk membuat tampilan yang keren, kita butuh CSS. Anda dapat memodifikasi tampilan skin kalkulator dengan merubah sudut ataupun warna skin kalkulator HTML CSS ini.
Silahkan perhatikan source code skin kalkulator berikut ini.
#container {
width: 200px;
padding: 8px 8px 20px 8px;
margin: 20px auto;
background-color: #ABABAB;
border-radius: 4px;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 2px solid #C1C1C1;
border-left: 2px solid #C1C1C1;
box-shadow: -3px 3px 7px rgba(0, 0, 0, .6), inset -100px 0px 100px rgba(255, 255, 255, .5);
}Mengatur Display Inputan Kalkulator
Pada display yang digunakan untuk menampilkan angka yang diinput maupun angka hasil perhitungan, kita harus mengaturnya agar tampilannya mirip dengan dengan kalkulator fisik.
Baca Juga:
Berikut ini adalah code CSS untuk mengatur tampilan display kalkulator agar nampak seperti kalkulator fisik.
#display {
display: block;
margin: 15px auto;
height: 42px;
width: 174px;
padding: 0 10px;
border-radius: 4px;
border-top: 2px solid #C1C1C1;
border-right: 2px solid #C1C1C1;
border-bottom: 2px solid #FFF;
border-left: 2px solid #FFF;
background-color: #FFF;
box-shadow: inset 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, .2);
font-size: 28px;
color: #666;
text-align: right;
font-weight: 400;
}Membuat Button Mirip dengan Tombol Fisik
Button atau tombol kalklator yang kita buat ada beberapa jenis. Diantaranya button digits berfungsi untuk menginputkan angka, button mathButtons merupakan button yang berfungsi untuk menginputkan operator matematika, sedangkan clearButton untuk membersihkan display.
Nah, untuk membuat tampilan yang lebih elegan maka CSS pada masing-masing kategori button kita buat berbeda. Berikut ini adalah code CSS untuk membuat tampilan tombol atau button aplikasi Kalkulator lebih mantab dan elegan.
Baca Juga:
.button {
display: inline-block;
margin: 2px;
width: 42px;
height: 42px;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
}
.mathButtons {
margin: 2px 2px 6px 2px;
color: #FFF;
text-shadow: -1px -1px 0px #44006F;
background-color: #434343;
border-top: 2px solid #C1C1C1;
border-right: 2px solid #C1C1C1;
border-bottom: 2px solid #181818;
border-left: 2px solid #181818;
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #2E2E2E;
}
.digits {
color: #181818;
text-shadow: 1px 1px 0px #FFF;
background-color: #EBEBEB;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 2px solid #C1C1C1;
border-left: 2px solid #C1C1C1;
border-radius: 4px;
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
}
.digits:hover,
.mathButtons:hover,
#clearButton:hover {
background-color: #FFBA75;
box-shadow: 0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 2px solid #AE5700;
border-left: 2px solid #AE5700;
}
#clearButton {
color: #FFF;
text-shadow: -1px -1px 0px #44006F;
background-color: #D20000;
border-top: 2px solid #FF8484;
border-right: 2px solid #FF8484;
border-bottom: 2px solid #800000;
border-left: 2px solid #800000;
box-shadow: 0px 0px 2px #030303, inset 0px -20px 1px #B00000;
}Demikianlah cara membuat kalkulator dengan html yang sangat mudah. Untuk lebih memahami cara membuatnya anda dapat menyimaknya pada video tutorial berikut ini.