Draft variable templating

Author: ambiguousname

web/dist/index.html

@@ -25,22 +25,8 @@
 					</div>
 					<div class="col d-grid gap-2">
 						<div class="container" id="variables">
-							<div class="row">
-								<div class="d-inline-flex">
-									<input type="text" class="form-control" value="var_one" placeholder="Variable Name"/>
-									<select class="form-select">
-										<option selected>Integer</option>
-										<option>Real</option>
-										<option>Complex</option>
-										<option>String</option>
-										<option>Logical</option>
-									</select>
-									<input type="number" class="form-control" value="0" step="1"/>
-									<button type="button" class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
-								</div>
-							</div>
 						</div>
-						<button type="button" class="btn btn-secondary"> <i class="bi bi-plus-lg"></i> Add variable</button>
+						<button type="button" class="btn btn-secondary" id="add-variable"> <i class="bi bi-plus-lg"></i> Add variable</button>
 					</div>
 				</div>
 				<div class="row border rounded-3 bg-light my-2 py-1">
@@ -56,5 +42,22 @@ <h1>Output</h1>
 				</div>
 			</div>
 		</main>
+		<template id="variable-template">
+			<link rel="stylesheet" href="style.css"/>
+			<div class="row">
+				<div class="d-inline-flex">
+					<input type="text" class="form-control" value="var_one" placeholder="Variable Name"/>
+					<select class="form-select">
+						<option selected>Integer</option>
+						<option>Real</option>
+						<option>Complex</option>
+						<option>String</option>
+						<option>Logical</option>
+					</select>
+					<input type="number" class="form-control" value="0" step="1"/>
+					<button type="button" class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
+				</div>
+			</div>
+		</template>
 	</body>
 </html>

web/src/js/index.js

@@ -1,6 +1,8 @@
 var Module = require("Formatter/out");
 require("bootstrap");
 
+const { VariableInput } = require("./variables.js");
+
 let runFirst = false;
 
 let urlInfo = new URLSearchParams(window.location.search);
@@ -23,6 +25,13 @@ async function load() {
 		formatStmt.value = stmt;
 		updateFormatStmt();
 	}
+	
+
+	let addVar = document.getElementById("add-variable");
+	let variables = document.getElementById("variables");
+	addVar.addEventListener("click", () => {
+		variables.appendChild(new VariableInput());
+	});
 
 	function printErr(e) {
 		output.innerText += e + "\n";