Scientific Calculator Code In Html Css Javascript

Scientific Calculator Code In Html Css Javascript

6 min read Jun 18, 2024
Scientific Calculator Code In Html Css Javascript

Membangun Kalkulator Ilmiah dengan HTML, CSS, dan JavaScript

Artikel ini akan memandu Anda melalui proses membangun kalkulator ilmiah sederhana menggunakan HTML, CSS, dan JavaScript. Meskipun kalkulator ini tidak memiliki semua fitur yang dimiliki kalkulator ilmiah profesional, ini akan mengajarkan Anda dasar-dasar pengembangan web dan beberapa teknik pemrograman JavaScript.

1. Struktur HTML (index.html)

Pertama, kita akan membuat struktur HTML dasar untuk kalkulator kita.




  Kalkulator Ilmiah
  


  

Dalam kode ini:

  • <div class="calculator">: Ini adalah kontainer utama untuk kalkulator.
  • <div class="display">: Ini adalah area di mana hasil perhitungan akan ditampilkan.
  • <div class="buttons">: Ini adalah kontainer untuk tombol-tombol kalkulator.
  • <script src="script.js">: Ini menghubungkan file JavaScript yang akan berisi logika kalkulator.

2. Styling CSS (style.css)

Sekarang, mari kita tambahkan beberapa gaya dasar untuk kalkulator menggunakan CSS.

.calculator {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #888888;
}

.display {
  background-color: #f0f0f0;
  padding: 10px;
  font-size: 18px;
  text-align: right;
}

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

.button {
  background-color: #eee;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
}

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

Kode CSS ini mendefinisikan gaya untuk kontainer kalkulator, tampilan, dan tombol-tombol. Anda dapat menyesuaikan gaya ini sesuai keinginan.

3. Logika JavaScript (script.js)

Bagian yang paling menarik adalah JavaScript. Di sini, kita akan menulis kode yang akan menangani interaksi pengguna dan melakukan perhitungan.

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.textContent;

    if (buttonValue >= '0' && buttonValue <= '9') {
      currentInput += buttonValue;
    } else if (buttonValue === '+' || buttonValue === '-' || buttonValue === '*' || buttonValue === '/') {
      previousOperator = buttonValue;
      previousOperand = currentInput;
      currentInput = '';
    } else if (buttonValue === '=') {
      calculate();
    } else if (buttonValue === 'C') {
      currentInput = '';
      previousOperator = '';
      previousOperand = '';
      display.textContent = '';
    }

    display.textContent = currentInput;
  });
});

function calculate() {
  let result;
  switch (previousOperator) {
    case '+':
      result = parseFloat(previousOperand) + parseFloat(currentInput);
      break;
    case '-':
      result = parseFloat(previousOperand) - parseFloat(currentInput);
      break;
    case '*':
      result = parseFloat(previousOperand) * parseFloat(currentInput);
      break;
    case '/':
      result = parseFloat(previousOperand) / parseFloat(currentInput);
      break;
  }
  currentInput = result.toString();
  display.textContent = result;
}

Kode JavaScript ini:

  • Mendapatkan referensi ke elemen tampilan dan tombol.
  • Mendefinisikan variabel untuk menyimpan input saat ini, operator sebelumnya, dan operand sebelumnya.
  • Menambahkan event listener ke setiap tombol untuk menangani klik.
  • Memeriksa nilai tombol dan melakukan tindakan yang sesuai:
    • Menambahkan angka ke input saat ini.
    • Menyimpan operator dan operand sebelumnya ketika operator di klik.
    • Melakukan perhitungan ketika tombol '=' di klik.
    • Menghapus semua input ketika tombol 'C' di klik.
  • Fungsi calculate() melakukan operasi aritmatika berdasarkan operator dan operand yang disimpan.

4. Menyelesaikan dengan Tombol

Terakhir, kita perlu menambahkan tombol-tombol ke dalam kontainer buttons di file HTML kita. Anda dapat menambahkan tombol-tombol yang Anda inginkan, tetapi berikut adalah contoh untuk kalkulator ilmiah sederhana:

Sekarang, Anda telah membuat kalkulator ilmiah sederhana dengan HTML, CSS, dan JavaScript. Anda dapat mengembangkannya lebih lanjut dengan menambahkan fitur-fitur tambahan seperti operasi trigonometri, logaritma, dan sebagainya.

Ingatlah, ini hanyalah contoh dasar. Anda dapat menyesuaikan kode ini dan menambahkan fitur-fitur lain untuk membangun kalkulator ilmiah yang lebih lengkap. Selamat mencoba!

Related Post