JSFiddle - React, Tailwind, and code Playground

by Anushri Dixit

HTML

<!DOCTYPE html>
<html>
    
    <body>
        <script>
            
        </script>
        <h><b>
      What do you want to do?
  </b>

        </h>
        <p>
            <input type="radio" name="what" id="variable" value="variable"/>
            Declare a variable
        </p>
        <p>
            <input type="radio" name="what" id="cond" value="cond" />
            Write a conditional statement
        </p>
        <p>
            <input type="radio" name="what" id="loop" value="loop" />
            Write a loop</p>
        <p>
            <input type="radio" name="what" id="cout" value="cout" />
            Print a statement
        </p>
        <p>
            <input type="radio" name="what" id="fdef" value="fdef" />
            Define a function</p>
        <p>
            <input type="radio" name="what" id="cdef" value="cdef" />
            Define a class</p>
        <p id="p1"><em>
      Click on the desired option to continue
  </em>

        </p>
        <div id="container">

        </div>
        <div id="container01">
            </div>
        <p id="p2">
        </p>

    </body>

JavaScript

var syntax= {
    name: "null",
    lang: 0,
    type: 0,
    initial:0,
    value:"null",
    fin:"null",
    declare: function () { 
    switch(syntax.type)
        {
        case 1: syntax.fin="int ";
        break;
        case 2: syntax.fin="float ";
        break;
        case 3: syntax.fin="double ";
        break;
        case 4: syntax.fin="char ";
    syntax.value="\'"+syntax.value+"\'";
        break;
        case 5: if (syntax.lang==1)
        { 
           syntax.fin="String ";
    syntax.value="\""+syntax.value+"\"";
        }
        else
        {
        syntax.fin="char ";
   syntax.value="\'"+syntax.value+"\'";
        }
        break;
        case 6: if (syntax.lang===1)
        {
        syntax.fin="boolean ";
        }
        else
        { 
         syntax.fin="bool  "; 
        }
        break;
        }
    if(syntax.initial==1) 
      {
       syntax.fin=syntax.fin+" " +syntax.name+" = "+ syntax.value+ ";";
      }
     else 
     {
    syntax.fin=syntax.fin+ " " + syntax.name +';';
      }
        document.getElementById("p2").innerHTML = syntax.fin;
    }
};

document.getElementById('variable').onclick = variablecode;
document.getElementById('cond').onclick = condcode;
document.getElementById('loop').onclick = loopcode;
document.getElementById('cout').onclick = coutcode;
document.getElementById('fdef').onclick = fdefcode;
document.getElementById('cdef').onclick = cdefcode;
       
function variablecode() {
        document.getElementById("p1").innerHTML = " ";
        var container = document.getElementById("container");
        while (container.hasChildNodes()) {
            container.removeChild(container.lastChild);
        }
        
    container.appendChild(document.createTextNode("Variable type: "));

    container.appendChild(document.createElement("br"));
    container.appendChild(document.createElement("br"));

    var input = document.createElement("input");
    input.type = "radio";
    input.name = "Integer";
    input.id...