JSFiddle - React, Tailwind, and code Playground

by chintansoni

HTML

<div id="resultdiv" style="display: none" align="center">
	<TEXTAREA id="resultcode" style="width: 100%; height: 70%"></TEXTAREA>
</div>
<div align="center" width="100%">
	<h1>PHP OBJECT GENERATOR</h1>
	<hr><p><i>An ID attribute will be autogenerated as SQL reference! Creation of the object: $object = New objectname($DBConnection); where $DBConection should point to a SQL connection done with mysqli_connect. Methods of the object: Clear(), GetByID(ID), GetRecord(), Update(), Insert(), Delete()</i></p><hr>
	<form>
		Common:<br>
		<input type="text" id="objname" name="name" value="object name"><input type="text" id="sqlname" name="sqlname" value="sql table name"><br>
		Atributes:<br>
		<input type="text" name="atrib" value="atrib name"><input type="text" name="val" value="default value"><br>
		<div id="bar"></div>
		<input type="button" value="Add" onclick="add();"><input type="button" value="Generate" onclick="gen();">
	</form>
</div>

JavaScript

function clean(h) {
	return h.replace(/\s/g, '');
}
function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    var element2 = document.createElement("input");
    var element3 = document.createElement("br");
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "atrib name");
    element.setAttribute("name", "atrib");
    element2.setAttribute("type", "text");
    element2.setAttribute("value", "default value");
    element2.setAttribute("name", "val");

    // the div id, where new fields are to be added
    var bar = document.getElementById("bar");

    //Append the element in page (in span).
    bar.appendChild(element);
    bar.appendChild(element2);
    bar.appendChild(element3);
}

function gen() {
	var sqlname = clean(document.getElementById("sqlname").value);
	var objname = clean(document.getElementById("objname").value);
	//DECLARATION	
	var code = "<\?php\n\/\/" + objname + " CLASS\npublic " + objname + " {\n";	
	code += '\tpublic $id;\n';
    for (var o = 0; o < document.getElementsByName("atrib").length; o++) code += '\tpublic $' + clean(document.getElementsByName("atrib")[o].value) + ';\n';
	code += '\n\tpublic $Conn;\n';
	code += '\tpublic $Error;\n';
	code += '\n\tpublic function __construct(&$DBconnection) {\n';
	code += '\t\t$this->Conn = $DBconnection;\n';
	code += '\t\t$this->Clear();\n';
	code += '\t}\n';
	//CLEAR
	code += '\n\t//Clears Object Data\n';	
	code += '\tpublic function Clear() {\n';
	code += '\t\t$this->id = ""; \n';
	for (var o = 0; o < document.getElementsByName("atrib").length; o++) {
		if (document.getElementsByName("val")[o].value.length == 0) code += '\t\t$this->' + clean(document.getElementsByName("atrib")[o].value) + ' = "";\n';
		else if (!isNaN(document.getElementsByName("val")[o].value)) code += '\t\t$this->' + clean(document.getElementsByName("atrib")[o].value) + ' = ' +...