A Pen by Kansas Cosmosphere

Thumbnail
This awesome code was written by kcsc, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright kcsc ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Kansas Cosmosphere</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body onload="addNew(0)">
<button type="button" onclick="addNew(1)">Add New Row</button>

  <table id="tableau">
    <tr>
      <th> Symbol 1 </th>
      <th> Symbol 2 </th>
    </tr>
    <tr>
      <td> <input type="text" id="s1"> </td>
      <td> <input type="text" id="s2">
      </td>
    </tr>
  </table>
  <table id="table">
  <tr>
    <th> Rule for Symbol 1 </th>
    <th> Rule for Symbol 2 </th>
    <th> Tape Says </th>
    <th> RESULT </th>
  </tr>
</table>
</body>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/kcsc/a-pen-by-kansas-cosmosphere-raoddz */
table, th, td {
  border-style: solid;
}

table {
  position: relative;
}

button {
  position: relative;
  float: right;
}

/*Downloaded from https://www.codeseek.co/kcsc/a-pen-by-kansas-cosmosphere-raoddz */
function main(tr) {
  var result,
      table = document.getElementById("table");
  
  var row = {
    rule1: tr.children[0].children[0].value,
    rule2: tr.children[1].children[0].value,
    tape: table.lastChild.children[2].children[0].value
  };
  
  /*----CHANGE BELOW ----*/
  /*---------------------*/
  result = row.tape=="\%\"?row.tape+row.rule1:row.tape+row.rule2;
  /*--------------------*/
  /*--------------------*/
  
  return result;
}

function addNew(a) {
  if (!a)
    {
      var table = document.getElementById("table");
      var tr = document.createElement("TR");
      
      var td_rule1 = document.createElement("TD");
      var in_rule1 = document.createElement("INPUT")
      in_rule1.setAttribute("type", "text");
      td_rule1.appendChild(in_rule1);
  		tr.appendChild(td_rule1);

 		 	var td_rule2 = document.createElement("TD");
      var in_rule2 = document.createElement("INPUT");
     	in_rule2.setAttribute("type", "text");
      td_rule2.appendChild(in_rule2);
  		tr.appendChild(td_rule2);
      
      var td_tape = document.createElement("TD"); 
  		var in_tape = document.createElement("INPUT");
      in_tape.setAttribute("type", "text");
      td_tape.appendChild(in_tape);
      tr.appendChild(td_tape);

      var td_machine = document.createElement("TD");
      var machine = document.createTextNode("--");
      td_machine.appendChild(machine);
      tr.appendChild(td_machine);

      table.appendChild(tr); 
    }
  
  else {
    var table = document.getElementById("table");
    var tr = document.createElement("TR");

    var td_rule1 = document.createElement("TD");
    var in_rule1 = document.createElement("INPUT");
    in_rule1.setAttribute("type", "text");
    in_rule1.setAttribute("disabled", "true");
    in_rule1.setAttribute("value", table.children[table.childElementCount - 1].children[0].children[0].value);
    td_rule1.appendChild(in_rule1);
    tr.appendChild(td_rule1);

    var td_rule2 = document.createElement("TD");
    var in_rule2 = document.createElement("INPUT");
    in_rule2.setAttribute("type", "text");
    in_rule2.setAttribute("disabled", "true");
    in_rule2.setAttribute("value", table.children[table.childElementCount - 1].children[1].children[0].value);
    td_rule2.appendChild(in_rule2);
    tr.appendChild(td_rule2);

    var td_tape = document.createElement("TD"); 
    var in_tape = document.createElement("INPUT");
    in_tape.setAttribute("type", "text");
    td_tape.appendChild(in_tape);
    tr.appendChild(td_tape);

    var td_machine = document.createElement("TD");
    var machine = document.createTextNode(main(tr));
    td_machine.appendChild(machine);
    tr.appendChild(td_machine);

    table.appendChild(tr);
  }
}

Comments