Cara Membuat Kalkulator Sederhana Menggunakan HTML, CSS, dan JavaScript
Table of content:
- Fitur Kalkulator
- Komponen Kalkulator
- Komponen dasar kalkulator dibagi menjadi tampilan dan input tombol.
- Struktur folder proyek kalkulator
- Baris Kalkulator
- dari font Google.
- file dan tambahkan fungsionalitas ke kalkulator sederhana menggunakan kode JavaScript berikut:
- fungsi menambahkan fungsionalitas ke kalkulator.
- fungsi mengakses DOM menggunakan ID hasil dan menghapus nilainya dengan menetapkan string kosong. Anda dapat menggunakan pemilih DOM untuk menargetkan berbagai komponen laman.
- fungsi mengakses DOM menggunakan ID hasil dan menambahkan nilai tombol yang diklik ke hasil.
- fungsi mengevaluasi ekspresi yang Anda teruskan dan mengembalikan hasil ekspresi tersebut.
Cara terbaik untuk mempelajari JavaScript adalah dengan membangun proyek. Jika Anda ingin menjadi pengembang web yang baik, Anda harus mulai membuat proyek sesegera mungkin. Anda bisa memulai dengan membuat proyek tingkat pemula seperti kalkulator sederhana, jam digital, atau stopwatch.
Anda dapat membuat kalkulator sederhana hanya dengan menggunakan teknologi web inti: HTML, CSS, dan JavaScript. Kalkulator ini dapat melakukan operasi matematika dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian.
Baca Juga:
Fitur Kalkulator
Dalam proyek ini, Anda akan mengembangkan kalkulator yang memiliki fitur berikut:
- Ini akan melakukan operasi aritmatika dasar seperti penjumlahan, pengurangan, pembagian, dan perkalian.
- Ini akan melakukan operasi desimal.
- Kalkulator akan ditampilkan Ketakterbatasan jika Anda mencoba membagi bilangan apa pun dengan nol.
- Itu tidak akan menampilkan hasil apa pun jika ekspresi tidak valid. Misalnya, 5++9 tidak akan menampilkan apa pun.
- Fitur Hapus Layar untuk menghapus tampilan layar kapan pun Anda mau.
Kode yang digunakan dalam proyek ini tersedia dalam a Repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT. Jika Anda ingin melihat versi langsung proyek ini, Anda dapat memeriksanya demo.
Komponen Kalkulator
Kalkulator terdiri dari komponen-komponen berikut:
- Operator matematika: Penjumlahan (+), Pengurangan (-), Perkalian
- dan Divisi (/).Tombol angka dan desimal
- : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, .Tampilan layar
- : Menampilkan ekspresi matematika dan hasilnya.Tombol hapus layar
- : Menghapus semua nilai matematika.Tombol hitung (=)
Komponen dasar kalkulator dibagi menjadi tampilan dan input tombol.
Struktur Folder Proyek Kalkulator Buat folder root yang berisi file HTML, CSS, dan JavaScript. Anda dapat memberi nama file apa pun yang Anda inginkan. Di sini, nama folder root adalahKalkulator . Menurut konvensi penamaan standar, file HTML, CSS, dan JavaScript diberi namaindeks.html ,gaya.css Dan skrip.js
Struktur folder proyek kalkulator
Menambahkan Struktur ke Kalkulator Menggunakan HTML Buka indeks.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class="calculator" >
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="https://www.makeuseof.com/" onclick="display("https://www.makeuseof.com/")" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html> file dan tempel kode HTML berikut untuk kalkulator: Proyek ini menggunakan a
Baris Kalkulator
Menata Kalkulator Menggunakan CSS Buka gaya.css
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
#btn {
background-color: #fb0066;
}
input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
file dan tempel kode CSS berikut untuk kalkulator: CSS di atas memberi gaya pada kalkulator. Itu .kelas pemilih di CSS menargetkan elemen dengan atribut kelas tertentu. Itu .Kalkulator Dan .kotak tampilan penyeleksi kelas memberi gaya pada struktur tabel dan tampilan layar kalkulator. @impor mengimpor Keluarga font Orbitron
dari font Google.
Menambahkan Fungsionalitas ke Kalkulator Menggunakan JavaScript Buka skrip.js
function clearScreen() {
document.getElementById("result").value = "";
}
function display(value) {
document.getElementById("result").value += value;
}
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}file dan tambahkan fungsionalitas ke kalkulator sederhana menggunakan kode JavaScript berikut:
Memahami Kode JavaScript Itulayar jernih() ,menampilkan() Dan menghitung()
fungsi menambahkan fungsionalitas ke kalkulator.
Menghapus Nilai Itu layar jernih()
function clearScreen() {
document.getElementById("result").value = "";
} fungsi mengakses DOM menggunakan ID hasil dan menghapus nilainya dengan menetapkan string kosong. Anda dapat menggunakan pemilih DOM untuk menargetkan berbagai komponen laman.
Menampilkan Nilai Itu menampilkan()
function display(value) {
document.getElementById("result").value += value;
} fungsi mengakses DOM menggunakan ID hasil dan menambahkan nilai tombol yang diklik ke hasil.
Mengevaluasi Ekspresi Itu menghitung() fungsi mengakses DOM menggunakan ID hasil dan mengevaluasi ekspresi menggunakan evaluasi()
fungsi. Nilai ekspresi yang dievaluasi kembali ditetapkan ke hasilnya. JavaScript evaluasi()
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
} fungsi mengevaluasi ekspresi yang Anda teruskan dan mengembalikan hasil ekspresi tersebut.
Kembangkan Proyek Pemrograman Keren
Anda dapat meningkatkan keterampilan coding Anda dengan mengembangkan proyek, baik Anda seorang pemula atau Anda kembali ke coding setelah beberapa waktu istirahat. Membuat aplikasi yang berfungsi penuh, bahkan yang sederhana sekalipun, dapat meningkatkan kepercayaan diri Anda.
Anda dapat mencoba banyak proyek sederhana mulai dari permainan (catur, tic-tac-toe, Rock Paper Scissors) hingga utilitas sederhana (daftar tugas, konversi berat, jam hitung mundur).
Jadikan tangan Anda kotor dengan proyek-proyek ini dan jadilah pengembang yang lebih baik.
Artikel Terkait
