Membuat Kalkulator Sederhana Menggunakan Chrome

Membuat Kalkulator Sederhana Menggunakan Chrome adalah proyek yang menarik untuk mempelajari dasar-dasar pemrograman web. Proyek ini melibatkan penggunaan HTML untuk membangun antarmuka, CSS untuk menata tampilan, dan JavaScript untuk menambahkan fungsionalitas interaktif.

Kalkulator sederhana ini akan memungkinkan pengguna untuk melakukan operasi aritmatika dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian. Langkah demi langkah, kita akan membangun kalkulator ini, mulai dari desain antarmuka hingga penanganan input yang salah.

Membangun Antarmuka Kalkulator Sederhana: Kalkulator Sederhana Menggunakan Chrome

Membangun kalkulator sederhana menggunakan Chrome melibatkan kombinasi HTML untuk struktur, CSS untuk gaya, dan JavaScript untuk fungsionalitas. Berikut adalah langkah-langkah untuk membangun antarmuka kalkulator sederhana:

Membuat Desain Antarmuka

Langkah pertama adalah mendesain struktur dasar kalkulator menggunakan HTML. Anda perlu membuat elemen-elemen seperti tombol angka (0-9), tombol operator (+, -,
-, /), dan layar tampilan untuk menampilkan hasil perhitungan.

• Buatlah sebuah elemen `div` sebagai wadah utama kalkulator.
• Di dalam wadah, buatlah elemen `div` lain untuk layar tampilan. Anda dapat menggunakan elemen `input` dengan atribut `type=”text”` untuk ini.
• Selanjutnya, buatlah elemen `div` untuk tombol-tombol angka dan operator. Anda dapat menggunakan elemen `button` untuk masing-masing tombol.

Menentukan Gaya Tampilan

Setelah struktur HTML dibuat, langkah selanjutnya adalah menata tampilan kalkulator menggunakan CSS. Anda dapat menggunakan CSS untuk menentukan:

• Ukuran dan posisi elemen kalkulator.
• Warna latar belakang dan teks untuk setiap elemen.
• Gaya tombol, seperti warna, bentuk, dan ukuran.
• Gaya layar tampilan, seperti font, warna teks, dan ukuran.

Menambahkan Event Listener

Untuk membuat kalkulator berfungsi, Anda perlu menambahkan event listener pada setiap tombol menggunakan JavaScript. Event listener akan mendeteksi ketika tombol diklik dan menjalankan kode yang sesuai.

• Tambahkan event listener `onclick` pada setiap tombol angka.
• Ketika tombol angka diklik, event listener akan menambahkan angka tersebut ke layar tampilan.
• Tambahkan event listener `onclick` pada tombol operator.
• Ketika tombol operator diklik, event listener akan menyimpan operator dan angka pertama, kemudian membersihkan layar tampilan.

Menambahkan Fungsi Perhitungan

Setelah event listener ditambahkan, Anda perlu menambahkan fungsi JavaScript untuk melakukan perhitungan. Fungsi ini akan mengambil angka pertama, operator, dan angka kedua dari layar tampilan, kemudian melakukan perhitungan yang sesuai dan menampilkan hasilnya di layar.

Contoh Kode

Berikut adalah contoh kode HTML, CSS, dan JavaScript untuk membuat kalkulator sederhana:

HTML


<div id="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button onclick="appendOperator('+')">+</button>
</div>
<div class="buttons">
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button onclick="appendOperator('-')">-</button>
</div>
<div class="buttons">
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button onclick="appendOperator('*')">*</button>
</div>
<div class="buttons">
<button onclick="appendNumber('0')">0</button>
<button onclick="appendNumber('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendOperator('/')">/</button>
</div>
</div>


CSS


#calculator
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;

#display
width: 100%;
height: 40px;
font-size: 20px;
padding: 5px;
margin-bottom: 10px;

.buttons button
width: 50px;
height: 40px;
margin: 5px;
font-size: 18px;
cursor: pointer;

 

JavaScript


let display = document.getElementById('display');
let num1 = null;
let operator = null;

Telusuri implementasi menampilkan hibernate di start menu dalam situasi dunia nyata untuk memahami aplikasinya.

function appendNumber(num)
display.value += num;

function appendOperator(op)
num1 = parseFloat(display.value);
operator = op;
display.value = ”;

function calculate()
let num2 = parseFloat(display.value);
let result = 0;

switch (operator)
case ‘+’:
result = num1 + num2;
break;
case ‘-‘:
result = num1 – num2;
break;
case ‘*’:
result = num1
– num2;
break;
case ‘/’:
result = num1 / num2;
break;

display.value = result;

Peroleh akses cara merekam suara yang keluar dari pc ke bahan spesial yang lainnya.

 

Menangani Operasi Aritmatika

Pada kalkulator sederhana, kita perlu mengimplementasikan operasi aritmatika dasar, seperti penjumlahan, pengurangan, perkalian, dan pembagian. JavaScript menyediakan operator aritmatika yang memungkinkan kita untuk melakukan operasi ini dengan mudah.

Operator Aritmatika

Operator aritmatika dalam JavaScript digunakan untuk melakukan operasi matematika pada nilai numerik. Berikut adalah tabel yang menunjukkan contoh penggunaan operator aritmatika:

Menyimpan Nilai Input dan Hasil Operasi

Untuk menyimpan nilai input dari pengguna dan hasil operasi, kita dapat menggunakan variabel JavaScript. Variabel adalah wadah yang dapat menyimpan data. Dalam kalkulator sederhana, kita dapat menggunakan variabel untuk menyimpan nilai yang dimasukkan pengguna dan hasil operasi.

Contoh Kode JavaScript

Berikut adalah contoh kode JavaScript yang menunjukkan bagaimana kalkulator Anda memproses operasi aritmatika:

// Mendapatkan nilai input dari pengguna let num1 = parseFloat(document.getElementById("input1").value); let num2 = parseFloat(document.getElementById("input2").value); // Menentukan operasi yang dipilih let operator = document.getElementById("operator").value; // Melakukan operasi aritmatika let result; if (operator === "+") result = num1 + num2; else if (operator === "-") result = num1 - num2; else if (operator === "*") result = num1 - num2; else if (operator === "/") result = num1 / num2; // Menampilkan hasil document.getElementById("result").innerHTML = result;

Kode ini pertama-tama mengambil nilai input dari pengguna dan menyimpannya dalam variabel num1 dan num2. Kemudian, kode tersebut menentukan operasi yang dipilih pengguna dan menyimpannya dalam variabel operator. Selanjutnya, kode tersebut melakukan operasi aritmatika yang sesuai dan menyimpan hasilnya dalam variabel result. Terakhir, kode tersebut menampilkan hasil operasi dalam elemen HTML dengan id result.

Implementasi Fungsi Kalkulator

Setelah desain antarmuka kalkulator sederhana selesai, langkah selanjutnya adalah mengimplementasikan fungsi kalkulator yang akan memproses operasi aritmatika yang dipilih pengguna. Fungsi ini akan menerima input dari pengguna, melakukan operasi yang dipilih, dan menampilkan hasilnya.

Fungsi JavaScript untuk Operasi Aritmatika

Untuk mengimplementasikan fungsi kalkulator, kita perlu membuat fungsi JavaScript yang akan mengeksekusi operasi aritmatika yang dipilih pengguna. Fungsi-fungsi ini akan menerima dua angka sebagai input dan mengembalikan hasil operasi.

Menghubungkan Fungsi dengan Event Listener

Setelah fungsi JavaScript untuk operasi aritmatika dibuat, kita perlu menghubungkan fungsi-fungsi ini dengan event listener pada tombol operator. Event listener akan memicu fungsi yang sesuai ketika tombol operator diklik. Berikut adalah contoh bagaimana menghubungkan fungsi dengan event listener:

• Untuk tombol penjumlahan, event listener akan memicu fungsi tambah().
• Untuk tombol pengurangan, event listener akan memicu fungsi kurang().
• Untuk tombol perkalian, event listener akan memicu fungsi kali().
• Untuk tombol pembagian, event listener akan memicu fungsi bagi().

Contoh Kode JavaScript

Berikut adalah contoh kode JavaScript yang menunjukkan bagaimana fungsi kalkulator dijalankan:

// Fungsi untuk operasi aritmatikafunction tambah(a, b) return a + b; function kurang(a, b) return a - b; function kali(a, b) return a - b; function bagi(a, b) return a / b; // Mendapatkan input dari penggunalet angka1 = parseFloat(document.getElementById("angka1").value);let angka2 = parseFloat(document.getElementById("angka2").value);// Menentukan operasi yang dipilihlet operasi = document.getElementById("operator").value;// Memanggil fungsi yang sesuai dengan operasi yang dipilihlet hasil;if (operasi === "+") hasil = tambah(angka1, angka2); else if (operasi === "-") hasil = kurang(angka1, angka2); else if (operasi === "*") hasil = kali(angka1, angka2); else if (operasi === "/") hasil = bagi(angka1, angka2);// Menampilkan hasildocument.getElementById("hasil").value = hasil;

Kode ini menunjukkan bagaimana fungsi kalkulator dijalankan. Pertama, input dari pengguna diambil dan diubah menjadi angka menggunakan parseFloat(). Kemudian, operasi yang dipilih diidentifikasi dan fungsi yang sesuai dipanggil. Terakhir, hasil operasi ditampilkan di elemen HTML dengan ID “hasil”.

Menampilkan Hasil

Setelah operasi aritmatika selesai dijalankan, hasil perhitungan perlu ditampilkan pada layar kalkulator. Hal ini memungkinkan pengguna untuk melihat hasil operasi yang telah dilakukan. Pada kalkulator sederhana yang kita buat, kita akan menggunakan elemen HTML yang disebut <div> untuk menampilkan hasil operasi.

Menampilkan Hasil Operasi

Untuk menampilkan hasil operasi, kita perlu menggunakan kode JavaScript. Kode JavaScript ini akan mengambil nilai hasil operasi dari variabel yang telah didefinisikan sebelumnya dan kemudian menampilkannya pada elemen <div> yang telah kita siapkan.

Berikut adalah contoh kode JavaScript yang menunjukkan bagaimana hasil ditampilkan setelah operasi aritmatika selesai:

// Variabel untuk menyimpan hasil operasi
let hasil = 0;

// Fungsi untuk menampilkan hasil operasi
function tampilkanHasil() 
  // Mengambil elemen HTML dengan ID "hasil"
  const hasilElement = document.getElementById("hasil");
  // Menampilkan hasil operasi pada elemen HTML
  hasilElement.textContent = hasil;


// Contoh operasi aritmatika
hasil = 5 + 3;

// Menampilkan hasil operasi
tampilkanHasil();

Kode JavaScript di atas mendefinisikan variabel hasil untuk menyimpan hasil operasi. Kemudian, fungsi tampilkanHasil() mengambil elemen HTML dengan ID “hasil” dan menetapkan nilai hasil ke properti textContent elemen tersebut. Dengan cara ini, hasil operasi akan ditampilkan pada layar kalkulator.

Ilustrasi Tampilan Kalkulator

Berikut ilustrasi tampilan kalkulator sederhana dengan hasil yang ditampilkan pada layar:

Pada ilustrasi di atas, layar kalkulator menampilkan hasil operasi “8” yang merupakan hasil dari operasi aritmatika 5 + 3. Hasil operasi ditampilkan pada elemen <div> yang telah didefinisikan sebelumnya dan diberi ID “hasil”.

Menangani Input yang Salah

Kalkulator sederhana yang kita bangun perlu dapat menangani input yang salah dari pengguna. Misalnya, pembagian dengan nol atau input yang tidak valid, seperti huruf atau karakter khusus. Jika kalkulator tidak dapat menangani input yang salah, maka kalkulator tersebut akan mengalami kesalahan dan mungkin berhenti bekerja. Untuk mencegah hal ini, kita perlu menambahkan kode untuk menangani input yang salah.

Mendeteksi Input yang Salah, Kalkulator sederhana menggunakan chrome

Langkah pertama dalam menangani input yang salah adalah mendeteksi input tersebut. Kita dapat melakukan ini dengan menggunakan pernyataan `if` untuk memeriksa apakah input tersebut valid. Misalnya, kita dapat memeriksa apakah input tersebut adalah angka atau apakah input tersebut adalah nol untuk pembagian.

Menampilkan Pesan Kesalahan

Jika kalkulator mendeteksi input yang salah, maka kalkulator perlu menampilkan pesan kesalahan kepada pengguna. Pesan kesalahan ini harus jelas dan mudah dipahami oleh pengguna, sehingga pengguna dapat memahami apa yang salah dan bagaimana memperbaikinya.

Contoh Kode JavaScript

Berikut adalah contoh kode JavaScript yang menunjukkan bagaimana kalkulator menangani input yang salah:

function hitung() 
  let angka1 = parseFloat(document.getElementById("angka1").value);
  let angka2 = parseFloat(document.getElementById("angka2").value);
  let operator = document.getElementById("operator").value;
  let hasil;

  if (isNaN(angka1) || isNaN(angka2)) 
    alert("Masukkan angka yang valid!");
    return;
  

  if (operator === "/" && angka2 === 0) 
    alert("Tidak dapat membagi dengan nol!");
    return;
  

  switch (operator) 
    case "+":
      hasil = angka1 + angka2;
      break;
    case "-":
      hasil = angka1 - angka2;
      break;
    case "*":
      hasil = angka1
- angka2;
      break;
    case "/":
      hasil = angka1 / angka2;
      break;
  

  document.getElementById("hasil").value = hasil;

Kode ini pertama-tama mengambil nilai dari input angka dan operator. Kemudian, kode ini memeriksa apakah input tersebut adalah angka yang valid menggunakan fungsi `isNaN()`. Jika input bukan angka yang valid, maka kode ini menampilkan pesan kesalahan dan keluar dari fungsi. Kode ini juga memeriksa apakah operator adalah pembagian dan apakah angka kedua adalah nol. Jika ya, maka kode ini menampilkan pesan kesalahan dan keluar dari fungsi.

Jika input valid, maka kode ini melakukan operasi matematika dan menampilkan hasilnya.

Ilustrasi Tampilan Kalkulator

Berikut adalah ilustrasi tampilan kalkulator dengan pesan kesalahan yang ditampilkan pada layar:

Ketika pengguna memasukkan input yang salah, misalnya angka kedua adalah nol untuk pembagian, maka kalkulator akan menampilkan pesan kesalahan seperti “Tidak dapat membagi dengan nol!” di bagian hasil.

Dengan mengikuti langkah-langkah yang telah dijelaskan, Anda dapat membuat kalkulator sederhana yang fungsional menggunakan Chrome. Anda dapat memperluas proyek ini dengan menambahkan fitur-fitur tambahan seperti operasi trigonometri, fungsi logaritma, atau bahkan tema yang berbeda.