JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<br>
<div>
    <div class="rules" id="r1">a &bull; a = a</div>
    <div class="rules" id="r2">a + a = a</div>
    <div class="rules" id="r3">a &bull; 1 = a</div>
    <div class="rules" id="r4">a + 1 = 1</div>
    <div class="rules" id="r5">a &bull; 0 = 0</div>
    <div class="rules" id="r6">a + 0 = a</div>
    <div class="rules" id="r7">a &bull; <span class="neg">a</span> = 0</div>
    <div class="rules" id="r8">a + <span class="neg">a</span> = 1</div>
    <div class="rules" id="clear">Clear</div>
    <!--<input id="myField" type="text" />--></div>
<div>
    <div class="original" id="a"><span class="neg">a</span>

    </div>
    <div class="result" id="out"></div>
</div>

CSS

.neg {
    text-decoration:overline;
}
.double-overline {
    padding-top: 1px;
    border-top: 1px solid;
    text-decoration: overline;
}
.rules, .result, .original {
    display:inline;
    text-align:center;
    border: 2px solid black;
    background-color: #FFFFCC;
    position:relative;
    float:right;
    border-radius: 5px;
    clear:right;
    min-width: 75px;
    height: 35px;
    line-height: 35px;
    vertical-align: middle;
}
.original {
    display: inline;
     position: absolute;
    float: left;
}

.result {
    background-color: #FFFFEF;
    width: auto;
    float: left;
    position: absolute;
    margin-left:120px;
}

JavaScript

//Boolean algebraa
clicked = false;

$('.rules').click(function () {
    var thisid = $(this).attr('id');
    if (clicked) {
        $('#a').html('<span class="neg">a</span>');
        clicked = false;
    } // if (clicked)
    else {
        clicked = true;
    }
    switch (thisid) {
        case "r1":
            $('#out').html('<span class="neg">' + $('#a').text() + '</span>' + ' = ' + '<span class="neg">' + $('#a').text() + ' &bull; ' + $('#a').text() + '</span>');
            break;
        case "r2":
            $('#out').html('<span class="neg">' + $('#a').text() + '</span>' + ' = ' + '<span class="neg">' + $('#a').text() + ' + ' + $('#a').text() + '</span>');
            break;
        case "r3":
            $('#out').html('<span class="neg">' + $('#a').text() + '</span>' + ' = ' + '<span class="neg">' + $('#a').text() + ' &bull; ' + '1' + '</span>');
            break;
        case "r6":
            $('#out').html('<span class="neg">' + $('#a').text() + '</span>' + ' = ' + '<span class="neg">' + $('#a').text() + ' + ' + '0' + '</span>');
            break;
        case "r4":
        case "r5":
        case "r7":
        case "r8":
            $('#out').html('ei sovellettavissa');
            break;
    } // switch (thisid)
});

$('#clear').click(function () {
    $('#out').html(' ');
});
/* Kokeilua itsesyöttöä varten
$("#myField").keyup(function () {
    var outtext = "";
    var input = "/";
    var end = $("#myField").val().length;
    var stop = $("#myField").val().indexOf(' ');
    if (stop > 0) {
        end = stop;
    }
    if ($("#myField").val().substring(0, input.length) === input) {
        outtext = '<span class="neg">' + $("#myField").val().substring(1, end) + '</span>';
        if (stop > 0) {
            outtext = outtext + $("#myField").val().substring(stop, $("#myField").val().length); //$("#myField").val().substring(stop, end);
        }
    } else {
        outtext = $("#myField").val();
    }
   ...