Calculator Using Html Css And Javascript W3schools

MUAZHAN

7 min read

·

Jun 24, 2024

50

Share

Membuat Kalkulator Sederhana dengan HTML, CSS, dan JavaScript

Artikel ini akan memandu Anda dalam membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Kita akan membangun kalkulator yang dapat melakukan operasi dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian.

1. Struktur HTML

Pertama, kita perlu membuat struktur HTML untuk kalkulator kita. Struktur ini akan mencakup tombol-tombol angka, operator, dan layar untuk menampilkan hasil. Berikut kode HTML-nya:

  
  



  

    

    

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

  

Kode ini akan membuat kalkulator dengan tampilan sederhana, dengan tombol-tombol angka, operator, layar untuk menampilkan hasil, dan tombol clear.

2. Gaya CSS

Selanjutnya, kita akan menambahkan gaya dengan CSS untuk memberikan tampilan yang lebih menarik pada kalkulator. Berikut kode CSS-nya:

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

.calculator {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

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

button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

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

.number {
  background-color: #eee;
}

.clear {
  background-color: #ccc;
}

button:hover {
  opacity: 0.9;
}

Kode CSS ini akan memberikan gaya untuk kalkulator seperti warna, ukuran font, dan penempatan tombol.

3. Logika JavaScript

Terakhir, kita akan menambahkan JavaScript untuk membuat kalkulator berfungsi. Berikut kode JavaScript-nya:

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

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

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 = 0;

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

  display.textContent = result;
}

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

Kode JavaScript ini akan menangani fungsi-fungsi seperti penambahan angka, operator, perhitungan, dan clear.

4. Gabungkan Kode

Sekarang, Anda dapat menggabungkan kode HTML, CSS, dan JavaScript untuk membuat kalkulator sederhana yang berfungsi. Simpan kode HTML sebagai "index.html", kode CSS sebagai "style.css", dan kode JavaScript sebagai "script.js". Anda dapat membuka file "index.html" di browser untuk melihat kalkulator Anda.

5. Penjelasan Kode

• HTML:

  • Kode HTML mendefinisikan struktur dasar kalkulator, termasuk tombol-tombol angka, operator, dan layar.
  • Atribut onclick pada tombol-tombol akan memanggil fungsi JavaScript yang sesuai saat tombol ditekan.

• CSS:

  • Kode CSS memberikan gaya untuk kalkulator, seperti warna, ukuran font, dan penempatan tombol.

• JavaScript:

  • Kode JavaScript mendefinisikan fungsi-fungsi untuk menangani logika kalkulator.
  • Fungsi appendNumber menambahkan angka ke layar.
  • Fungsi appendOperator menambahkan operator ke layar dan menyimpan operator dan operand sebelumnya.
  • Fungsi calculate melakukan perhitungan berdasarkan operator dan operand yang dipilih.
  • Fungsi clearDisplay membersihkan layar dan mengatur ulang variabel.

6. Eksplorasi Lebih Lanjut

Anda dapat memperluas kalkulator ini dengan menambahkan fitur-fitur lainnya seperti:

• Riwayat operasi: Menampilkan daftar operasi yang telah dilakukan.
• Tombol akar kuadrat: Untuk menghitung akar kuadrat dari angka.
• Tombol persen: Untuk menghitung persentase dari angka.
• Tombol negasi: Untuk mengubah tanda angka.

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Anda dapat menggunakan kode ini sebagai dasar untuk membangun kalkulator yang lebih kompleks dan fitur-fiturnya. Selamat bereksperimen!