static/scripts.js

"use strict"

document.addEventListener("DOMContentLoaded", () => {
	const forms = document.querySelectorAll("form");
	forms.forEach((form) => {
		form.style.display = "none";
	});

	// add element to the DOM in the forms-container div
	const formsContainer = document.querySelector("#forms-container");
	const noChosenForm = document.createElement("span");
	noChosenForm.classList.add("error");
	noChosenForm.textContent = "No form chosen";
	formsContainer.appendChild(noChosenForm);
});

document.querySelectorAll(".show-form").forEach((button) => {
	button.addEventListener("click", (event) => {
		showForm(event.target.dataset.formId);
	});
});

function showForm(formId) {
	const forms = document.querySelectorAll("#forms-container form");
	forms.forEach((form) => {
		if (form.id === formId) {
			form.style.display = "block";
			const noChosenForm = document.querySelector(".error");
			noChosenForm.style.display = "none";
		} else {
			form.style.display = "none";
		}
	});
}