brizzio · June 30, 2024 22:06
diff --git a/dynamic-form.js b/dynamic-form.js
 class DynamicForm {
  constructor(keys, saveFunction) {
    this.keys = keys;
    this.saveFunction = saveFunction;
  }

  render() {
    const overlay = document.createElement('div');
    overlay.id = 'overlay';
    overlay.className = 'fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center';

    const formContainer = document.createElement('div');
    formContainer.className = 'bg-white p-6 rounded-md shadow-md space-y-4';

    const title = document.createElement('h2');
    title.className = 'text-lg font-semibold text-gray-700';
    title.innerText = 'Dynamic Form';
    formContainer.appendChild(title);

    this.keys.forEach(key => {
      const fieldContainer = document.createElement('div');
      fieldContainer.className = 'flex flex-col';

      const label = document.createElement('label');
      label.htmlFor = key;
      label.className = "block text-sm font-medium leading-6 text-gray-900";
      label.innerText = `${key.charAt(0).toUpperCase() + key.slice(1)}:`;

      const input = document.createElement('input');
      input.type = 'text';
      input.id = key;
      input.name = key;
      input.className = 'mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';

      fieldContainer.appendChild(label);
      fieldContainer.appendChild(input);
      formContainer.appendChild(fieldContainer);
    });

    const buttonContainer = document.createElement('div');
    buttonContainer.className = 'flex space-x-4';

    const saveButton = document.createElement('button');
    saveButton.type = 'button';
    saveButton.className = 'px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600';
    saveButton.innerText = 'Save';
    saveButton.addEventListener('click', () => this.save());

    const cancelButton = document.createElement('button');
    cancelButton.type = 'button';
    cancelButton.className = 'px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600';
    cancelButton.innerText = 'Cancel';
    cancelButton.addEventListener('click', () => this.cancel(overlay));

    buttonContainer.appendChild(saveButton);
    buttonContainer.appendChild(cancelButton);
    formContainer.appendChild(buttonContainer);

    overlay.appendChild(formContainer);
    document.body.appendChild(overlay);
  }

  save() {
    const formData = {};
    this.keys.forEach(key => {
      formData[key] = document.getElementById(key).value;
    });
    this.saveFunction(formData);
    this.close();
  }

  cancel(overlay) {
    overlay.remove();
  }

  close() {
    const overlay = document.getElementById('overlay');
    if (overlay) {
      overlay.remove();
    }
  }
 }

 // Make the DynamicForm class available globally
 window.DynamicForm = DynamicForm;
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Form Popup</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="dynamic-form.js" defer></script>
 </head>
 <body class="bg-gray-100">

  <div class="flex justify-center items-center h-screen">
    <button id="openFormButton" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Open Form</button>
  </div>

  <div class="sm:col-span-4">
    <label for="username" class="block text-sm font-medium leading-6 text-gray-900">Username</label>
    <div class="mt-2">
      <div class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
        <span class="flex select-none items-center pl-3 text-gray-500 sm:text-sm">workcation.com/</span>
        <input type="text" name="username" id="username" autocomplete="username" class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="janesmith">
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const keys = ['name', 'email', 'password'];
      const saveFunction = (formData) => {
        console.log('Form Data:', formData);
      };

      document.getElementById('openFormButton').addEventListener('click', () => {
        console.log('Button clicked');
        const dynamicForm = new DynamicForm(keys, saveFunction);
        dynamicForm.render();
        console.log('Form rendered');
      });
    });
  </script>
 </body>
 </html>
	class DynamicForm {
	constructor(keys, saveFunction) {
	this.keys = keys;
	this.saveFunction = saveFunction;
	}

	render() {
	const overlay = document.createElement('div');
	overlay.id = 'overlay';
	overlay.className = 'fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center';

	const formContainer = document.createElement('div');
	formContainer.className = 'bg-white p-6 rounded-md shadow-md space-y-4';

	const title = document.createElement('h2');
	title.className = 'text-lg font-semibold text-gray-700';
	title.innerText = 'Dynamic Form';
	formContainer.appendChild(title);

	this.keys.forEach(key => {
	const fieldContainer = document.createElement('div');
	fieldContainer.className = 'flex flex-col';

	const label = document.createElement('label');
	label.htmlFor = key;
	label.className = "block text-sm font-medium leading-6 text-gray-900";
	label.innerText = `${key.charAt(0).toUpperCase() + key.slice(1)}:`;

	const input = document.createElement('input');
	input.type = 'text';
	input.id = key;
	input.name = key;
	input.className = 'mt-1 p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent';

	fieldContainer.appendChild(label);
	fieldContainer.appendChild(input);
	formContainer.appendChild(fieldContainer);
	});

	const buttonContainer = document.createElement('div');
	buttonContainer.className = 'flex space-x-4';

	const saveButton = document.createElement('button');
	saveButton.type = 'button';
	saveButton.className = 'px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600';
	saveButton.innerText = 'Save';
	saveButton.addEventListener('click', () => this.save());

	const cancelButton = document.createElement('button');
	cancelButton.type = 'button';
	cancelButton.className = 'px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600';
	cancelButton.innerText = 'Cancel';
	cancelButton.addEventListener('click', () => this.cancel(overlay));

	buttonContainer.appendChild(saveButton);
	buttonContainer.appendChild(cancelButton);
	formContainer.appendChild(buttonContainer);

	overlay.appendChild(formContainer);
	document.body.appendChild(overlay);
	}

	save() {
	const formData = {};
	this.keys.forEach(key => {
	formData[key] = document.getElementById(key).value;
	});
	this.saveFunction(formData);
	this.close();
	}

	cancel(overlay) {
	overlay.remove();
	}

	close() {
	const overlay = document.getElementById('overlay');
	if (overlay) {
	overlay.remove();
	}
	}
	}

	// Make the DynamicForm class available globally
	window.DynamicForm = DynamicForm;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Dynamic Form Popup</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="dynamic-form.js" defer></script>
	</head>
	<body class="bg-gray-100">

	<div class="flex justify-center items-center h-screen">
	<button id="openFormButton" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Open Form</button>
	</div>

	<div class="sm:col-span-4">
	<label for="username" class="block text-sm font-medium leading-6 text-gray-900">Username</label>
	<div class="mt-2">
	<div class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
	<span class="flex select-none items-center pl-3 text-gray-500 sm:text-sm">workcation.com/</span>
	<input type="text" name="username" id="username" autocomplete="username" class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="janesmith">
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	const keys = ['name', 'email', 'password'];
	const saveFunction = (formData) => {
	console.log('Form Data:', formData);
	};

	document.getElementById('openFormButton').addEventListener('click', () => {
	console.log('Button clicked');
	const dynamicForm = new DynamicForm(keys, saveFunction);
	dynamicForm.render();
	console.log('Form rendered');
	});
	});
	</script>
	</body>
	</html>