Kalkulator IPK Kuliah

Membuat Kalkulator IPK Kuliah

—

by

Webbiz.ID
in ,

Berikut adalah contoh kode untuk membuat kalkulator IPK kuliah menggunakan JavaScript, HTML, dan CSS

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Kalkulator IPK Kuliah</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;
    }

    .form-group {
      margin-bottom: 10px;
    }

    label {
      display: block;
      font-weight: bold;
    }

    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;
    }

    .result {
      margin-top: 20px;
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Kalkulator IPK Kuliah</h1>
    <div class="form-group">
      <label for="total-sks">Total SKS</label>
      <input type="number" id="total-sks" min="0" required>
    </div>
    <div class="form-group">
      <label for="total-nilai">Total Nilai</label>
      <input type="number" id="total-nilai" min="0" max="4" step="0.01" required>
    </div>
    <button onclick="hitungIPK()">Hitung IPK</button>
    <div class="result">
      <p id="ipk"></p>
    </div>
  </div>

  <script>
    function hitungIPK() {
      var totalSKS = parseFloat(document.getElementById('total-sks').value);
      var totalNilai = parseFloat(document.getElementById('total-nilai').value);
      var ipk = totalNilai / totalSKS;
      document.getElementById('ipk').innerHTML = "IPK Anda: " + ipk.toFixed(2);
    }
  </script>
</body>
</html>
HTML

Output:

Kalkulator IPK Kuliah

Kalkulator IPK Kuliah

Silakan gunakan contoh kode di atas untuk membuat kalkulator IPK kuliah yang memungkinkan siswa menginput beberapa nilai dan mengeluarkan hasil dengan menggunakan JavaScript, HTML, dan CSS.

Artikel Terbaru ⭐