Cara Cepat Buat Kalkulator Sederhana dengan JavaScript - Dalam tutorial ini, Anda akan belajar cara membuat kalkulator sederhana menggunakan bahasa pemrograman JavaScript. Kami akan membahas setiap langkah secara detail, mulai dari membuat struktur HTML dasar, menambahkan gaya dengan CSS, hingga menulis logika kalkulator dengan JavaScript.
Tujuan dari tutorial ini adalah memberikan panduan yang jelas dan mudah diikuti untuk membuat kalkulator sederhana yang dapat melakukan operasi aritmatika dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian. Dengan menyelesaikan tutorial ini, Anda akan mendapatkan pemahaman yang lebih baik tentang cara kerja JavaScript dan bagaimana menggunakannya untuk membangun aplikasi web interaktif.
Menyiapkan Lingkungan Pengembangan
Sebelum membuat kalkulator sederhana dengan JavaScript, penting untuk menyiapkan lingkungan pengembangan yang nyaman dan efisien. Langkah ini mencakup pemilihan editor kode yang tepat dan pengaturan struktur folder proyek.
Editor Kode
Memilih editor kode yang tepat dapat sangat membantu dalam proses pengembangan. Berikut adalah beberapa editor kode populer yang banyak digunakan oleh pengembang web:
- Visual Studio Code (VS Code): Editor kode sumber terbuka dari Microsoft yang dikenal dengan fitur-fitur kaya seperti debugging, kontrol Git, dan ekstensi melalui plugin.
- Sublime Text: Editor kode ringan dan cepat dengan antarmuka yang bersih dan dukungan untuk berbagai bahasa pemrograman.
- Atom: Editor kode sumber terbuka yang dikembangkan oleh GitHub, menawarkan kustomisasi tinggi dan integrasi dengan GitHub.
Pilih salah satu editor ini sesuai dengan preferensi Anda. Semua editor ini mendukung penyorotan sintaksis, penyelesaian otomatis, dan banyak fitur lainnya yang akan memudahkan Anda dalam menulis kode JavaScript.
Struktur Folder
Untuk menjaga proyek tetap terorganisir dan mudah diakses, penting untuk menyusun folder dengan benar. Berikut adalah struktur folder yang disarankan untuk proyek kalkulator kita:
my-calculator-project/
│
├── index.html
├── styles.css
└── script.js
Dengan struktur folder yang terorganisir seperti ini, Anda dapat dengan mudah mengelola dan mengedit setiap bagian dari proyek kalkulator Anda.
Membuat Struktur HTML
Langkah pertama dalam membangun kalkulator sederhana dengan JavaScript adalah membuat struktur HTML. HTML akan menjadi fondasi kalkulator kita, tempat semua elemen seperti layar tampilan dan tombol akan ditempatkan.
Membuat File HTML
Langkah pertama adalah membuat file HTML baru. Ikuti langkah-langkah berikut:
- Buka editor kode pilihan Anda (misalnya, VS Code, Sublime Text, atau Atom).
- Buat file baru dan beri nama
index.html. - Simpan file tersebut di dalam folder proyek Anda.
Struktur HTML Dasar
Setelah membuat file HTML, kita akan menambahkan struktur HTML dasar untuk kalkulator. Struktur ini mencakup elemen-elemen seperti judul, layar tampilan, tombol angka, dan operator.
<html lang="en"><head> <meta charset="UTF-8"></meta> <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> <title>Kalkulator Sederhana</title></head><body> <div class="calculator"> <input disabled="" id="display" type="text" /> <br /> <input onclick="addToDisplay('7')" type="button" value="7" /> <input onclick="addToDisplay('8')" type="button" value="8" /> <input onclick="addToDisplay('9')" type="button" value="9" /> <input onclick="addToDisplay('/')" type="button" value="/" /> <br /> <input onclick="addToDisplay('4')" type="button" value="4" /> <input onclick="addToDisplay('5')" type="button" value="5" /> <input onclick="addToDisplay('6')" type="button" value="6" /> <input onclick="addToDisplay('*')" type="button" value="*" /> <br /> <input onclick="addToDisplay('1')" type="button" value="1" /> <input onclick="addToDisplay('2')" type="button" value="2" /> <input onclick="addToDisplay('3')" type="button" value="3" /> <input onclick="addToDisplay('-')" type="button" value="-" /> <br /> <input onclick="addToDisplay('0')" type="button" value="0" /> <input onclick="addToDisplay('.')" type="button" value="." /> <input onclick="calculate()" type="button" value="=" /> <input onclick="addToDisplay('+')" type="button" value="+" /> <br /> <input onclick="clearDisplay()" type="button" value="C" /> </div></body></html>
Dengan struktur HTML dasar ini, kita memiliki kerangka kalkulator yang dapat dikembangkan lebih lanjut dengan menambahkan gaya CSS dan logika JavaScript.
Menambahkan Gaya dengan CSS
Pada langkah ini, kita akan menambahkan gaya visual ke kalkulator yang telah kita buat menggunakan HTML. Dengan menggunakan CSS, kita dapat meningkatkan tampilan kalkulator agar lebih menarik dan mudah digunakan. Berikut adalah langkah-langkah untuk menambahkan gaya dasar ke kalkulator kita:
Membuat File CSS
Pertama-tama, kita perlu membuat file CSS baru untuk menyimpan semua aturan gaya yang akan kita terapkan pada elemen HTML kalkulator. Buat file baru dengan nama styles.css di dalam folder proyek Anda.
Menulis CSS
Selanjutnya, kita akan menulis beberapa aturan CSS dasar untuk memberikan gaya pada kalkulator. Tambahkan kode berikut ke dalam file styles.css:
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
.calculator {
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
background-color: #f2f2f2;
}
.calculator input[type="button"] {
width: 60px;
height: 60px;
font-size: 20px;
margin: 5px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #e0e0e0;
}
.calculator input[type="text"] {
width: 100%;
height: 60px;
font-size: 30px;
text-align: right;
padding-right: 10px;
box-sizing: border-box;
margin-bottom: 10px;
}
Dengan menambahkan kode CSS ini, tampilan kalkulator akan menjadi lebih menarik dan ramah pengguna.
Menambahkan Logika dengan JavaScript
Langkah berikutnya adalah menambahkan logika ke kalkulator kita menggunakan JavaScript. Langkah ini penting karena akan memberikan fungsionalitas pada kalkulator, memungkinkan pengguna untuk melakukan operasi matematika dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian. Kita akan membuat tiga fungsi utama: addToDisplay, clearDisplay, dan calculate.
Membuat File JavaScript
Langkah pertama adalah membuat file JavaScript baru. File ini akan berisi semua kode JavaScript yang diperlukan untuk menjalankan kalkulator. Buat file dengan nama script.js di dalam folder proyek Anda.
Menulis JavaScript
Sekarang saatnya menulis kode JavaScript untuk menambahkan logika pada kalkulator kita. Berikut adalah implementasi dari fungsi-fungsi tersebut:
function addToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
var display = document.getElementById('display');
var result = eval(display.value);
display.value = result;
}
Fungsi addToDisplay akan menambahkan nilai ke layar tampilan, clearDisplay akan membersihkan layar, dan calculate akan melakukan perhitungan berdasarkan nilai yang ada di layar tampilan.
Menyatukan Semua Bagian
Setelah menyelesaikan semua langkah di atas, sekarang kita akan menyatukan semua bagian (HTML, CSS, dan JavaScript) ke dalam satu proyek kalkulator yang berfungsi penuh. Berikut adalah kode lengkap dari proyek kalkulator sederhana:
See the Pen Kalkulator Sederhana by Mohd (@mohdpurwadi) on CodePen.
Dengan mengikuti tutorial ini, Anda telah berhasil membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Anda dapat mengembangkan proyek ini lebih lanjut dengan menambahkan fitur tambahan atau mengubah tampilannya sesuai dengan kebutuhan Anda.