Home
Belajar Web

Tutorial Membuat Web Kalkulator Part 2: Struktur Dasar HTML

Belajar membuat kalkulator digital sederhana dengan HTML. Part 2 ini membahas struktur dasar kalkulator menggunakan HTML lengkap dengan tombol angka,
Tutorial Membuat Web Kalkulator Part 2: Struktur Dasar HTML

Tutorial Membuat Web Kalkulator Part 2: Struktur Dasar HTML

Pada Part 2 ini, kita membuat struktur dasar kalkulator digital dengan HTML. Struktur ini sudah dilengkapi tombol angka, operator, clear (C), delete (DEL), dan sama dengan (=).

Apa yang Dibuat?

  • Layar kalkulator (input readonly untuk hasil perhitungan).
  • Tombol angka (0–9).
  • Tombol operator dasar (+, -, ×, ÷).
  • Tombol C untuk reset dan DEL untuk hapus 1 karakter.
  • Tombol = untuk menampilkan hasil.

Contoh Kode Struktur Dasar

Salin dan simpan kode ini sebagai index.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Digital</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <div class="buttons">
            <button onclick="clearResult()">C</button>
            <button onclick="deleteLast()">DEL</button>
            <button onclick="appendNumber('/')">/</button>
            <button onclick="appendNumber('*')">*</button>

            <button onclick="appendNumber('7')">7</button>
            <button onclick="appendNumber('8')">8</button>
            <button onclick="appendNumber('9')">9</button>
            <button onclick="appendNumber('-')">-</button>

            <button onclick="appendNumber('4')">4</button>
            <button onclick="appendNumber('5')">5</button>
            <button onclick="appendNumber('6')">6</button>
            <button onclick="appendNumber('+')">+</button>

            <button onclick="appendNumber('1')">1</button>
            <button onclick="appendNumber('2')">2</button>
            <button onclick="appendNumber('3')">3</button>
            <button id="equals" onclick="calculateResult()">=</button>

            <button onclick="appendNumber('0')" class="zero">0</button>
        </div>
    </div>
</body>
</html>

Kesimpulan

Dengan kode ini, kita sudah memiliki struktur dasar kalkulator digital. Pada Part 3 berikutnya, kita akan menambahkan CSS agar tampilannya lebih menarik dan responsif.

Baca juga: Part 1: Pengantar Membuat Kalkulator Web

Post a Comment

Send Whatsapp Query