Kalkulator Akar Kuadrat JavaScript

Membuat Kalkulator Akar Kuadrat JavaScript

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode JavaScript, CSS, dan HTML untuk membuat kalkulator akar kuadrat lengkap dengan tampilan yang menarik:

Kalkulator Akar Kuadrat

Kalkulator Akar Kuadrat

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Kalkulator Akar Kuadrat</title>
  <style>
    /* CSS untuk tampilan kalkulator */
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
    }

    .container {
       width: default;
	background: white;
	margin: 30px auto;
	padding: 30px 20px;
    }


    label {
      display: block;
      margin-bottom: 10px;
    }

    input[type="number"] {
      box-sizing : border-box;
	width: 100%;
	padding: 10px;
	font-size: 11pt;
	margin-bottom: 20px;
    }

    button {
      width: 100%;
      padding: 10px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

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

    #result {
      margin-top: 20px;
      padding: 10px;
      background-color: #f2f2f2;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Kalkulator Akar Kuadrat</h1>
    <label for="number">Masukkan angka:</label>
    <input type="number" id="number" placeholder="Masukkan angka">
    <button onclick="calculateSquareRoot()">Hitung</button>
    <div id="result"></div>
  </div>

  <script>
    function calculateSquareRoot() {
      var numberInput = document.getElementById("number");
      var number = parseFloat(numberInput.value);
      var result = Math.sqrt(number);
      document.getElementById("result").innerHTML = "Hasil: " + result;
    }
  </script>
</body>
</html>
HTML

Anda dapat menyalin kode di atas dan menjalankannya di browser untuk melihat kalkulator akar kuadrat dalam aksi.

Artikel Terbaru ⭐