JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script language="JavaScript">

</script>

<form name="editor">
<center>
<table border=1>
<td align=center>
<b>Choose Mode:</b><br>
<input type="radio" name="mode" value="help"onClick="thelp(1)">Guide
<input type="radio" name="mode" value="prompt" onClick="thelp(2)">Prompt
<input type="radio" name="mode" value="basic" checked onClick="thelp(0)">Write
</td>
</table>
<br>
<table border=1>
<tr>
<td align=center>
<input type="button" value="Preview" onClick="preview()">
<input type="button" value=" Start " onClick="start()">
<input type="button" value="  End  " onClick="end()">
<input type="button" value="<img>" onClick="image()">
<input type="button" value="<L>"onClick="aleft()">
<input type="button" value="<R>" onClick="aright()">
<input type="button" value="<T>" onClick="atop()">
<input type="button" value="<M>" onClick="amid()">
<input type="button" value="<B>" onClick="abottom()">
<input type="button" value="Reset" onClick="treset()">
</td>
</tr>
<td>
<input type="button" value="B" onClick="bold()">
<input type="button" value="I" onClick="italic()">
<input type="button" value="U" onClick="underline()">
<input type="button" value="C" onClick="center()">
<input type="button" value="<p>" onClick="pbreak()">
<input type="button" value="<br>" onClick="lbreak()">
<input type="button" value="<hr>" onClick="hbar()">
<input type="button" value="<pre>" onClick="pre()">
<input type="button" value="h1" onClick="head1()">
<input type="button" value="h2" onClick="head2()">
<input type="button" value="h3" onClick="head3()">
<input type="button" value="h4" onClick="head4()">
<input type="button" value="h5" onClick="head5()">
<input type="button" value="h6" onClick="head6()">
</td>
</tr>
<tr>
<td>
<input type="button" value="Link" onClick="linkopen()">
<input type="button" value="&#9875;" onClick="anchor()">
<input type="button" value="<ol>" onClick="orderopen()">
<input type="button" value="<li>" onClick="li()">
<input type="button" value="<ul>" onClick="unorderopen()">
<input...

CSS

input[type=button] {
  padding: 10px 20px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #e5e59b;
  border: none;
  border-radius: 15px;
}
input[type=button]:hover {background-color: #f5f5d8}

input[type=button]:active {
  background-color: #e5e59b;
  transform: translateY(1px);
}

JavaScript

helpstat = false;
stprompt = false;
basic = true;

function thelp(swtch){
        if (swtch == 1){
                basic = false;
                stprompt = false;
                helpstat = true;
        }
        else if (swtch == 0) {
                helpstat = false;
                stprompt = false;
                basic = true;
        }
        else if (swtch == 2) {
                helpstat = false;
                basic = false;
                stprompt = true;
        }
}

function treset(){
        if (helpstat){
                alert("Clears the current editor.");
        }
        else {
        clear = prompt("Are you sure? (y/n)",'');
        clear = clear.toLowerCase();
        if(clear == 'y') {
                document.editor.reset();
                document.editor.value = "";
        }
        }
}       

function start(){
        if (helpstat){
                alert("Elements that appear at the beginning of the document, including TITLE.");
        }
        else if (basic) {
        document.editor.area.value = document.editor.area.value + "<html>\n<head>\n<title></title>\n</head>\n<body>\n";
        }
        else if (stprompt) {
                for(;;){
                        twrite = prompt("Title?",'');
                        if (twrite != "" && twrite != null){
                                break;
                        }
                        else {
                                prompt("You must enter a title.",'Ok, sorry.');
                        }
                }
                document.editor.area.value = document.editor.area.value + "<html>\n<head>\n<title>" + twrite + "</title>\n</head>\n<body ";

                twrite = prompt("Background color? (blank if none)",'');        
                if (twrite != "" && twrite != null){
                        twrite = '"' + twrite + '"';
                        document.editor.area.value = document.editor.area.value + "bgcolor=" + twrite + " ";
                }

          ...