Calculator Html Css Javascript

MUAZHAN

5 min read

·

Jun 22, 2024

30

Share

Membangun Kalkulator Sederhana dengan HTML, CSS, dan JavaScript

Artikel ini akan memandu Anda dalam membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Anda akan belajar cara membuat antarmuka pengguna, menangani input pengguna, dan melakukan operasi matematika dasar.

1. HTML (Struktur):

Pertama, kita akan membuat struktur dasar kalkulator dengan HTML:

    
    


    

        

        

            +
            -
            *
            /
            7
            8
            9
            =
            4
            5
            6
            C
            1
            2
            3
            0
            .
        
    
    

Kode ini membuat sebuah container (<div class="calculator">) yang berisi:

• Display: div dengan kelas display untuk menampilkan input dan hasil.
• Buttons: div dengan kelas buttons untuk tombol-tombol angka, operator, dan fungsi.

2. CSS (Gaya):

Selanjutnya, kita akan menata tampilan kalkulator dengan CSS (dalam file style.css):

.calculator {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

.display {
  background-color: #eee;
  padding: 10px;
  text-align: right;
  font-size: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.number, .operator, .clear {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
}

.operator {
  background-color: #eee;
}

.clear {
  background-color: #f00;
  color: white;
}

Kode ini mengatur lebar, margin, border, padding, dan warna dari kalkulator, display, dan tombol-tombolnya.

3. JavaScript (Logika):

Terakhir, kita akan menulis kode JavaScript (dalam file script.js) untuk membuat kalkulator berfungsi:

let display = document.querySelector('.display');
let previousOperator = null;
let previousOperand = null;

function appendNumber(num) {
  display.textContent += num;
}

function appendOperator(operator) {
  previousOperator = operator;
  previousOperand = parseFloat(display.textContent);
  display.textContent += operator;
}

function calculate() {
  let currentOperand = parseFloat(display.textContent.substring(display.textContent.lastIndexOf(previousOperator) + 1));
  let result;

  switch (previousOperator) {
    case '+':
      result = previousOperand + currentOperand;
      break;
    case '-':
      result = previousOperand - currentOperand;
      break;
    case '*':
      result = previousOperand * currentOperand;
      break;
    case '/':
      result = previousOperand / currentOperand;
      break;
  }

  display.textContent = result;
}

function clearDisplay() {
  display.textContent = '';
  previousOperator = null;
  previousOperand = null;
}

Kode ini melakukan hal berikut:

• Mendapatkan elemen display dan mendeklarasikan variabel untuk menyimpan operator dan operand sebelumnya.
• appendNumber(): Menambahkan angka yang diklik ke display.
• appendOperator(): Menyimpan operator dan operand sebelumnya, lalu menambahkan operator ke display.
• calculate(): Memproses operasi matematika berdasarkan operator yang dipilih dan menampilkan hasilnya.
• clearDisplay(): Mengosongkan display dan mereset variabel.

Kesimpulan

Dengan HTML, CSS, dan JavaScript, Anda dapat membuat kalkulator sederhana yang dapat melakukan operasi matematika dasar. Anda dapat memperluas fungsionalitas kalkulator ini dengan menambahkan fitur-fitur lain, seperti operasi trigonometri, kalkulasi akar pangkat dua, dan lain sebagainya. Selamat mencoba!