JSFiddle - React, Tailwind, and code Playground

by dvjc

HTML

<script src="&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css&quot;&gt;"></script>
<div id="model" title="model">File
    <div id="programContents" title="programContents">Program Contents
        <textarea id="textBox7" name="textBox7" cols="40" rows="24"  title="textBox7"></textarea>
        <input type="button" class="ctrlBtn" id="load" title="button3" value="Load" />
        <input type="button" class="ctrlBtn" id="clear" title="button1" value="Clear" />
    </div>
</div>
<div id="control" title="control">
    <br />
    <label>Accumulator</label><br />
    <div id="textBox4" title="textBox4">...</div>
    <br />
    <label>Instruction Register</label><br />
    <div id="textBox6" title="textBox6">...</div>
    <br />
    <label>Operand Register</label><br />
    <div id="textBox5" title="textBox5">...</div>
    <br />
    <label>Program Counter</label><br />
    <div id="textBox3" title="textBox3">...</div>
    <br />
    <div id="buttons">
        <input type="button" class="ctrlBtn" id="step" title="Step" value="Step" /><br />
        <input type="button" class="ctrlBtn" id="runall" title="Run All" value="Run All" /><br />
        <input type="button" class="ctrlBtn" id="reset" title="Reset" value="Reset" />
    </div>
    <br />
    <label>Input</label><br />
    <input type="text" class="textbox1" id="input" title="textbox1" value="..." />
    <br />
    <label>Output</label><br />
    <div id="textBox2" title="textBox2">...</div>
</div>
<div id="view" title="view"><br />
    <div id="memory" title="memory">Memory
        <textarea id="syncTextBox1" name="syncTextBox1" cols="40" rows="24"  title="syncTextBox1"></textarea>
    </div>
</div>

CSS

#model {
    position: absolute;
    width: 215px;
    left:0px;
}
#programContents {
    position: relative;
    width: 195px;
}
#textBox7 {
    position: relative;
    width: 100%;
    resize: none;
}

#control {
    position: absolute;
    width: 150px;
    left:215px;
}

#buttons {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

.ctrlBtn {
    width: 80px;
}

#input {
    width: 100px;
}

#view {
    position: absolute;
    width: 205px;
    left:365px;
}

#syncTextBox1 {
    position: relative;
    width: 195px;
    resize: none;
}

JavaScript

// Form1

// Set program counter to 0
var programCounter = 0;
document.getElementById("textBox4").innerText = programCounter.toString();

// Set accumulator to 0
var accumulator = 1;
document.getElementById("textBox3").innerText = accumulator.toString();

// Button1_Click
document.getElementById("clear").setAttribute("onclick","document.getElementById('textBox7').value = ''");

// Button3_Click
document.getElementById("load").setAttribute("onclick","document.getElementById('syncTextBox1').value = document.getElementById('textBox7').value;document.getElementById('textBox7').value = ''");

// ButtonStep_Click - first pass: only execute Memory[0]
document.getElementById("step").setAttribute("onclick",
                                             "if( document.getElementById('syncTextBox1').value ) { if( document.getElementById('syncTextBox1').value.length>0 ) { var bits = document.getElementById('syncTextBox1').value.split(' '); var cmd = bits[0]; alert('command: ' + cmd); var reg = (bits.length>0 ? bits[1] : ''); alert('register: ' + reg); var ady = (bits.length>1 ? bits[2] : ''); alert('address: ' + ady);   } }");