-
Explicación:
<!DOCTYPE html>:
Esto le dice al navegador que estamos utilizando la última versión de HTML, que es HTML5.<html lang="en">:
Esta etiqueta indica que el contenido de la página está en inglés. La etiqueta <html> es la raíz del documento HTML.Dentro de <head>:
Aquí se colocan metadatos y configuraciones importantes para el documento.<meta charset="UTF-8">:
Define la codificación de caracteres, permitiendo que se muestren correctamente todos los caracteres, incluidos acentos y símbolos especiales.<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Esto hace que la página sea responsiva, ajustándose bien a diferentes tamaños de pantalla, como móviles y computadoras.<title>Interactive Lamp</title>:
Este es el título de la página que aparece en la pestaña del navegador.<link rel="stylesheet" href="styles.css">:
Vincula un archivo CSS llamado "styles.css" que contiene el diseño y estilos visuales de la página.
Dentro de <body>:
Aquí se coloca el contenido visible de la página.<div id="lamp" class="lamp"></div>:
Crea un contenedor <div> con un identificador "lamp" y una clase "lamp". Este elemento probablemente representa la lámpara en nuestra página interactiva.
<script src="script.js"></script>:
Incluye un archivo JavaScript llamado "script.js" que probablemente maneja la interactividad de la lámpara, como encenderla o apagarla.
Este es un ejemplo básico de una estructura HTML que incorpora estilos y scripts externos para crear una página web interactiva.
-
Explicación:
body: Este selector aplica estilos al elemento <body> de la página.
display: flex;: Activa el modelo de diseño Flexbox, que facilita la alineación y distribución de los elementos en el contenedor.
justify-content: center;: Centra los elementos horizontalmente dentro del contenedor.
align-items: center;: Centra los elementos verticalmente dentro del contenedor.
height: 100vh;: Establece la altura del contenedor al 100% de la altura visible de la ventana del navegador.
background-color: #333;: Asigna un color de fondo oscuro (gris).
margin: 0;: Elimina cualquier margen predeterminado del contenedor.
.lamp: Este selector corresponde a los elementos con la clase lamp.
width: 100px; y height: 100px;: Define un cuadrado de 100x100 píxeles.
background-color: #555;: Establece un color de fondo gris oscuro.
border-radius: 50%;: Convierte el cuadrado en un círculo.
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);: Añade una sombra alrededor del círculo, simulando un efecto de elevación.
transition: background-color 0.3s, box-shadow 0.3s;: Aplica una transición suave de 0.3 segundos a los cambios en el color de fondo y la sombra.
.lamp.on: Este selector se aplica cuando el elemento con clase lamp también tiene la clase on.
background-color: #ffeb3b;: Cambia el color de fondo a un amarillo brillante.
box-shadow: 0 0 50px #ffeb3b;: Incrementa el tamaño y el brillo de la sombra, simulando que la "lámpara" está encendida.
Este código configura la apariencia de un elemento circular que puede simular una lámpara, cambiando su color y sombra cuando se activa la clase on.
-
Explicación:
document.addEventListener("DOMContentLoaded", function () {...});:
Esta parte del código se asegura de que el script se ejecute solo después de que el documento HTML haya sido completamente cargado. Esto es importante porque garantiza que todos los elementos del DOM estén disponibles para ser manipulados.
const lamp = document.getElementById("lamp");:
Aquí, estamos seleccionando un elemento HTML con el id "lamp" y lo estamos guardando en una constante llamada lamp. Este elemento podría ser, por ejemplo, una imagen o un div que representa una lámpara en la página web.
lamp.addEventListener("click", function () {...});:
En esta línea, estamos agregando un evento "click" al elemento lamp. Esto significa que cada vez que el usuario haga clic en el elemento "lamp", se ejecutará la función que sigue.
lamp.classList.toggle("on");:
Dentro de la función del evento "click", usamos classList.toggle("on"). Este método alterna (añade o quita) la clase CSS "on" al elemento lamp. Si la clase "on" ya está presente, se eliminará; si no está presente, se añadirá. Esto puede ser útil para cambiar estilos, como simular encender y apagar una lámpara, cambiando su apariencia con CSS.
En resumen, este código permite que al hacer clic sobre un elemento con el id "lamp", se alterne una clase CSS llamada "on", posiblemente cambiando su aspecto visual en la página web.