Blog Daud: Tugas 2 IMK

Code awal

<!DOCTYPE html>

<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator</title>
  <style>
    /* reset dasar */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* global style */
    html {
      height: 100%;
      background: white;
      background: radial-gradient(circle, white 10%, #eee);
    }

    body {
      font: 16px arial;
    }

    /* container kalkulator */
    #kalkulator {
      width: 325px;
      height: 300px;
      margin: 20px auto;
      padding: 20px 20px 10px;
      background: linear-gradient(#baffc9, #a0ffb5);
      box-shadow: 0 4px 0 #64bf77, 0 10px 15px rgba(0,0,0,0.2);
      border-radius: 5px;
    }

    /* bagian atas (tombol C dan layar) */
    .atas {
      overflow: hidden;
      padding-right: 6px;
    }

    .tombol {
      width: 66px;
      height: 36px;
      float: left;
      background: #ffb3ba;
      color: white;
      border-radius: 3px;
      text-align: center;
      line-height: 35px;
      box-shadow: 0 4px 0 #df8c94;
      margin: 0 5px 11px 0;
      position: relative;
      top: 0;
      user-select: none;
      cursor: pointer;
      transition: 0.2s ease;
    }

    .layar {
      width: 208px;
      height: 40px;
      background: rgba(0,0,0,0.2);
      float: right;
      text-align: right;
      line-height: 40px;
      padding: 0 10px;
      box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
      border-radius: 3px;
      font-size: 1.1em;
      color: white;
      letter-spacing: 1px;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
      overflow: hidden;
    }

    /* bagian bawah */
    .bawah {
      overflow: hidden;
      margin-top: 15px;
    }

    .tombol.angka {
      background: white;
      box-shadow: 0 4px 0 rgba(0,0,0,0.2);
      color: #999;
    }

    .tombol.operator {
      background: #ffdfba;
      box-shadow: 0 4px 0 #dea768;
      color: #dea768;
      font-size: 1.4em;
    }

    .tombol.hitung {
      background: #ffffba;
      box-shadow: 0 4px 0 #bebe47;
      color: #bebe47;
      font-size: 1.4em;
    }

    .tombol:hover {
      filter: brightness(0.95);
    }

    .tombol:active {
      box-shadow: 0 0 0;
      top: 4px;
    }
  </style>
</head>
<body>

<div id="kalkulator">
  <div class="atas">
    <div class="tombol" id="clear">C</div>
    <div class="layar" id="layar"></div>
  </div>
  
  <div class="bawah">
    <span class="tombol angka">7</span>
    <span class="tombol angka">8</span>
    <span class="tombol angka">9</span>
    <span class="tombol operator">/</span>
    
    <span class="tombol angka">4</span>
    <span class="tombol angka">5</span>
    <span class="tombol angka">6</span>
    <span class="tombol operator">*</span>
    
    <span class="tombol angka">1</span>
    <span class="tombol angka">2</span>
    <span class="tombol angka">3</span>
    <span class="tombol operator">-</span>
    
    <span class="tombol angka">0</span>
    <span class="tombol angka">.</span>
    <span class="tombol hitung">=</span>
    <span class="tombol operator">+</span>
  </div>
</div>

<script>
  const layar = document.getElementById("layar");
  const tombol = document.querySelectorAll(".tombol");

  tombol.forEach(btn => {
    btn.addEventListener("click", () => {
      const nilai = btn.textContent;

      if (btn.id === "clear") {
        layar.textContent = "";
      } 
      else if (btn.classList.contains("hitung")) {
        try {
          let hasil = eval(layar.textContent);

          // handling jika hasil tidak terdefinisi atau infinity
          if (hasil === Infinity || isNaN(hasil)) {
            layar.textContent = "Error";
          } else {
            layar.textContent = hasil;
          }
        } catch (error) {
          layar.textContent = "Error";
        }
      } 
      else {
        layar.textContent += nilai;
      }
    });
  });
</script>

</body>
</html>

Analisis dilakukan terhadap aspek kemudahan
penggunaan (usability).   
 Kelebihan:
·      
Konsistensi tombol – tombol
angka dan operator jelas
·      
Feedback instan – input
langsung muncul di layar.
·      
Tombol tambahan ± dan ⌫ –
memudahkan koreksi input.
·      
Estetika lebih baik – dark mode
nyaman di mata.
·      
Tampilan responsif – tombol
besar, cocok untuk mobile.
 
Kekurangan:
·      
Belum ada riwayat perhitungan
(history).
·      
Masih terbatas pada operasi
dasar (+ - * /).
·      
Tidak ada persentase (%) atau
akar kuadrat (√).
Di sini masih ada sedikit kekurangannya

 Redesign InterfaceRedesign dilakukan untuk meningkatkan
kenyamanan pengguna (user experience).
     
Perubahan yang dilakukan:
·      
Dark Mode – tampilan gelap
untuk kenyamanan mata.
·      
Warna tombol berbeda – angka
abu gelap, operator oranye, C merah, = kuning.
·      
Ukuran tombol lebih besar –
lebih mudah digunakan di mobile.
·      
Grid Layout – tombol lebih rapi
dan proporsional.
·      
Tambahan usability – tombol ±
dan ⌫.
 Analisis Error & IterasiAnalisis dilakukan dengan menguji input
salah dan melihat bagaimana aplikasi merespons.
      
Hasil uji coba:
·      
Input 10/0 → muncul 'Error'.
·      
Input salah (misalnya 5++2) →
muncul 'Error'.
·      
Input besar tetap diproses,
tampilan dipotong jika terlalu panjang.
·      
Input kosong lalu tekan '=' →
tetap kosong, tidak error.
   
Perbaikan:
·      
Menambahkan try...catch untuk
error handling.
·      
Menampilkan 'Error' saat input
tidak valid.
·      
Menambahkan ± dan ⌫ untuk
memudahkan koreksi.

code setelah di lakukan perbaikan

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kalkulator Redesign</title>
  <style>
    * {margin:0; padding:0; box-sizing:border-box;}
    body {
      font: 16px Arial;
      background: #121212;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    #kalkulator {
      width: 340px;
      background: #1e1e1e;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    }

    .atas {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
    }

    .layar {
      flex: 1;
      height: 50px;
      background: #333;
      border-radius: 5px;
      text-align: right;
      line-height: 50px;
      padding: 0 10px;
      font-size: 1.3em;
      color: #fff;
      overflow: hidden;
    }

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

    .tombol {
      height: 60px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 1.2em;
      transition: 0.2s;
      user-select: none;
    }

    .tombol:hover {
      filter: brightness(1.2);
    }

    .angka {background: #444;}
    .operator {background: #ff7043; color:white; font-weight: bold;}
    .hitung {background: #fdd835; color:#333; font-weight: bold;}
    .clear {background: #e53935; color:white;}
    .back {background: #757575; color:white;}
  </style>
</head>
<body>

<div id="kalkulator">
  <div class="atas">
    <div class="layar" id="layar"></div>
  </div>
  <div class="bawah">
    <div class="tombol clear">C</div>
    <div class="tombol back">⌫</div>
    <div class="tombol operator">±</div>
    <div class="tombol operator">/</div>

    <div class="tombol angka">7</div>
    <div class="tombol angka">8</div>
    <div class="tombol angka">9</div>
    <div class="tombol operator">*</div>

    <div class="tombol angka">4</div>
    <div class="tombol angka">5</div>
    <div class="tombol angka">6</div>
    <div class="tombol operator">-</div>

    <div class="tombol angka">1</div>
    <div class="tombol angka">2</div>
    <div class="tombol angka">3</div>
    <div class="tombol operator">+</div>

    <div class="tombol angka">0</div>
    <div class="tombol angka">.</div>
    <div class="tombol hitung">=</div>
  </div>
</div>

<script>
  const layar = document.getElementById("layar");
  const tombol = document.querySelectorAll(".tombol");

  tombol.forEach(btn => {
    btn.addEventListener("click", () => {
      const nilai = btn.textContent;

      if (btn.classList.contains("clear")) {
        layar.textContent = "";
      } 
      else if (btn.classList.contains("back")) {
        layar.textContent = layar.textContent.slice(0, -1);
      }
      else if (nilai === "±") {
        if (layar.textContent) {
          layar.textContent = String(-parseFloat(layar.textContent));
        }
      }
      else if (btn.classList.contains("hitung")) {
        try {
          let hasil = eval(layar.textContent);

          if (hasil === Infinity || isNaN(hasil)) {
            layar.textContent = "Error";
          } else {
            layar.textContent = hasil;
          }
        } catch (error) {
          layar.textContent = "Error";
        }
      } 
      else {
        layar.textContent += nilai;
      }
    });
  });
</script>

</body>
</html>

Blog Daud

Halaman

Tugas 2 IMK

Redesign Interface

Analisis Error & Iterasi

Tidak ada komentar:

Posting Komentar

Mengenai Saya

Jam digital