"use strict"; function createForm(elements, callback) { // Create a form element var form = document.createElement("form"); // Loop through the elements array for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) { var element = elements_1[_i]; // Create container div var div = document.createElement("div"); div.className = "form-input-group"; // Create a label var label = document.createElement("label"); label.innerHTML = element.label; // Create an input element var input = document.createElement("input"); input.type = element.type; input.name = element.key; input.value = element.value || ""; // Append the label and input to the form div.appendChild(label); div.appendChild(input); form.appendChild(div); } // Create a submit button var submit = document.createElement("input"); submit.type = "submit"; submit.value = "Submit"; // Append the submit button to the form form.appendChild(submit); // Add event listener to validate inputs form.addEventListener("submit", function (event) { event.preventDefault(); var valid = true; for (var _i = 0, elements_2 = elements; _i < elements_2.length; _i++) { var element = elements_2[_i]; if (element.validation) { valid = element.validation(form[element.key].value); if (!valid) { break; } } } if (valid) { console.log("Form Submitted"); var formValues = {}; for (var _a = 0, elements_3 = elements; _a < elements_3.length; _a++) { var element = elements_3[_a]; formValues[element.key] = form[element.key].value; } callback(formValues); } else { console.log("Form contains invalid data"); } }); // Return the form return form; } function createTableSQL(elements, tableName) { var sql = "CREATE TABLE " + tableName + " (\n id INT NOT NULL AUTO_INCREMENT,\n createdAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,\n modifiedAt TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,"; for (var _i = 0, elements_4 = elements; _i < elements_4.length; _i++) { var element = elements_4[_i]; sql += element.key + " " + (element.type === 'number' ? 'INT' : 'VARCHAR(255)') + " NOT NULL,"; if (element.type === "email") { sql += "INDEX (" + element.key + "),"; } } sql += "PRIMARY KEY (id)"; sql += ");"; return sql; } function createInsertSQL(elements, id) { var sql = "INSERT INTO form_data ("; var values = "VALUES ("; var update = " ON DUPLICATE KEY UPDATE "; for (var _i = 0, elements_5 = elements; _i < elements_5.length; _i++) { var element = elements_5[_i]; sql += element.key + ","; values += "? ,"; update += element.key + " = ? ,"; } sql = sql.slice(0, -1); values = values.slice(0, -1); update = update.slice(0, -1); if (id) { sql += ",id) " + values + ",?);"; } else { sql += ") " + values + ");"; } if (id) { sql += " " + update; } return sql; } var elements = [ { label: "Name", key: "name", type: "text", validation: function (value) { return value.length > 0; } }, { label: "Age", key: "age", type: "number", validation: function (value) { return value > 0; } }, { label: "Email", key: "email", type: "email", validation: function (value) { return value.indexOf("@") != -1; } }, ]; var formElems = [ { label: "Label", key: "label", type: "text", validation: function (value) { return value.length > 0; } }, { label: "Input Key", key: "input_key", type: "text", validation: function (value) { return value.length > 0; } }, { label: "Input Type", key: "input_type", type: "text", validation: function (value) { return value.length > 0; } }, ]; var form = createForm(elements, function (values) { console.log(values); }); var form2 = createForm(formElems, function (values) { console.log(values); }); var app = document.querySelector("#app"); if (app) app.appendChild(form2); if (app) app.appendChild(form); var sql2 = createTableSQL(formElems, "forms"); console.log(sql2); var sql = createTableSQL(elements, "users"); console.log(sql); var sql3 = createInsertSQL(formElems, 1); console.log(sql3); var sql4 = createInsertSQL(elements, 1); console.log(sql4);