Aplicaci\u00f3n Web Funcional<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);\r\n color: #333;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n \r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background-color: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n overflow: hidden;\r\n }\r\n \r\n header {\r\n background: linear-gradient(to right, #2c3e50, #4a6491);\r\n color: white;\r\n padding: 25px;\r\n text-align: center;\r\n }\r\n \r\n h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n }\r\n \r\n main {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 30px;\r\n gap: 30px;\r\n }\r\n \r\n .panel {\r\n flex: 1;\r\n min-width: 300px;\r\n background: white;\r\n border-radius: 10px;\r\n padding: 25px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n border-top: 5px solid #3498db;\r\n }\r\n \r\n .panel h2 {\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #f1f1f1;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n input, select, button {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 2px solid #ddd;\r\n border-radius: 6px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n }\r\n \r\n input:focus, select:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);\r\n }\r\n \r\n button {\r\n background: linear-gradient(to right, #3498db, #2980b9);\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n margin-top: 10px;\r\n }\r\n \r\n button:hover {\r\n background: linear-gradient(to right, #2980b9, #1c5a87);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .resultado {\r\n background-color: #f8f9fa;\r\n border-left: 4px solid #2ecc71;\r\n padding: 20px;\r\n margin-top: 25px;\r\n border-radius: 0 6px 6px 0;\r\n display: none;\r\n }\r\n \r\n .resultado.visible {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n \r\n .lista-item {\r\n padding: 12px 15px;\r\n background: #f8f9fa;\r\n margin-bottom: 10px;\r\n border-radius: 6px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-left: 4px solid #3498db;\r\n }\r\n \r\n .contador {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #3498db;\r\n text-align: center;\r\n margin: 20px 0;\r\n }\r\n \r\n .acciones {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n }\r\n \r\n .acciones button {\r\n flex: 1;\r\n }\r\n \r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n background-color: #2c3e50;\r\n color: white;\r\n margin-top: 30px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n main {\r\n flex-direction: column;\r\n }\r\n \r\n .panel {\r\n min-width: 100%;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1>Aplicaci\u00f3n Web Funcional<\/h1>\r\n <p class=\"subtitle\">Soluci\u00f3n completa HTML + CSS + JavaScript en un solo archivo<\/p>\r\n <\/header>\r\n \r\n <main>\r\n <div class=\"panel\">\r\n <h2>Formulario de Ejemplo<\/h2>\r\n <div class=\"form-group\">\r\n <label for=\"nombre\">Nombre:<\/label>\r\n <input type=\"text\" id=\"nombre\" placeholder=\"Escribe tu nombre\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\">Correo Electr\u00f3nico:<\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"ejemplo@correo.com\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"opcion\">Selecciona una opci\u00f3n:<\/label>\r\n <select id=\"opcion\">\r\n <option value=\"\">-- Elige una opci\u00f3n --<\/option>\r\n <option value=\"1\">Opci\u00f3n 1<\/option>\r\n <option value=\"2\">Opci\u00f3n 2<\/option>\r\n <option value=\"3\">Opci\u00f3n 3<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button id=\"btnEnviar\">Enviar Datos<\/button>\r\n \r\n <div class=\"resultado\" id=\"resultadoForm\">\r\n <h3>Datos Enviados:<\/h3>\r\n <p id=\"datosMostrados\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"panel\">\r\n <h2>Contador Interactivo<\/h2>\r\n <div class=\"contador\" id=\"contador\">0<\/div>\r\n \r\n <div class=\"acciones\">\r\n <button id=\"btnAumentar\">Aumentar<\/button>\r\n <button id=\"btnDisminuir\">Disminuir<\/button>\r\n <button id=\"btnReset\">Reiniciar<\/button>\r\n <\/div>\r\n \r\n <h2 style=\"margin-top: 30px;\">Lista de Elementos<\/h2>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"nuevoElemento\" placeholder=\"Escribe un nuevo elemento\">\r\n <button id=\"btnAgregar\">Agregar a la lista<\/button>\r\n <\/div>\r\n \r\n <div id=\"listaElementos\">\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 1<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 2<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <footer>\r\n <p>Aplicaci\u00f3n web funcional - Todos los elementos est\u00e1n operativos<\/p>\r\n <p>Prueba los diferentes componentes para verificar su funcionamiento<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Esperar a que el DOM est\u00e9 completamente cargado\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('Documento cargado y listo');\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const btnEnviar = document.getElementById('btnEnviar');\r\n const resultadoForm = document.getElementById('resultadoForm');\r\n const datosMostrados = document.getElementById('datosMostrados');\r\n const contador = document.getElementById('contador');\r\n const btnAumentar = document.getElementById('btnAumentar');\r\n const btnDisminuir = document.getElementById('btnDisminuir');\r\n const btnReset = document.getElementById('btnReset');\r\n const btnAgregar = document.getElementById('btnAgregar');\r\n const nuevoElemento = document.getElementById('nuevoElemento');\r\n const listaElementos = document.getElementById('listaElementos');\r\n \r\n \/\/ Variables de estado\r\n let contadorValor = 0;\r\n \r\n \/\/ Funci\u00f3n para actualizar el contador\r\n function actualizarContador() {\r\n contador.textContent = contadorValor;\r\n \/\/ Cambiar color seg\u00fan el valor\r\n if (contadorValor > 0) {\r\n contador.style.color = '#2ecc71';\r\n } else if (contadorValor < 0) {\r\n contador.style.color = '#e74c3c';\r\n } else {\r\n contador.style.color = '#3498db';\r\n }\r\n }\r\n \r\n \/\/ Funci\u00f3n para agregar elemento a la lista\r\n function agregarElemento(texto) {\r\n if (!texto.trim()) {\r\n alert('Por favor, escribe algo para agregar a la lista');\r\n return;\r\n }\r\n \r\n const nuevoItem = document.createElement('div');\r\n nuevoItem.className = 'lista-item';\r\n \r\n const span = document.createElement('span');\r\n span.textContent = texto;\r\n \r\n const btnEliminar = document.createElement('button');\r\n btnEliminar.textContent = 'Eliminar';\r\n btnEliminar.style.cssText = 'width: auto; padding: 5px 10px;';\r\n btnEliminar.className = 'btnEliminar';\r\n \r\n btnEliminar.addEventListener('click', function() {\r\n nuevoItem.remove();\r\n });\r\n \r\n nuevoItem.appendChild(span);\r\n nuevoItem.appendChild(btnEliminar);\r\n listaElementos.appendChild(nuevoItem);\r\n \r\n \/\/ Limpiar el campo de entrada\r\n nuevoElemento.value = '';\r\n nuevoElemento.focus();\r\n }\r\n \r\n \/\/ Event Listeners\r\n \r\n \/\/ Formulario\r\n btnEnviar.addEventListener('click', function() {\r\n const nombre = document.getElementById('nombre').value;\r\n const email = document.getElementById('email').value;\r\n const opcion = document.getElementById('opcion').value;\r\n \r\n if (!nombre || !email || !opcion) {\r\n alert('Por favor, completa todos los campos del formulario');\r\n return;\r\n }\r\n \r\n const opcionTexto = document.getElementById('opcion').options[document.getElementById('opcion').selectedIndex].text;\r\n \r\n datosMostrados.innerHTML = `\r\n <strong>Nombre:<\/strong> ${nombre}<br>\r\n <strong>Email:<\/strong> ${email}<br>\r\n <strong>Opci\u00f3n seleccionada:<\/strong> ${opcionTexto}\r\n `;\r\n \r\n resultadoForm.classList.add('visible');\r\n \r\n \/\/ Mostrar mensaje de \u00e9xito\r\n setTimeout(() => {\r\n alert('Formulario enviado correctamente');\r\n }, 300);\r\n });\r\n \r\n \/\/ Contador\r\n btnAumentar.addEventListener('click', function() {\r\n contadorValor++;\r\n actualizarContador();\r\n });\r\n \r\n btnDisminuir.addEventListener('click', function() {\r\n contadorValor--;\r\n actualizarContador();\r\n });\r\n \r\n btnReset.addEventListener('click', function() {\r\n contadorValor = 0;\r\n actualizarContador();\r\n });\r\n \r\n \/\/ Lista de elementos\r\n btnAgregar.addEventListener('click', function() {\r\n agregarElemento(nuevoElemento.value);\r\n });\r\n \r\n \/\/ Permitir agregar con Enter\r\n nuevoElemento.addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n agregarElemento(this.value);\r\n }\r\n });\r\n \r\n \/\/ Asignar eventos a los botones de eliminar existentes\r\n document.querySelectorAll('.btnEliminar').forEach(boton => {\r\n boton.addEventListener('click', function() {\r\n this.parentElement.remove();\r\n });\r\n });\r\n \r\n \/\/ Inicializar contador\r\n actualizarContador();\r\n \r\n \/\/ Mostrar mensaje de que todo est\u00e1 listo\r\n console.log('Aplicaci\u00f3n inicializada correctamente');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f01d5ca e-flex e-con-boxed e-con e-parent\" data-id=\"f01d5ca\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d782f72 elementor-widget elementor-widget-html\" data-id=\"d782f72\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Aplicaci\u00f3n Web Funcional<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);\r\n color: #333;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n \r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background-color: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n overflow: hidden;\r\n }\r\n \r\n header {\r\n background: linear-gradient(to right, #2c3e50, #4a6491);\r\n color: white;\r\n padding: 25px;\r\n text-align: center;\r\n }\r\n \r\n h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n }\r\n \r\n main {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 30px;\r\n gap: 30px;\r\n }\r\n \r\n .panel {\r\n flex: 1;\r\n min-width: 300px;\r\n background: white;\r\n border-radius: 10px;\r\n padding: 25px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n border-top: 5px solid #3498db;\r\n }\r\n \r\n .panel h2 {\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #f1f1f1;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n input, select, button {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 2px solid #ddd;\r\n border-radius: 6px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n }\r\n \r\n input:focus, select:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);\r\n }\r\n \r\n button {\r\n background: linear-gradient(to right, #3498db, #2980b9);\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n margin-top: 10px;\r\n }\r\n \r\n button:hover {\r\n background: linear-gradient(to right, #2980b9, #1c5a87);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .resultado {\r\n background-color: #f8f9fa;\r\n border-left: 4px solid #2ecc71;\r\n padding: 20px;\r\n margin-top: 25px;\r\n border-radius: 0 6px 6px 0;\r\n display: none;\r\n }\r\n \r\n .resultado.visible {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n \r\n .lista-item {\r\n padding: 12px 15px;\r\n background: #f8f9fa;\r\n margin-bottom: 10px;\r\n border-radius: 6px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-left: 4px solid #3498db;\r\n }\r\n \r\n .contador {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #3498db;\r\n text-align: center;\r\n margin: 20px 0;\r\n }\r\n \r\n .acciones {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n }\r\n \r\n .acciones button {\r\n flex: 1;\r\n }\r\n \r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n background-color: #2c3e50;\r\n color: white;\r\n margin-top: 30px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n main {\r\n flex-direction: column;\r\n }\r\n \r\n .panel {\r\n min-width: 100%;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1>Aplicaci\u00f3n Web Funcional<\/h1>\r\n <p class=\"subtitle\">Soluci\u00f3n completa HTML + CSS + JavaScript en un solo archivo<\/p>\r\n <\/header>\r\n \r\n <main>\r\n <div class=\"panel\">\r\n <h2>Formulario de Ejemplo<\/h2>\r\n <div class=\"form-group\">\r\n <label for=\"nombre\">Nombre:<\/label>\r\n <input type=\"text\" id=\"nombre\" placeholder=\"Escribe tu nombre\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\">Correo Electr\u00f3nico:<\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"ejemplo@correo.com\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"opcion\">Selecciona una opci\u00f3n:<\/label>\r\n <select id=\"opcion\">\r\n <option value=\"\">-- Elige una opci\u00f3n --<\/option>\r\n <option value=\"1\">Opci\u00f3n 1<\/option>\r\n <option value=\"2\">Opci\u00f3n 2<\/option>\r\n <option value=\"3\">Opci\u00f3n 3<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button id=\"btnEnviar\">Enviar Datos<\/button>\r\n \r\n <div class=\"resultado\" id=\"resultadoForm\">\r\n <h3>Datos Enviados:<\/h3>\r\n <p id=\"datosMostrados\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"panel\">\r\n <h2>Contador Interactivo<\/h2>\r\n <div class=\"contador\" id=\"contador\">0<\/div>\r\n \r\n <div class=\"acciones\">\r\n <button id=\"btnAumentar\">Aumentar<\/button>\r\n <button id=\"btnDisminuir\">Disminuir<\/button>\r\n <button id=\"btnReset\">Reiniciar<\/button>\r\n <\/div>\r\n \r\n <h2 style=\"margin-top: 30px;\">Lista de Elementos<\/h2>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"nuevoElemento\" placeholder=\"Escribe un nuevo elemento\">\r\n <button id=\"btnAgregar\">Agregar a la lista<\/button>\r\n <\/div>\r\n \r\n <div id=\"listaElementos\">\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 1<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 2<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <footer>\r\n <p>Aplicaci\u00f3n web funcional - Todos los elementos est\u00e1n operativos<\/p>\r\n <p>Prueba los diferentes componentes para verificar su funcionamiento<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Esperar a que el DOM est\u00e9 completamente cargado\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('Documento cargado y listo');\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const btnEnviar = document.getElementById('btnEnviar');\r\n const resultadoForm = document.getElementById('resultadoForm');\r\n const datosMostrados = document.getElementById('datosMostrados');\r\n const contador = document.getElementById('contador');\r\n const btnAumentar = document.getElementById('btnAumentar');\r\n const btnDisminuir = document.getElementById('btnDisminuir');\r\n const btnReset = document.getElementById('btnReset');\r\n const btnAgregar = document.getElementById('btnAgregar');\r\n const nuevoElemento = document.getElementById('nuevoElemento');\r\n const listaElementos = document.getElementById('listaElementos');\r\n \r\n \/\/ Variables de estado\r\n let contadorValor = 0;\r\n \r\n \/\/ Funci\u00f3n para actualizar el contador\r\n function actualizarContador() {\r\n contador.textContent = contadorValor;\r\n \/\/ Cambiar color seg\u00fan el valor\r\n if (contadorValor > 0) {\r\n contador.style.color = '#2ecc71';\r\n } else if (contadorValor < 0) {\r\n contador.style.color = '#e74c3c';\r\n } else {\r\n contador.style.color = '#3498db';\r\n }\r\n }\r\n \r\n \/\/ Funci\u00f3n para agregar elemento a la lista\r\n function agregarElemento(texto) {\r\n if (!texto.trim()) {\r\n alert('Por favor, escribe algo para agregar a la lista');\r\n return;\r\n }\r\n \r\n const nuevoItem = document.createElement('div');\r\n nuevoItem.className = 'lista-item';\r\n \r\n const span = document.createElement('span');\r\n span.textContent = texto;\r\n \r\n const btnEliminar = document.createElement('button');\r\n btnEliminar.textContent = 'Eliminar';\r\n btnEliminar.style.cssText = 'width: auto; padding: 5px 10px;';\r\n btnEliminar.className = 'btnEliminar';\r\n \r\n btnEliminar.addEventListener('click', function() {\r\n nuevoItem.remove();\r\n });\r\n \r\n nuevoItem.appendChild(span);\r\n nuevoItem.appendChild(btnEliminar);\r\n listaElementos.appendChild(nuevoItem);\r\n \r\n \/\/ Limpiar el campo de entrada\r\n nuevoElemento.value = '';\r\n nuevoElemento.focus();\r\n }\r\n \r\n \/\/ Event Listeners\r\n \r\n \/\/ Formulario\r\n btnEnviar.addEventListener('click', function() {\r\n const nombre = document.getElementById('nombre').value;\r\n const email = document.getElementById('email').value;\r\n const opcion = document.getElementById('opcion').value;\r\n \r\n if (!nombre || !email || !opcion) {\r\n alert('Por favor, completa todos los campos del formulario');\r\n return;\r\n }\r\n \r\n const opcionTexto = document.getElementById('opcion').options[document.getElementById('opcion').selectedIndex].text;\r\n \r\n datosMostrados.innerHTML = `\r\n <strong>Nombre:<\/strong> ${nombre}<br>\r\n <strong>Email:<\/strong> ${email}<br>\r\n <strong>Opci\u00f3n seleccionada:<\/strong> ${opcionTexto}\r\n `;\r\n \r\n resultadoForm.classList.add('visible');\r\n \r\n \/\/ Mostrar mensaje de \u00e9xito\r\n setTimeout(() => {\r\n alert('Formulario enviado correctamente');\r\n }, 300);\r\n });\r\n \r\n \/\/ Contador\r\n btnAumentar.addEventListener('click', function() {\r\n contadorValor++;\r\n actualizarContador();\r\n });\r\n \r\n btnDisminuir.addEventListener('click', function() {\r\n contadorValor--;\r\n actualizarContador();\r\n });\r\n \r\n btnReset.addEventListener('click', function() {\r\n contadorValor = 0;\r\n actualizarContador();\r\n });\r\n \r\n \/\/ Lista de elementos\r\n btnAgregar.addEventListener('click', function() {\r\n agregarElemento(nuevoElemento.value);\r\n });\r\n \r\n \/\/ Permitir agregar con Enter\r\n nuevoElemento.addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n agregarElemento(this.value);\r\n }\r\n });\r\n \r\n \/\/ Asignar eventos a los botones de eliminar existentes\r\n document.querySelectorAll('.btnEliminar').forEach(boton => {\r\n boton.addEventListener('click', function() {\r\n this.parentElement.remove();\r\n });\r\n });\r\n \r\n \/\/ Inicializar contador\r\n actualizarContador();\r\n \r\n \/\/ Mostrar mensaje de que todo est\u00e1 listo\r\n console.log('Aplicaci\u00f3n inicializada correctamente');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Aplicaci\u00f3n Web Funcional Aplicaci\u00f3n Web Funcional Soluci\u00f3n completa HTML + CSS + JavaScript en un solo archivo Formulario de Ejemplo Nombre: Correo Electr\u00f3nico: Selecciona una opci\u00f3n: — Elige una opci\u00f3n —Opci\u00f3n 1Opci\u00f3n 2Opci\u00f3n 3 Enviar Datos Datos Enviados: Contador Interactivo 0 Aumentar Disminuir Reiniciar Lista de Elementos Agregar a la lista Elemento de ejemplo 1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-602","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":5,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/602\/revisions"}],"predecessor-version":[{"id":610,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/602\/revisions\/610"}],"wp:attachment":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/media?parent=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Aplicaci\u00f3n Web Funcional<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);\r\n color: #333;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n \r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background-color: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n overflow: hidden;\r\n }\r\n \r\n header {\r\n background: linear-gradient(to right, #2c3e50, #4a6491);\r\n color: white;\r\n padding: 25px;\r\n text-align: center;\r\n }\r\n \r\n h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n }\r\n \r\n main {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 30px;\r\n gap: 30px;\r\n }\r\n \r\n .panel {\r\n flex: 1;\r\n min-width: 300px;\r\n background: white;\r\n border-radius: 10px;\r\n padding: 25px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n border-top: 5px solid #3498db;\r\n }\r\n \r\n .panel h2 {\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #f1f1f1;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n input, select, button {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 2px solid #ddd;\r\n border-radius: 6px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n }\r\n \r\n input:focus, select:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);\r\n }\r\n \r\n button {\r\n background: linear-gradient(to right, #3498db, #2980b9);\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n margin-top: 10px;\r\n }\r\n \r\n button:hover {\r\n background: linear-gradient(to right, #2980b9, #1c5a87);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .resultado {\r\n background-color: #f8f9fa;\r\n border-left: 4px solid #2ecc71;\r\n padding: 20px;\r\n margin-top: 25px;\r\n border-radius: 0 6px 6px 0;\r\n display: none;\r\n }\r\n \r\n .resultado.visible {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n \r\n .lista-item {\r\n padding: 12px 15px;\r\n background: #f8f9fa;\r\n margin-bottom: 10px;\r\n border-radius: 6px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-left: 4px solid #3498db;\r\n }\r\n \r\n .contador {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #3498db;\r\n text-align: center;\r\n margin: 20px 0;\r\n }\r\n \r\n .acciones {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n }\r\n \r\n .acciones button {\r\n flex: 1;\r\n }\r\n \r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n background-color: #2c3e50;\r\n color: white;\r\n margin-top: 30px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n main {\r\n flex-direction: column;\r\n }\r\n \r\n .panel {\r\n min-width: 100%;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1>Aplicaci\u00f3n Web Funcional<\/h1>\r\n <p class=\"subtitle\">Soluci\u00f3n completa HTML + CSS + JavaScript en un solo archivo<\/p>\r\n <\/header>\r\n \r\n <main>\r\n <div class=\"panel\">\r\n <h2>Formulario de Ejemplo<\/h2>\r\n <div class=\"form-group\">\r\n <label for=\"nombre\">Nombre:<\/label>\r\n <input type=\"text\" id=\"nombre\" placeholder=\"Escribe tu nombre\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\">Correo Electr\u00f3nico:<\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"ejemplo@correo.com\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"opcion\">Selecciona una opci\u00f3n:<\/label>\r\n <select id=\"opcion\">\r\n <option value=\"\">-- Elige una opci\u00f3n --<\/option>\r\n <option value=\"1\">Opci\u00f3n 1<\/option>\r\n <option value=\"2\">Opci\u00f3n 2<\/option>\r\n <option value=\"3\">Opci\u00f3n 3<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button id=\"btnEnviar\">Enviar Datos<\/button>\r\n \r\n <div class=\"resultado\" id=\"resultadoForm\">\r\n <h3>Datos Enviados:<\/h3>\r\n <p id=\"datosMostrados\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"panel\">\r\n <h2>Contador Interactivo<\/h2>\r\n <div class=\"contador\" id=\"contador\">0<\/div>\r\n \r\n <div class=\"acciones\">\r\n <button id=\"btnAumentar\">Aumentar<\/button>\r\n <button id=\"btnDisminuir\">Disminuir<\/button>\r\n <button id=\"btnReset\">Reiniciar<\/button>\r\n <\/div>\r\n \r\n <h2 style=\"margin-top: 30px;\">Lista de Elementos<\/h2>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"nuevoElemento\" placeholder=\"Escribe un nuevo elemento\">\r\n <button id=\"btnAgregar\">Agregar a la lista<\/button>\r\n <\/div>\r\n \r\n <div id=\"listaElementos\">\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 1<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 2<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <footer>\r\n <p>Aplicaci\u00f3n web funcional - Todos los elementos est\u00e1n operativos<\/p>\r\n <p>Prueba los diferentes componentes para verificar su funcionamiento<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Esperar a que el DOM est\u00e9 completamente cargado\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('Documento cargado y listo');\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const btnEnviar = document.getElementById('btnEnviar');\r\n const resultadoForm = document.getElementById('resultadoForm');\r\n const datosMostrados = document.getElementById('datosMostrados');\r\n const contador = document.getElementById('contador');\r\n const btnAumentar = document.getElementById('btnAumentar');\r\n const btnDisminuir = document.getElementById('btnDisminuir');\r\n const btnReset = document.getElementById('btnReset');\r\n const btnAgregar = document.getElementById('btnAgregar');\r\n const nuevoElemento = document.getElementById('nuevoElemento');\r\n const listaElementos = document.getElementById('listaElementos');\r\n \r\n \/\/ Variables de estado\r\n let contadorValor = 0;\r\n \r\n \/\/ Funci\u00f3n para actualizar el contador\r\n function actualizarContador() {\r\n contador.textContent = contadorValor;\r\n \/\/ Cambiar color seg\u00fan el valor\r\n if (contadorValor > 0) {\r\n contador.style.color = '#2ecc71';\r\n } else if (contadorValor < 0) {\r\n contador.style.color = '#e74c3c';\r\n } else {\r\n contador.style.color = '#3498db';\r\n }\r\n }\r\n \r\n \/\/ Funci\u00f3n para agregar elemento a la lista\r\n function agregarElemento(texto) {\r\n if (!texto.trim()) {\r\n alert('Por favor, escribe algo para agregar a la lista');\r\n return;\r\n }\r\n \r\n const nuevoItem = document.createElement('div');\r\n nuevoItem.className = 'lista-item';\r\n \r\n const span = document.createElement('span');\r\n span.textContent = texto;\r\n \r\n const btnEliminar = document.createElement('button');\r\n btnEliminar.textContent = 'Eliminar';\r\n btnEliminar.style.cssText = 'width: auto; padding: 5px 10px;';\r\n btnEliminar.className = 'btnEliminar';\r\n \r\n btnEliminar.addEventListener('click', function() {\r\n nuevoItem.remove();\r\n });\r\n \r\n nuevoItem.appendChild(span);\r\n nuevoItem.appendChild(btnEliminar);\r\n listaElementos.appendChild(nuevoItem);\r\n \r\n \/\/ Limpiar el campo de entrada\r\n nuevoElemento.value = '';\r\n nuevoElemento.focus();\r\n }\r\n \r\n \/\/ Event Listeners\r\n \r\n \/\/ Formulario\r\n btnEnviar.addEventListener('click', function() {\r\n const nombre = document.getElementById('nombre').value;\r\n const email = document.getElementById('email').value;\r\n const opcion = document.getElementById('opcion').value;\r\n \r\n if (!nombre || !email || !opcion) {\r\n alert('Por favor, completa todos los campos del formulario');\r\n return;\r\n }\r\n \r\n const opcionTexto = document.getElementById('opcion').options[document.getElementById('opcion').selectedIndex].text;\r\n \r\n datosMostrados.innerHTML = `\r\n <strong>Nombre:<\/strong> ${nombre}<br>\r\n <strong>Email:<\/strong> ${email}<br>\r\n <strong>Opci\u00f3n seleccionada:<\/strong> ${opcionTexto}\r\n `;\r\n \r\n resultadoForm.classList.add('visible');\r\n \r\n \/\/ Mostrar mensaje de \u00e9xito\r\n setTimeout(() => {\r\n alert('Formulario enviado correctamente');\r\n }, 300);\r\n });\r\n \r\n \/\/ Contador\r\n btnAumentar.addEventListener('click', function() {\r\n contadorValor++;\r\n actualizarContador();\r\n });\r\n \r\n btnDisminuir.addEventListener('click', function() {\r\n contadorValor--;\r\n actualizarContador();\r\n });\r\n \r\n btnReset.addEventListener('click', function() {\r\n contadorValor = 0;\r\n actualizarContador();\r\n });\r\n \r\n \/\/ Lista de elementos\r\n btnAgregar.addEventListener('click', function() {\r\n agregarElemento(nuevoElemento.value);\r\n });\r\n \r\n \/\/ Permitir agregar con Enter\r\n nuevoElemento.addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n agregarElemento(this.value);\r\n }\r\n });\r\n \r\n \/\/ Asignar eventos a los botones de eliminar existentes\r\n document.querySelectorAll('.btnEliminar').forEach(boton => {\r\n boton.addEventListener('click', function() {\r\n this.parentElement.remove();\r\n });\r\n });\r\n \r\n \/\/ Inicializar contador\r\n actualizarContador();\r\n \r\n \/\/ Mostrar mensaje de que todo est\u00e1 listo\r\n console.log('Aplicaci\u00f3n inicializada correctamente');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f01d5ca e-flex e-con-boxed e-con e-parent\" data-id=\"f01d5ca\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d782f72 elementor-widget elementor-widget-html\" data-id=\"d782f72\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Aplicaci\u00f3n Web Funcional<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);\r\n color: #333;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n \r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background-color: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n overflow: hidden;\r\n }\r\n \r\n header {\r\n background: linear-gradient(to right, #2c3e50, #4a6491);\r\n color: white;\r\n padding: 25px;\r\n text-align: center;\r\n }\r\n \r\n h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n }\r\n \r\n main {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 30px;\r\n gap: 30px;\r\n }\r\n \r\n .panel {\r\n flex: 1;\r\n min-width: 300px;\r\n background: white;\r\n border-radius: 10px;\r\n padding: 25px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n border-top: 5px solid #3498db;\r\n }\r\n \r\n .panel h2 {\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #f1f1f1;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n input, select, button {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 2px solid #ddd;\r\n border-radius: 6px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n }\r\n \r\n input:focus, select:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);\r\n }\r\n \r\n button {\r\n background: linear-gradient(to right, #3498db, #2980b9);\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n margin-top: 10px;\r\n }\r\n \r\n button:hover {\r\n background: linear-gradient(to right, #2980b9, #1c5a87);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .resultado {\r\n background-color: #f8f9fa;\r\n border-left: 4px solid #2ecc71;\r\n padding: 20px;\r\n margin-top: 25px;\r\n border-radius: 0 6px 6px 0;\r\n display: none;\r\n }\r\n \r\n .resultado.visible {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n \r\n .lista-item {\r\n padding: 12px 15px;\r\n background: #f8f9fa;\r\n margin-bottom: 10px;\r\n border-radius: 6px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-left: 4px solid #3498db;\r\n }\r\n \r\n .contador {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #3498db;\r\n text-align: center;\r\n margin: 20px 0;\r\n }\r\n \r\n .acciones {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n }\r\n \r\n .acciones button {\r\n flex: 1;\r\n }\r\n \r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n background-color: #2c3e50;\r\n color: white;\r\n margin-top: 30px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n main {\r\n flex-direction: column;\r\n }\r\n \r\n .panel {\r\n min-width: 100%;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1>Aplicaci\u00f3n Web Funcional<\/h1>\r\n <p class=\"subtitle\">Soluci\u00f3n completa HTML + CSS + JavaScript en un solo archivo<\/p>\r\n <\/header>\r\n \r\n <main>\r\n <div class=\"panel\">\r\n <h2>Formulario de Ejemplo<\/h2>\r\n <div class=\"form-group\">\r\n <label for=\"nombre\">Nombre:<\/label>\r\n <input type=\"text\" id=\"nombre\" placeholder=\"Escribe tu nombre\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\">Correo Electr\u00f3nico:<\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"ejemplo@correo.com\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"opcion\">Selecciona una opci\u00f3n:<\/label>\r\n <select id=\"opcion\">\r\n <option value=\"\">-- Elige una opci\u00f3n --<\/option>\r\n <option value=\"1\">Opci\u00f3n 1<\/option>\r\n <option value=\"2\">Opci\u00f3n 2<\/option>\r\n <option value=\"3\">Opci\u00f3n 3<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button id=\"btnEnviar\">Enviar Datos<\/button>\r\n \r\n <div class=\"resultado\" id=\"resultadoForm\">\r\n <h3>Datos Enviados:<\/h3>\r\n <p id=\"datosMostrados\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"panel\">\r\n <h2>Contador Interactivo<\/h2>\r\n <div class=\"contador\" id=\"contador\">0<\/div>\r\n \r\n <div class=\"acciones\">\r\n <button id=\"btnAumentar\">Aumentar<\/button>\r\n <button id=\"btnDisminuir\">Disminuir<\/button>\r\n <button id=\"btnReset\">Reiniciar<\/button>\r\n <\/div>\r\n \r\n <h2 style=\"margin-top: 30px;\">Lista de Elementos<\/h2>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"nuevoElemento\" placeholder=\"Escribe un nuevo elemento\">\r\n <button id=\"btnAgregar\">Agregar a la lista<\/button>\r\n <\/div>\r\n \r\n <div id=\"listaElementos\">\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 1<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 2<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <footer>\r\n <p>Aplicaci\u00f3n web funcional - Todos los elementos est\u00e1n operativos<\/p>\r\n <p>Prueba los diferentes componentes para verificar su funcionamiento<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Esperar a que el DOM est\u00e9 completamente cargado\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('Documento cargado y listo');\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const btnEnviar = document.getElementById('btnEnviar');\r\n const resultadoForm = document.getElementById('resultadoForm');\r\n const datosMostrados = document.getElementById('datosMostrados');\r\n const contador = document.getElementById('contador');\r\n const btnAumentar = document.getElementById('btnAumentar');\r\n const btnDisminuir = document.getElementById('btnDisminuir');\r\n const btnReset = document.getElementById('btnReset');\r\n const btnAgregar = document.getElementById('btnAgregar');\r\n const nuevoElemento = document.getElementById('nuevoElemento');\r\n const listaElementos = document.getElementById('listaElementos');\r\n \r\n \/\/ Variables de estado\r\n let contadorValor = 0;\r\n \r\n \/\/ Funci\u00f3n para actualizar el contador\r\n function actualizarContador() {\r\n contador.textContent = contadorValor;\r\n \/\/ Cambiar color seg\u00fan el valor\r\n if (contadorValor > 0) {\r\n contador.style.color = '#2ecc71';\r\n } else if (contadorValor < 0) {\r\n contador.style.color = '#e74c3c';\r\n } else {\r\n contador.style.color = '#3498db';\r\n }\r\n }\r\n \r\n \/\/ Funci\u00f3n para agregar elemento a la lista\r\n function agregarElemento(texto) {\r\n if (!texto.trim()) {\r\n alert('Por favor, escribe algo para agregar a la lista');\r\n return;\r\n }\r\n \r\n const nuevoItem = document.createElement('div');\r\n nuevoItem.className = 'lista-item';\r\n \r\n const span = document.createElement('span');\r\n span.textContent = texto;\r\n \r\n const btnEliminar = document.createElement('button');\r\n btnEliminar.textContent = 'Eliminar';\r\n btnEliminar.style.cssText = 'width: auto; padding: 5px 10px;';\r\n btnEliminar.className = 'btnEliminar';\r\n \r\n btnEliminar.addEventListener('click', function() {\r\n nuevoItem.remove();\r\n });\r\n \r\n nuevoItem.appendChild(span);\r\n nuevoItem.appendChild(btnEliminar);\r\n listaElementos.appendChild(nuevoItem);\r\n \r\n \/\/ Limpiar el campo de entrada\r\n nuevoElemento.value = '';\r\n nuevoElemento.focus();\r\n }\r\n \r\n \/\/ Event Listeners\r\n \r\n \/\/ Formulario\r\n btnEnviar.addEventListener('click', function() {\r\n const nombre = document.getElementById('nombre').value;\r\n const email = document.getElementById('email').value;\r\n const opcion = document.getElementById('opcion').value;\r\n \r\n if (!nombre || !email || !opcion) {\r\n alert('Por favor, completa todos los campos del formulario');\r\n return;\r\n }\r\n \r\n const opcionTexto = document.getElementById('opcion').options[document.getElementById('opcion').selectedIndex].text;\r\n \r\n datosMostrados.innerHTML = `\r\n <strong>Nombre:<\/strong> ${nombre}<br>\r\n <strong>Email:<\/strong> ${email}<br>\r\n <strong>Opci\u00f3n seleccionada:<\/strong> ${opcionTexto}\r\n `;\r\n \r\n resultadoForm.classList.add('visible');\r\n \r\n \/\/ Mostrar mensaje de \u00e9xito\r\n setTimeout(() => {\r\n alert('Formulario enviado correctamente');\r\n }, 300);\r\n });\r\n \r\n \/\/ Contador\r\n btnAumentar.addEventListener('click', function() {\r\n contadorValor++;\r\n actualizarContador();\r\n });\r\n \r\n btnDisminuir.addEventListener('click', function() {\r\n contadorValor--;\r\n actualizarContador();\r\n });\r\n \r\n btnReset.addEventListener('click', function() {\r\n contadorValor = 0;\r\n actualizarContador();\r\n });\r\n \r\n \/\/ Lista de elementos\r\n btnAgregar.addEventListener('click', function() {\r\n agregarElemento(nuevoElemento.value);\r\n });\r\n \r\n \/\/ Permitir agregar con Enter\r\n nuevoElemento.addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n agregarElemento(this.value);\r\n }\r\n });\r\n \r\n \/\/ Asignar eventos a los botones de eliminar existentes\r\n document.querySelectorAll('.btnEliminar').forEach(boton => {\r\n boton.addEventListener('click', function() {\r\n this.parentElement.remove();\r\n });\r\n });\r\n \r\n \/\/ Inicializar contador\r\n actualizarContador();\r\n \r\n \/\/ Mostrar mensaje de que todo est\u00e1 listo\r\n console.log('Aplicaci\u00f3n inicializada correctamente');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Aplicaci\u00f3n Web Funcional Aplicaci\u00f3n Web Funcional Soluci\u00f3n completa HTML + CSS + JavaScript en un solo archivo Formulario de Ejemplo Nombre: Correo Electr\u00f3nico: Selecciona una opci\u00f3n: — Elige una opci\u00f3n —Opci\u00f3n 1Opci\u00f3n 2Opci\u00f3n 3 Enviar Datos Datos Enviados: Contador Interactivo 0 Aumentar Disminuir Reiniciar Lista de Elementos Agregar a la lista Elemento de ejemplo 1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-602","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":5,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/602\/revisions"}],"predecessor-version":[{"id":610,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/602\/revisions\/610"}],"wp:attachment":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/media?parent=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}