Source Code

Konversi Desimal ke Biner HTML CSS & JavaScript

Mandan Koding25 September 20220

Dalam tutorial kali ini kita akan berbagi Source Code tentang Cara Konversi Desimal ke Biner Dengan HTML CSS & JavaScript, di sini kita sekedar berbagi saja, jadi teman-teman bisa menyalin kode di bawah ini jika ingin mencoba di browser teman-taman.

Tentang bilangan Desimal dan Biner biasanya seorang programmer tidak akan asing lagi mendengar dua bilangan tersebut, sebenarnya masih ada bilangan lain selain dua bilangan tersebut, seperti bilangan Oktal dan Hexadesimal, untuk lebih jelasnya nanti kami akan coba membuat satu artikel untuk membahas ke empat bilangan tersebut:

Sekarang kita langsung saja ke kodenya, pertama yang perlu kamnu lakukan adalah membuat file dengan nama index.html, style.css dan app.js dan salin kode di bawah ini:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mandan Koding</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
        <h2>Decimal Binary Converte</h2>
        <div class="wrapper">
            <div>
                <label for="">Decimal</label>
                <input type="number" id="dec-inp">
            </div>
            <div>
                <label for="">Binary</label>
                <input type="number" id="bin-inp">
            </div>
        </div>
    </div>

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

</html>

style.css

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Georgia", sans-serif;
}

body {
    background-color: #ff3838;
}

.container {
    background-color: #ffffff;
    width: 80vmin;
    max-width: 37.5em;
    padding: 3em 2.5em;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 0.62em;
    box-shadow: 0 1.2em 2.5em rgba(0, 21, 44, 0.18);
}

h2 {
    color: #ff3838;
    text-align: center;
    font-weight: 600;
    letter-spacing: 05px;
    margin-bottom: 1.3em;
}

.wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1.8em;
}

label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 500;
    color: #000;
}

input {
    position: relative;
    font-size: 1.1em;
    width: 100%;
    padding: 0.5em;
    border-radius: 0.2em;
    border: 1.5px solid #43405c;
    color: #43405c;
    outline: none;
}

input:focus {
    border-color: #0075ff;
}

Selain HTML dan CSS kita juga memerlukan JavaScript yang mana kita akan membuat suatu fungsi yang menkonversikan bilangan Desimal ke Bilangan Biner.

app.js

let decInp = document.getElementById("dec-inp");
let binInp = document.getElementById("bin-inp");

decInp.addEventListener("input", () => {
    let decValue = parseInt(decInp.value);
    binInp.value = decValue.toString(2);
});

binInp.addEventListener("input", () => {

    let binValue = binInp.value;
    if (binValidator(binValue)) {
        decInp.value = parseInt(binValue, 2);
    }

    function binValidator(num) {
        for (let i = 0; i < num.length; i++) {
            if (num[i] != "0" && num[i] != "1") {
                return false;
            }
        }
        return true;
    }

})

Dari kode JavaScript di atas kita memakai beberapa method seperti method toString yang berfungsi untuk merubah nilai type data menjadi type data string, serta method parseInt yang berfungsi untuk mengubah String menjadi Integer atau mengubah kebilangan bulat. Dan FOR yang berfungsi untuk perulangan, untuk lebih jelasnya silahkan langsung jalan kan di browser kamu, jika sudah menyalin kode di atas.

Jika berhasil akan muncul seperti gambar di bawah:

Semoga bermanfaat🙏🙏🎉🎉🎉