JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div id="clockDiv"></div>
<div id ="fetchDiv"></div>
<div id= "decodeDiv"></div>
<div id="executeDiv"></div>
<div id ="storeDiv"></div>
<button onClick="pause()">Pause</button>
<button onClick="resume()">Resume</button>

JavaScript

var value1 = [7,8,2,1,3,4,6,7,7,8,2,1,3,4,6,7,0,3,21,33,33,14];
var value2 = [5,8,4,2,9,6,6,7,8,9,0,0,2,3,6,8,0,3,25,63,73,24];
var instType =['ADD','SUB','ADD','ADD','SUB','ADD','SUB','ADD','ADD','SUB','ADD','ADD','SUB','ADD','SUB','ADD','ADD','SUB','ADD','ADD','SUB','ADD'];

//actual fetched values
var input1 = -100;
var input2 = -100;
var instruction = 'NONE';

var operationType = 'NONE';

//executed value
var storedValue = -100;

var index = -1;

var clockPeriod = 0;

var sim;

function start(){
var sim = setInterval(function(){startSim()},500);
}

var clockPeriod = 0;
var flag = 1;
start();

function pause(){
 flag = 0;
}
function resume(){
 flag = 1;
}


function start(){
var sim = setInterval(function(){startSim()},500);
}

function startSim(){
  document.getElementById('clockDiv').innerHTML = 'Clock Period '+clockPeriod;
  if(index == 22){
    clearInterval(sim);
  }else if(flag == 0){
      console.log ("Simulation Paused");
  }else{
  clockPeriod++;
    fetch();
    decode();
    execute();
    store();
  index++;
 }
}


function fetch(){
       if(index < 0){
         document.getElementById('fetchDiv').innerHTML = 'Instruction fetched: '+'Nothing to fetch';
       }else{
         input1 = value1[index];
         input2 = value2[index];
         instruction = instType[index];
          document.getElementById('fetchDiv').innerHTML = 'Instruction fetched: '+instruction+' '+input1+' '+input2;
       }  
}

function decode(){
  if(instruction === 'NONE'){
    document.getElementById('decodeDiv').innerHTML = 'Nothing to decode';
  }else{
    operationType = instruction;
    document.getElementById('decodeDiv').innerHTML = 'Decoding instruction number '+index;
  }  
}

function execute(){
  if(operationType === 'NONE'){
    document.getElementById('executeDiv').innerHTML ='Nothing to execute';
  }
  if(operationType === 'ADD'){
    document.getElementById('executeDiv').innerHTML ='Executing Add instruction';
    add();
  }
  if(operationType === 'SUB'){
   ...