Skip to content

Instantly share code, notes, and snippets.

@adjmedina
Last active August 31, 2023 05:35
Show Gist options
  • Save adjmedina/3d3b708df0dd58b7bbb4be364e68add7 to your computer and use it in GitHub Desktop.
Save adjmedina/3d3b708df0dd58b7bbb4be364e68add7 to your computer and use it in GitHub Desktop.
A example for create a dinamic in typescript class
class ModalForm {
// Atributos o elementos que componen el formulario
formContainer: HTMLDivElement;
MensajeParagraph: HTMLParagraphElement;
usuarioLabel: HTMLLabelElement;
usuarioInput: HTMLInputElement;
contrasenaLabel: HTMLLabelElement;
contrasenaInput: HTMLInputElement;
enviarButton: HTMLButtonElement;
cancelarButton: HTMLButtonElement;
constructor(msj: string) {
this.formContainer = document.createElement("div");
this.formContainer.classList.add("form-container");
this.MensajeParagraph = document.createElement("p");
this.MensajeParagraph.textContent = msj;
this.usuarioLabel = document.createElement("label");
this.usuarioLabel.textContent = "Usuario:";
this.usuarioInput = document.createElement("input");
this.usuarioInput.type = "text";
this.usuarioInput.placeholder = "Ingrese su usuario";
this.contrasenaLabel = document.createElement("label");
this.contrasenaLabel.textContent = "Contraseña:";
this.contrasenaInput = document.createElement("input");
this.contrasenaInput.type = "password";
this.contrasenaInput.placeholder = "Ingrese su contraseña";
this.enviarButton = document.createElement("button");
this.enviarButton.textContent = "Enviar";
this.enviarButton.id = "enviar";
this.cancelarButton = document.createElement("button");
this.cancelarButton.textContent = "Cancelar";
this.cancelarButton.id = "cancelar";
// Agregar elementos al contenedor del formulario
this.formContainer.appendChild(this.usuarioLabel);
this.formContainer.appendChild(this.usuarioInput);
this.formContainer.appendChild(this.contrasenaLabel);
this.formContainer.appendChild(this.contrasenaInput);
this.formContainer.appendChild(this.enviarButton);
this.formContainer.appendChild(this.cancelarButton);
}
createform(targetElementId: string) {
// Agregar el formulario al div del documento
const targetElement: HTMLDivElement = document.getElementById(targetElementId);
if (targetElement) {
targetElement.innerHTML = this.formContainer;
} else {
console.error(`Element with ID '${targetElementId}' not found.`);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment