Halo temen-temen, kembali lagi dengan saya. Konten pada artikel kali ini masih seputar kalkulator menggunakan HTML, CSS dan JavaScript yang berfungsi sebagai kalkulator Converter Decimal, Octal, Hexadecimal, Binary secara realtime serta sudah memiliki fitur tampilan responsive.

Di sini untuk text editornya saya menggunakan Visual Studio Code serta Firefox sebagai browsernya.

Untuk temen-temen yang kepo tentang konfigurasi dan extensi VS Code yang saya pakai silakan klik sitasi di bawah ini.

Full Konfigurasi & Ekstensi VS Code Saya
Tampilan Kalkulator Converter

Berikut untuk script lengkapnya dan jika ada yang belum jelas bisa menonton videonya di atas.

index.html

/index.html
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Kalkulator Converter Decimal, Octal, Hexadecimal, Binary #3</title>

    <link rel="stylesheet" href="assets/css/style.css">
  </head>
  <body>
    <div class="container">
      <h1>CONVERTER</h1>
      <div class="form-group">
        <label class="control-label">DEC</label>
        <div class="control-input">
          <input
            type="text"
            id="inp-dec"
            class="form-control"
            onkeyup="execDec()"
          />
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">OCT</label>
        <div class="control-input">
          <input
            type="text"
            id="inp-oct"
            class="form-control"
            onkeyup="execOct()"
          />
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">HEX</label>
        <div class="control-input">
          <input
            type="text"
            id="inp-hex"
            class="form-control"
            onkeyup="execHex()"
          />
        </div>
      </div>
      <div class="form-group">
        <label class="control-label">BIN</label>
        <div class="control-input">
          <input
            type="text"
            id="inp-bin"
            class="form-control"
            onkeyup="execBin()"
          />
        </div>
      </div>
    </div>

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

style.css

/assets/css/style.css
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: "Courier New", Courier, monospace;
  background: url("../images/bg.jpg");
  background-size: cover;
  height: 100vh;
  background-position: top center;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: rgba(43, 30, 14, 0.7);
  width: 90%;
  max-width: 600px;
  border-radius: 20px;
  border-bottom: 20px solid rgba(255, 255, 255, 0.7);
  padding: 40px;
  -webkit-box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
}

.container > h1 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  color: #fff;
  border-bottom: 4px solid rgba(255, 255, 255, 0.7);
}

.form-group {
  padding: 24px 0;
}

.form-group .control-label {
  position: relative;
  float: left;
  width: 15%;
  padding-top: 8px;
  padding-right: 16px;
  margin-bottom: 0;
  text-align: right;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}

.form-group .control-input {
  position: relative;
  float: left;
  width: 85%;
}

.form-group .form-control {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 6px 12px;
  font-size: 14px;
  color: #212121;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

.form-group .form-control:focus {
  border-color: #d33131;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(211, 49, 49, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(211, 49, 49, 0.6);
}

@media (max-width: 360px) {
  .container > h1 {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .form-group .control-label {
    width: 100%;
    text-align: left;
  }

  .form-group .control-input {
    width: 100%;
  }
}

script.js

/assets/js/script.js
inpDec = document.getElementById("inp-dec");
inpOct = document.getElementById("inp-oct");
inpHex = document.getElementById("inp-hex");
inpBin = document.getElementById("inp-bin");

function execDec() {
  input = inpDec.value;
  inpOct.value = converter(input, 10, 8);
  inpHex.value = converter(input, 10, 16);
  inpBin.value = converter(input, 10, 2);
}

function execOct() {
  input = inpOct.value;
  inpDec.value = converter(input, 8, 10);
  inpHex.value = converter(input, 8, 16);
  inpBin.value = converter(input, 8, 2);
}

function execHex() {
  input = inpHex.value;
  inpDec.value = converter(input, 16, 10);
  inpOct.value = converter(input, 16, 8);
  inpBin.value = converter(input, 16, 2);
}

function execBin() {
  input = inpBin.value;
  inpDec.value = converter(input, 2, 10);
  inpOct.value = converter(input, 2, 8);
  inpHex.value = converter(input, 2, 16);
}

function converter(input, from, to) {
  convert = parseInt(input, from).toString(to);

  if (convert == "NaN") {
    convert = "";
  }

  return convert;
}

Assets External

Semoga Bermanfaat …