Kode HTML Kalkulator Sederhan
Pendahuluan: Kalkulator sederhana adalah alat yang bermanfaat untuk melakukan perhitungan dasar dengan mudah. Dalam artikel ini, kita akan melihat kode HTML yang dapat digunakan untuk membuat kalkulator sederhana. Bagian: ① Bagian pertama: Mengatur struktur HTML dasar Berikut adalah kode HTML dasar yang dapat digunakan untuk membuat struktur dasar kalkulator sederhana: ```html <!DOCTYPE html > <html > <head > <title >Kalkulator Sederhana </title > </head > <body > <h1 >Kalkulator Sederhana </h1 > <form > <input type="text" id="input1" placeholder="Angka 1" > <input type="text" id="input2" placeholder="Angka 2" > <button type="button" onclick="calculate()" >Hitung </button > <p id="result" > </p > </form > </body > </html > ``` ② Bagian kedua: Menambahkan fungsi perhitungan Berikut adalah kode JavaScript yang dapat digunakan untuk menambahkan fungsi perhitungan pada kalkulator sederhana: ```html <script > function calculate() { var input1 = parseInt(document.getElementById('input1').value); var input2 = parseInt(document.getElementById('input2').value); var result = input1 + input2; document.getElementById('result').innerHTML = "Hasil: " + result; } </script > ``` ③ Bagian ketiga: Menambahkan gaya CSS Berikut adalah kode CSS yang dapat digunakan untuk memperindah tampilan kalkulator sederhana: ```html <style > h1 { text-align: center; } form { text-align: center; } input, button { margin: 5px; } #result { font-weight: bold; } </style > ``` Kesimpulan: Dengan menggunakan kode HTML, JavaScript, dan CSS yang tepat, kita dapat membuat kalkulator sederhana yang dapat melakukan perhitungan dasar. Dalam artikel ini, kita melihat bagaimana struktur dasar HTML kalkulator dapat dibuat, bagaimana menambahkan fungsi perhitungan menggunakan JavaScript, dan bagaimana memperindah tampilan menggunakan CSS.