En el mundo de la programación web, es fundamental comprender cómo crear y modificar elementos HTML dinámicamente mediante JavaScript. En esta publicación, te guiaremos a través de un ejemplo práctico que te mostrará cómo construir una vista HTML interactiva utilizando JavaScript. No te preocupes si eres nuevo en la programación; nuestro objetivo es explicar los conceptos de manera sencilla y clara.
¿Qué es una Vista HTML?
Antes de sumergirnos en el código, definamos lo que es una vista HTML. Una vista HTML es simplemente una parte de una página web que muestra información específica. Puede ser un cuadro de diálogo, un widget interactivo o cualquier otro elemento que los usuarios puedan ver y con el que puedan interactuar.
El Código de Ejemplo:
A continuación, te presentamos un ejemplo de un código HTML y JavaScript que crea una vista HTML interactiva. Aquí está el código completo:
var data = {
"Encuesta 1": {
"Pregunta 1": {
"Respuesta A": {
"promedio": 70,
"mayor": 90,
"menor": 50
},
"Respuesta B": {
"promedio": 60,
"mayor": 80,
"menor": 40
}
},
"Pregunta 2": {
"Respuesta X": {
"promedio": 80,
"mayor": 95,
"menor": 60
}
}
},
"Encuesta 2": {
"Pregunta 1": {
"Respuesta A": {
"promedio": 75,
"mayor": 85,
"menor": 65
},
"Respuesta B": {
"promedio": 55,
"mayor": 75,
"menor": 35
}
}
}
};
function buildView(data) {
var container = document.getElementById("container");
for (var nombreEncuesta in data) {
var sectionData = data[nombreEncuesta];
var sectionDiv = document.createElement("div");
sectionDiv.style.margin = "10px";
sectionDiv.style.padding = "10px";
for (var question in sectionData) {
var sectionTitleElement = document.createElement("h1");
sectionTitleElement.style.color = "#1f3b59";
sectionTitleElement.textContent = question;
sectionDiv.appendChild(sectionTitleElement);
for (var answer in sectionData[question]) {
var answerElement = document.createElement("div");
var answerElement1 = document.createElement("div");
answerElement1.style.setProperty("max-width", "100%");
var answerElement2 = document.createElement("div");
answerElement2.style.setProperty("max-width", "100%");
answerElement2.style.setProperty("margin-left", "50%");
answerElement.className = "card";
answerElement1.style.display = "flex";
answerElement1.style.setProperty("align-items", "center");
var answerElementText = document.createElement("p");
answerElementText.textContent = answer;
answerElementText.style.setProperty("min-width", "50%");
answerElementText.style.setProperty("font-size", "larger");
var score = sectionData[question][answer]['promedio'];
var mayor = sectionData[question][answer]['mayor'];
var menor = sectionData[question][answer]['menor'];
var scoreElement = document.createElement("div");
scoreElement.className = "progress-bar";
var progressBarFill = document.createElement("div");
progressBarFill.className = "progress-fill";
progressBarFill.style.width = score + "%";
var scoreElementText = document.createElement("p");
scoreElementText.textContent = score + "%";
scoreElementText.style.setProperty("margin-left", "20px");
var mayorMenorDiv = document.createElement("div");
mayorMenorDiv.style.display = "flex";
var mayorElement = document.createElement("p");
mayorElement.textContent = "Menor: " + menor;
mayorElement.style.setProperty("margin-right", "auto");
var menorElement = document.createElement("p");
menorElement.textContent = "Mayor: " + mayor;
menorElement.style.setProperty("margin-left", "auto");
menorElement.style.setProperty("margin-right", "20px");
mayorMenorDiv.appendChild(mayorElement);
mayorMenorDiv.appendChild(menorElement);
answerElement.appendChild(answerElement1);
answerElement.appendChild(answerElement2);
answerElement1.appendChild(answerElementText);
answerElement1.appendChild(scoreElement);
scoreElement.appendChild(progressBarFill);
answerElement1.appendChild(scoreElementText);
answerElement2.appendChild(mayorMenorDiv);
sectionDiv.appendChild(answerElement);
}
}
container.appendChild(sectionDiv);
}
}
buildView(data);
Explicación Paso a Paso:
HTML Básico: Comenzamos con un esqueleto HTML básico que incluye una sección para mostrar la vista y un bloque de script para el código JavaScript.
Datos de la Encuesta: Hemos definido un objeto data que contiene datos simulados de encuestas. Puedes reemplazar estos datos con los tuyos.
La Función buildView: La función buildView es el corazón de nuestro ejemplo. Toma los datos y los procesa para construir una vista HTML interactiva. Esta función se encarga de crear elementos dinámicos y aplicar estilos CSS.
Conclusión:
Este es un ejemplo del resultado que se podría esperar para la generación dinámica del HTML con JavaScript:
Esperamos que este ejemplo te haya proporcionado una visión clara de cómo puedes crear vistas HTML dinámicas con JavaScript. La programación web puede parecer abrumadora al principio, pero con práctica y paciencia, puedes dominarla. ¡Sigue aprendiendo y experimentando para llevar tus habilidades al siguiente nivel!
