html/3/zweierkomplement.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
      :root {
        box-sizing: border-box;
        --akzentfarbe1: #00a0a2;
        --akzentfarbe2: #e2b847;
        --informatikfarbe: #774075;
        font-family: sans-serif;
        max-width: 420px;
        max-height: 420px;
      }

      #wrapper {
        background-color: #f8f8f8;
        border: solid #dcdcdc 4px;
        border-radius: 20px;
        padding: 10px 20px;
      }

      .biginput {
        border-radius: 5px;
        background: #fff;
        border: 2px solid darkgray;
        text-align: right;
        font-size: 2rem;
        padding: 0.35rem;
        width: 8rem;
        margin: 0.5rem;
      }

      .biginput:focus {
        outline: none;
        border-color: #ff4d84;
      }

      .grid-container {
        display: grid;
        grid-template-columns: 11rem 10.5rem;
        align-items: center;
        text-align: right;
        font-size: 1.1rem;
        margin: 0.5rem;
      }

      .number {
        font-family: monospace;
        font-size: 1.5rem;
        text-align: right;
        margin: inherit;
        background: #ddd;
        margin-left: 1rem;
        padding: 0.5rem;
        border-radius: 5px;
        width: 8rem;
      }

      .result {
        background: var(--akzentfarbe2);
      }

      header h1 {
        font-size: 2rem;
        font-weight: 800;
        text-align: center;
        color: var(--akzentfarbe1);
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <header><h1>Zweierkomplement</h1></header>
      <div class="grid-container">
        <div>Die Zahl</div>
        <div>
          <input
            type="number"
            id="number"
            class="biginput"
            onKeyDown="if(this.value.length==4 && event.keyCode!=8) return false;"
            value="-10"
          />
        </div>
        <div>als positive Binärzahl:</div>
        <div class="number" id="bin"></div>
        <div>das Komplement davon:</div>
        <div class="number" id="cmp"></div>
        <div>addiert man eins</div>
        <div class="number">+1</div>
        <div>erhält man das Zweierkomplement:</div>
        <div class="number result" id="result"></div>
      </div>
    </div>
    <script>
      "use strict";
      const number = document.getElementById("number");
      const bin = document.getElementById("bin");
      const cmp = document.getElementById("cmp");
      const result = document.getElementById("result");

      function dec2bin(dec) {
        return (dec >>> 0).toString(2);
      }

      function update() {
        let i = Number(number.value);
        bin.innerHTML = dec2bin(-i).padStart(8, "0");
        cmp.innerHTML = dec2bin(~(-i)).slice(-8);
        result.innerHTML = dec2bin(i).slice(-8).padStart(8, "0");
      }

      number.oninput = function () {
        if (number.value > 0) number.value = -1;
        if (number.value < -128) number.value = -128;
        update();
      };

      update();
    </script>
  </body>
</html>