Calculator Html Css Javascript Github

MUAZHAN

7 min read

·

Jun 22, 2024

37

Share

Membangun Kalkulator Sederhana dengan HTML, CSS, dan JavaScript

Artikel ini akan memandu Anda melalui proses membangun kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Anda akan mempelajari cara membuat antarmuka pengguna (UI) yang interaktif dan fungsional.

1. Struktur HTML

Pertama, kita buat struktur dasar HTML untuk kalkulator kita. Buat file HTML baru (misalnya, calculator.html) dan tambahkan kode berikut:

  
  


  

    

    

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

  

Kode ini membuat struktur dasar kalkulator, termasuk:

• calculator: Container utama untuk kalkulator.
• display: Area untuk menampilkan hasil perhitungan.
• buttons: Container untuk tombol-tombol kalkulator.
• operator: Tombol untuk operasi matematika.
• number: Tombol untuk angka.
• clear: Tombol untuk menghapus input.

2. Styling CSS

Selanjutnya, kita tambahkan gaya CSS untuk membuat tampilan kalkulator lebih menarik. Buat file CSS baru (misalnya, style.css) dan masukkan kode berikut:

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
}

.calculator {
  width: 300px;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

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

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

button {
  padding: 10px;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #ddd;
}

.operator {
  background-color: #ff9900;
  color: white;
}

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

.number {
  background-color: #eee;
}

Kode CSS ini mengatur tampilan kalkulator, termasuk warna, ukuran, jarak, dan gaya tombol.

3. Logika JavaScript

Terakhir, kita tambahkan logika JavaScript untuk membuat kalkulator berfungsi. Buat file JavaScript baru (misalnya, script.js) dan masukkan kode berikut:

const display = document.querySelector(".display");
const buttons = document.querySelectorAll("button");

let currentInput = "";
let previousOperator = "";
let previousOperand = "";

buttons.forEach(button => {
  button.addEventListener("click", () => {
    const buttonValue = button.dataset.number || button.dataset.operator || button.dataset.clear;

    if (buttonValue === "=") {
      calculateResult();
    } else if (buttonValue === "C") {
      clearDisplay();
    } else {
      updateDisplay(buttonValue);
    }
  });
});

function updateDisplay(value) {
  currentInput += value;
  display.textContent = currentInput;
}

function calculateResult() {
  const operands = currentInput.split(previousOperator);
  const num1 = parseFloat(operands[0]);
  const num2 = parseFloat(operands[1]);

  switch (previousOperator) {
    case "+":
      display.textContent = num1 + num2;
      break;
    case "-":
      display.textContent = num1 - num2;
      break;
    case "*":
      display.textContent = num1 * num2;
      break;
    case "/":
      if (num2 === 0) {
        display.textContent = "Error";
      } else {
        display.textContent = num1 / num2;
      }
      break;
  }

  currentInput = display.textContent;
  previousOperand = "";
  previousOperator = "";
}

function clearDisplay() {
  currentInput = "";
  previousOperator = "";
  previousOperand = "";
  display.textContent = "";
}

Kode JavaScript ini mengendalikan interaksi pengguna dengan kalkulator:

• updateDisplay: Menambahkan nilai tombol ke currentInput dan menampilkannya di layar.
• calculateResult: Menghitung hasil berdasarkan operator dan operand.
• clearDisplay: Menghapus semua input dan hasil.

4. Pengujian dan Penyelesaian

Sekarang, buka calculator.html di browser Anda. Anda akan melihat kalkulator sederhana yang dapat Anda gunakan untuk melakukan perhitungan dasar.

Anda dapat memodifikasi kode ini untuk menambahkan fitur tambahan, seperti:

• Sejarah Perhitungan: Menyimpan perhitungan sebelumnya.
• Operasi Lebih Lanjut: Menambahkan operasi seperti pangkat, akar kuadrat, dan lain-lain.
• Desain yang Lebih Baik: Menambahkan tema dan gaya yang lebih menarik.

5. Repository GitHub

Anda dapat menemukan contoh kode lengkap di GitHub. [Link ke repository GitHub]

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat membangun kalkulator sederhana dengan HTML, CSS, dan JavaScript. Anda dapat menggunakan kode ini sebagai dasar untuk mengembangkan kalkulator yang lebih canggih dengan fitur dan fungsionalitas tambahan.