JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<pre>
 Binäärilukujen yhteenlasku
 
 Säännöt                     | Versio, jossa lisäksi muistibitti
                       <div class="eiviivaa" style="color:gray;">1</div>     |   <div class="eiviivaa" style="color:gray;">1</div><div class="eiviivaa" style="color:gray;">1</div>
   <div class="eiviivaa">0</div>      <div class="eiviivaa">0</div>      <div class="eiviivaa">1</div>      <div class="eiviivaa">1</div>    |    <div class="eiviivaa">1</div>
 <div class="bottomline">+ 0</div>    <div class="bottomline">+ 1</div>    <div class="bottomline">+ 0</div>    <div class="bottomline">+ 1</div>    |  <div class="bottomline">+ 1</div>
   <div class="eiviivaa">0</div>      <div class="eiviivaa">1</div>      <div class="eiviivaa">1</div>     <div class="eiviivaa">10</div>    |   <div class="eiviivaa">11</div>

Valitse yhteenlaskettavat 10-järjestelmän kokonaisluvut.  
</pre>
<form>
  Voit valita käytetäänkö etumerkillistä kahden komplementti -muotoa vai etumerkittömiä kokonaislukuja.
  <br>
  <input type="radio" name="choice" value="no" id="choice-neg" />
  <label for="choice-neg">Etumerkillinen (kahden komplementti)</label>
  <input type="radio" name="choice" value="yes" id="choice-pos" />
  <label for="choice-pos">Etumerkitön</label>
</form>
<br>
Bittimäärä [n]:
<input type="text" id="numbits" name="numbits" maxlength="2" size="2" value="16"> Viive [s]:
<input type="text" id="viive" name="viive" maxlength="4" size="1" value="1.0">
<br>
<br> Yhteenlaskettavat kokonaisluvut:
<br>
<br>
<input type="text" id="ekaluku" name="ekaluku" maxlength="10" size="6"> +
<input type="text" id="tokaluku" name="tokaluku" maxlength="10" size="6">
<pre>
   <div class="eiviivaa" style="color:gray;" id="carry"></div>
   <div class="eiviivaa" id="eka"></div> 
 <div class="bottomline" id="toka">+                 </div>
   <div class="eiviivaa" id="tulos"></div>
</pre>
<input type="button" value="Laske" onclick="laske()">
<br>Tulos:
<br>
<textarea id="myTextarea" rows="4"...

CSS

.bottomline {
  margin: 0px;
  padding: 0px 0px 0px 1px;
  display: inline;
  border-bottom: 1px solid black;
}

.eiviivaa {
  margin: 0px;
  padding: 0px 0px 0px 1px;
  display: inline;
}

pre {
  font-size: x-large;
}

JavaScript

// Version 11.10.2021: Lisätty tuki positiivisille kokonaisluvuille
// Version 10.11.2021: Lisätty jonkinlainen selvennys muistibitin lisäämisestä kahden bitin yhteenlaskuun
radiobtnneg = document.getElementById("choice-neg");
radiobtnneg.checked = true;

function dec2bin(dec, numbits, neg) {
  if (dec.length == 0) {
    return "";
  }
  if (neg) {
    alaraja = -Math.pow(2, numbits - 1);
    ylaraja = Math.pow(2, numbits - 1) - 1;
  } else {
    alaraja = 0;
    ylaraja = Math.pow(2, numbits) - 1;
  }
  if (dec >= alaraja && dec <= ylaraja) {
    var out = "";
    var length = parseInt(numbits);
    while (length--) {
      out += (dec >> length) & 1;
    }
    return out;
  } else {
    return "";
  }
}

function bin2dec(bin, neg) {
  if (bin.length == 0) {
    return "";
  }
  if (bin[0] == 0 || !neg) { // check sign, bin is string so left-most 'bit' (MSB) is indexed by [0]
    return parseInt(bin, 2);
  } else { // negative, i.e. bin[0] == 1 (MSB)
    var dectemp = parseInt(bin, 2);
    return ((dectemp ^ parseInt((new Array(dectemp.toString(2).length + 1)).join("1"), 2)) + 1) * -1;
  }
}

var timeouts = Array(); // place timeouts in array, so they can be deleted if laske() is called during calculation (init and start new)

function additionperbit(eka, toka, viive, numbits, neg) {
  (function myLoop(i, eka, toka, tulos, carry, viive) {
    timeouts.push(setTimeout(function() {
      // FullAdder :)
      tulos += ((eka & 0x1) ^ (toka & 0x1) ^ (parseInt(carry, 2) & 0x1)).toString(); // parseInt for carry, for some reason +16 bits does not work with string
      carry += (((eka & 0x1) & (toka & 0x1)) | (((eka & 0x1) ^ (toka & 0x1)) & (parseInt(carry, 2) & 0x1))).toString();
      // check for overflow, with 2's complement that is when carry_in to MSB position (i==1) equals 1
      // Jos kyseessä negatiivisen ja positiivisen luvun yhteenlasku, niin ylivuotobitti jätetään huomioimatta silloin kun
      // negatiivisen luvun itseisarvo pienempi tai yhtäsuuri kuin...