Merge pull request #2 from natalialuzuriaga/nat/styling

natalialuzuriaga · web-flow · commit 3ef109f8c800 · 2025-01-02T13:24:04.000-05:00
Added heading to form to add more context
diff --git a/form.html b/form.html
@@ -27,6 +27,7 @@
 		<script src="https://unpkg.com/formiojs@3.0.0-alpha.13/dist/formio.full.min.js"></script>
 	</head>
 	<body>
+		<div id="form-header"></div>
 		<div id="formio"></div>
 		<script src="js/generateFormComponents.js"></script>
 		<script src="js/formDataToJson.js"></script>
diff --git a/js/generateFormComponents.js b/js/generateFormComponents.js
@@ -115,6 +115,11 @@ function createComponent(fieldName, fieldObject) {
 	}
 }
 
+function createFormHeading(title, description) {
+	const container = document.getElementById('form-header');
+	container.innerHTML = `<h1>${title}</h1>\n<h2>${description}</h2>`;
+}
+
 // Iterates through each json field and creates component array for Form.io
 async function createFormComponents() {
 	let components = [];
@@ -124,6 +129,8 @@ async function createFormComponents() {
 	let jsonData = await retrieveFile(filePath);
 	console.log("JSON Data:", jsonData);
 
+	createFormHeading(jsonData["title"], jsonData["description"]);
+
 	formFields = jsonData["properties"];
 	console.log("form Fields:", formFields);
 
