static/scripts.js

"use strict"

const common_fonts = [
	"Arial",
	"Times New Roman",
	"Courier New",
	"Verdana",
	"Georgia",
	"Palatino",
	"Bookman Old Style",
	"Tahoma",
	"Century Gothic",
	"Lucida Console",
	"Monaco",
	"Bradley Hand",
	"Calibri",
	"Cambria",
	"Candara",
	"Consolas",
	"Constantia",
	"Corbel",
	"Franklin Gothic Medium",
	"Gabriola"
];

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

	const formsContainer = document.querySelector("#forms-container");
	const noChosenForm = document.createElement("span");
	noChosenForm.classList.add("error");
	noChosenForm.textContent = "No form chosen";
	formsContainer.appendChild(noChosenForm);
});

const fontsSelect = document.querySelectorAll("#font").forEach((fontSelect) => {
	common_fonts.forEach(font => {
		const option = document.createElement('option');
		option.value = font;
		option.text = font;
		fontSelect.add(option);
	});
});

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";
		}
	});
}