🦋 "¡Bienvenido a SP Universo, al fascinante mundo del desarrollo web! En este emocionante tutorial, aprenderás cómo lograr un efecto de encendido y apagado con tan solo un clic, utilizando las poderosas herramientas de HTML, CSS y JavaScript. Descubre los secretos detrás de la magia digital mientras te sumerges en la creación de una lámpara virtual, iluminando tu página web con estilo y creatividad.
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Luz animada</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Encendido y Apagado</h1>
<div id="cambio" class="apagado"></div>
<button id="boton" onClick="cambia()">ENCENDER</button>
<script src="script.js"></script>
</body>
</html>
CSS
#cambio{
width:280px;
margin:80px auto;
height:260px;
line-height:250px; /* establecer la distancia entre líneas de texto*/
text-align:center;
font-size:1em; /* 1em = 16px */
border-radius: 60%;
box-shadow: 0px 10px 20px 0px rgb(201, 22, 147); /* sombra al rededor de la imagen */
}
h1{
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
text-align: center;
margin: 40px;
font-size: 40px;
}
button{
width:150px;
height:40px;
line-height:40px;
text-align:center;
font-weight:bold; /* texto en negrita */
margin-left:45%; /* establece el margen para los 4 lados */
background:#700e4b;
color:#fff;
cursor:pointer;
border-radius: 50%;
border: groove;
border: 10px;
}
button:hover{
background:#837C7C;
}
.encendido{
background:url(/lamparas.png) no-repeat ;
}
.apagado{
background:url(/lamparas.png) no-repeat -304px -2px;
}
JAVASCRIPT
const boton = document.querySelector("#boton");
//busca en el documento HTML el primer elemento que tenga el ID "boton"
//y lo asigna a la variable boton.
//Una vez que tienes el elemento almacenado en la variable, puedes manipularlo,
//agregar eventos, cambiar propiedades, entre otras cosas.
let encendido = true; //representar el estado de un interruptor
boton.addEventListener("click", cambiar);
//una función = un conjunto de instrucciones que realiza una tarea o calcula un valor
// if= evalua la condición, si es verdadera la ejecuta
function cambiar(){
if(encendido == true){
document.getElementById('cambio').className = 'encendido';
document.getElementById('boton').innerHTML = 'APAGAR';
document.body.style.background = 'radial-gradient(circle, #e2f107, #720a4a)';
encendido = false;
}else{
document.getElementById('cambio').className = 'apagado';
document.getElementById('boton').innerHTML = 'ENCENDER';
document.body.style.background = 'radial-gradient(circle, #220f0b, #720a4a)';
// Cambia el color de fondo de la página al dar clic en el boton
encendido = true;
}
}
