Cara Membuat Kalkulator Sederhana dengan HTML dan CSS

By Posted on

Cara Mudah Membuat Kalkulator Sederhana dengan HTML dan CSS – Apakah Anda ingin mempelajari dasar-dasar pengembangan web sambil menciptakan sesuatu yang bermanfaat? Jika benar, Anda beada di tempat yang sangat tepat! Dalam era digital ini, memiliki pemahaman dasar tentang pembuatan situs web sangatlah berharga. Artikel ini akan membimbing Anda melalui langkah-langkah membuat kalkulator sederhana menggunakan HTML dan CSS – dua bahasa pemrograman yang mudah dipahami, bahkan bagi pemula sekalipun.

Mengembangkan keterampilan dalam pemrograman web bukanlah sesuatu yang membosankan. Bahkan, itu bisa menjadi pengalaman yang sangat memuaskan ketika Anda melihat proyek kecil seperti kalkulator sederhana ini mengambil bentuk di layar Anda. Dengan langkah-langkah yang rinci dan tutorial yang mudah diikuti, Anda akan merasakan kegembiraan ketika kalkulator Anda mulai berfungsi dengan baik.

Jadi, mari kita mulai perjalanan ini menuju pengetahuan baru dan kemampuan praktis dalam dunia pengembangan web dengan membuat kalkulator sederhana yang dapat diakses oleh siapa pun dengan menggunakan HTML dan CSS. Siapkan diri Anda untuk menjelajahi dunia kreativitas digital!

Alat yang Dibutuhkan

Berikut ini beberapa alat yang dibutuhkan untuk dapat membuat kalkulator sederhana dengan html dan css:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser) untuk menampilkan dan menjalankan kalkulator,
  • Niat yang kuat.

Cara Mudah Membuat Kalkulator Sederhana dengan HTML dan CSS

1. Buat Folder Project Kalkulator Sederhana

Pertama, buatlah folder baru di komputer Anda dan beri nama “project_kalkulator_sederhana“. Ini akan menjadi tempat Anda menyimpan semua file yang terkait dengan proyek kalkulator sederhana Anda.

2. Buat Sebuah File kalkulator_sederhana.html

Buka teks editor favorit Anda dan buat file baru dengan nama “kalkulator_sederhana.html” di dalam folder proyek Anda. Ini adalah file utama yang akan berisi kode HTML untuk kalkulator sederhana kita.

Baca Juga:  Cara Membuat Garis Horizontal di HTML

Berikut ini file html yang dapat Anda tambahkan untuk membuat kalkulator sederhana dengan html dan css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Sederhana</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="display" readonly>
        <div class="buttons">
            <button onclick="clearDisplay()">C</button>
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('+')">+</button>
            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('-')">-</button>
            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="appendToDisplay('*')">*</button>
            <button onclick="appendToDisplay('0')">0</button>
            <button onclick="appendToDisplay('.')">.</button>
            <button onclick="calculate()">=</button>
            <button onclick="appendToDisplay('/')">/</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
 

3. Buat File style.css

Kemudian, buatlah file “style.css” di dalam folder project Anda. File ini akan berisi gaya CSS untuk membuat kalkulator kita terlihat menarik.

Baca Juga:  Cara Membuat Animasi Bergerak di HTML

Berikut ini file css yang dapat Anda tambahkan untuk membuat kalkulator sederhana dengan html dan css:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

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

#display {
    width: calc(100% - 10px);
    margin-bottom: 10px;
    padding: 10px;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}

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

button {
    padding: 10px;
    font-size: 18px;
    border: none;
    background-color: #4caf50;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}
 

4. Buat File script.js

Kemudian, buat file “script.js” di dalam folder proyek Anda. File ini akan berisi kode JavaScript untuk membuat kalkulator kita berfungsi.

Berikut ini file javascipt yang dapat Anda tambahkan untuk menjalankan fungsi kalkulator:

function appendToDisplay(value) {
    document.getElementById('display').value += value;
}

function clearDisplay() {
    document.getElementById('display').value = '';
}

function calculate() {
    try {
        document.getElementById('display').value = eval(document.getElementById('display').value);
    } catch (error) {
        document.getElementById('display').value = 'Error';
    }
}
 

5. Mengubah Tampilan Kalkulator Sederhana

Sekarang, mari kita tambahkan elemen HTML dan gaya CSS ke dalam file “kalkulator_sederhana.html” untuk membuat tampilan kalkulator yang sederhana dan intuitif.

Baca Juga:  Cara Membuat Gambar Ke Samping di HTML

6. Save & View Tampilan

Simpan semua file yang telah Anda buat dan buka file “kalkulator_sederhana.html” di browser web Anda untuk melihat kalkulator sederhana yang telah Anda buat.

Preview hasil

Berikut ini preview hasil kalkulator sederhana dengan html dan css jika Anda berhasil membuatnya:

Penutup

Sekarang, setelah melalui langkah-langkah yang mendetail dan menyenangkan dalam membuat kalkulator sederhana menggunakan HTML dan CSS, Anda telah membuka pintu untuk lebih banyak pengetahuan dan pemahaman tentang pengembangan web. Meskipun proyek ini terasa sederhana, namun membangun fondasi yang kuat dalam bahasa pemrograman akan membawa Anda jauh dalam perjalanan Anda sebagai seorang pengembang web.

Ingatlah, pengembangan web adalah tentang lebih dari sekadar menulis kode. Ini adalah tentang menghadirkan ide-ide kreatif Anda ke dalam bentuk yang dapat diakses oleh jutaan pengguna di seluruh dunia. Proyek kalkulator sederhana ini adalah awal yang hebat untuk menjelajahi potensi Anda dalam menciptakan pengalaman digital yang menarik dan bermanfaat.

Jangan ragu untuk terus mengembangkan keterampilan Anda dengan eksperimen, pembelajaran, dan berbagi pengetahuan dengan komunitas pengembang web. Selamat berkreasi, dan semoga kalkulator sederhana yang Anda buat hari ini menjadi langkah awal menuju pencapaian yang lebih besar dalam dunia pengembangan web.

Terima kasih telah menyempatkan waktu untuk membaca panduan ini. Kami harap artikel ini telah memberikan wawasan yang berharga dan menginspirasi Anda untuk terus menjelajahi dunia yang menarik dari pengembangan web.

Related posts: