Cambio dinámico de texto en la página mediante JavaScript
En esta lección continuaremos familiarizándonos con JavaScript y aplicaremos nuestros conocimientos en la práctica para crear una interacción dinámica con el usuario. Agregaremos un campo de entrada a la página y cada vez que se modifique el texto en este campo, nuestro encabezado se actualizará en tiempo real. Esto no solo te dará más experiencia trabajando con el DOM, sino que también te mostrará lo fácil que es crear elementos interactivos con JavaScript.
Introducción:
En esta lección aprenderemos a cambiar el texto en la página en tiempo real, utilizando JavaScript. Trabajaremos con elementos de formulario y el DOM (Document Object Model). Este es un ejercicio simple pero poderoso que permite crear fácilmente páginas web dinámicas y, lo más importante, interactuar con el usuario.
Paso 1: Actualicemos nuestra página HTML
Primero agregaremos un campo de texto (<input>) entre el encabezado y el botón. Este campo se usará para ingresar texto que modificará el contenido del encabezado.
Así es como se verá nuestro HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="animated-title" id="dynamicText">Hello World!</h1>
<input type="text" id="textInput" placeholder="Enter text here.." />
<button id="changeColorButton">Change background color</button>
<script src="script.js"></script>
</body>
</html>Paso 2: Agregando JavaScript para manejar cambios
Ahora vamos a agregar el código JavaScript que va a seguir los cambios en el campo de entrada y actualizar el texto del encabezado.
En nuestro archivo script.js agregamos lo siguiente:
const dynamicText = document.getElementById("dynamicText");
const textInput = document.getElementById("textInput");
textInput.addEventListener("input", function() {
dynamicText.textContent = textInput.value;
});
document.getElementById("changeColorButton").addEventListener("click", function() {
document.body.style.background = `linear-gradient(45deg, #${Math.floor(Math.random()*16777215).toString(16)}, #${Math.floor(Math.random()*16777215).toString(16)})`;
});Lo que hicimos aquí:
- Agregamos un evento oyente al campo de entrada para que cada vez que se cambie el texto en el campo, se actualice el texto en el título.
- Todas las modificaciones suceden instantáneamente, lo que crea un efecto de interacción dinámica con el usuario.
Paso 3: Estilo para el nuevo elemento
Para el campo de entrada, agregaremos algunos estilos para que se vea bien en la página:
body {
background: linear-gradient(to right, #ff7e5f, #feb47b);
font-family: 'Arial', sans-serif;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
}
h1 {
font-size: 3rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: pulse 2s infinite;
}
input {
padding: 20px;
font-size: 1.3rem;
border-radius: 5px;
border: 1px solid #ddd;
margin: 20px 0;
width: 80%;
max-width: 400px;
outline: none;
opacity: 0.8;
}
button {
background-color: #5d439e;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 20px;
cursor: pointer;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.3s ease;
}
button:hover {
background-color: #4a3380;
transform: translateY(-2px);
}
button:active {
background-color: #3e8e41;
transform: translateY(2px);
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}Paso 4: Probando
Ahora que hemos actualizado HTML, CSS y JavaScript, ¡es hora de hacer pruebas! Abre la página en el navegador y verás cómo el texto en el encabezado cambia según lo que escribas en el campo de entrada. Al presionar el botón, el fondo de la página cambiará a un degradado aleatorio.
Conclusión
¡Felicitaciones! Acabas de crear tu primera página dinámica que actualiza el contenido en tiempo real. Es un excelente ejemplo de cómo se puede utilizar JavaScript para interactuar con el usuario y hacer que la página sea interactiva.
¿Qué sigue?
Esta lección fue la última en un breve ciclo de Inicio Rápido. Con unos pocos pasos simples, has aprendido los conceptos básicos de trabajar con el DOM, eventos e interacción con el usuario. Comenzamos con conceptos básicos y creamos algunos elementos interactivos.
¡Pero esto es solo el principio! En la próxima lección comenzaremos a desarrollar un proyecto real, donde aprenderemos nuevas tecnologías, herramientas y posibilidades. ¡Prepárate para crear una aplicación web completa con lógica y funcionalidad reales!