馃殌 ¡Bienvenido al canal SP Universo! 馃殌
馃帹 ¿Te has preguntado c贸mo darle un toque 煤nico a tu p谩gina web con un simple clic? En este emocionante tutorial, te guiaremos paso a paso a trav茅s del proceso de implementar un interruptor de modo claro a oscuro utilizando Javascript. ¡No necesitas ser un experto en programaci贸n para lograrlo!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claro, Oscuro</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Mono:wght@100;200&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<img class="logotipo" src="img/SP-EVOLUTION-SLOGAN-2.png" width="100" height="100">
<div class="enlaces">
<a href="#">Inicio</a>
<a href="#">Nuestro Equipo</a>
<a href="#">Cont谩ctenos</a>
<buttom class="switch" id="switch">
<span><i class="fas fa-sun"></i></span>
<span><i class="fas fa-moon"></i></span>
</buttom>
</div>
</nav>
<section class="opinion" id="opinion">
<h2 class="heading">Nuestro Equipo</h2>
<div class="row">
<div class="columns">
<img src="img/ejecutiva.jpg" alt="">
<h3>Daniela Vazco</h3>
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro velit rem, perspiciatis hic mollitia similique voluptas eos deserunt iste consequuntur impedit expedita veniam. Tempore molestiae, officiis consequatur commodi vero iste?</p>
<div class="social-links">
<a href="https://www.facebook.com/TuUsuarioDeFacebook" target="_blank">
<img src="img/face.png" alt="Facebook">
</a>
<a href="https://github.com/TuUsuarioDeGitHub" target="_blank">
<img src="img/github.png" alt="GitHub">
</a>
</div>
</div>
<div class="columns">
<img src="img/ejecutivo.jpg" alt="">
<h3>Esteban Palacio</h3>
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius in repellendus est ipsa id laborum alias incidunt sapiente, magni ducimus voluptate, asperiores voluptates? Tempore, atque aliquid exercitationem provident accusantium culpa!</p>
<div class="social-links">
<a href="https://www.facebook.com/TuUsuarioDeFacebook" target="_blank">
<img src="img/face.png" alt="Facebook">
</a>
<a href="https://github.com/TuUsuarioDeGitHub" target="_blank">
<img src="img/github.png" alt="GitHub">
</a>
</div>
</div>
<div class="columns">
<img src="img/mujer2.jpg" alt="">
<h3>Sandra P茅rez</h3>
<p class="text-justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum corporis saepe est cum ducimus excepturi aperiam enim illo quaerat labore, consequatur impedit quos, mollitia eaque quae architecto exercitationem, sequi aliquid.</p>
<div class="social-links">
<a href="https://www.facebook.com/TuUsuarioDeFacebook" target="_blank">
<img src="img/face.png" alt="Facebook">
</a>
<a href="https://github.com/TuUsuarioDeGitHub" target="_blank">
<img src="img/github.png" alt="GitHub">
</a>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
CSS
*{
padding:0;
margin:0;
box-sizing:border-box; /*ancho y alto de los elementos dentro de la caja*/
}
body{
background:#dfdbdb;
font-family:Roboto,sans-serif;
}
body.dark{
background:#111; /*fondo osculo de la pag*/
}
a{
color:#222;
text-decoration:none; /*eliminar sub rayado , titulos*/
}
nav{
background:#0d7ec0;
display:flex;
justify-content:space-between;
padding: 25px 20px;
font-size: 25px;
align-items:center;
}
body.dark nav a{
color:#c8c8c8;
}
nav .enlaces{
display:flex;
}
nav .enlaces a{
margin-right:40px;
}
nav .enlaces a:hover{
color:#0b9cf0;
}
.text-justify {
text-align: justify;
padding: 40px;
}
.switch{
background:#343d5b;
border-radius:1000px;
border:none;
position:relative;
cursor:pointer;
display:flex;
}
.switch::after{
content:"";
display:block;
width:30px;
height:30px;
position:absolute;
background:#f1f1f1;
border-radius:100px;
}
.switch.active{
background:orange;
color:#000;
}
.switch.active::after{
right:0;
}
.switch span{
color:#fff; /*color de la luna y el sol*/
padding:0 0 0 7px;
}
.opinion{
margin-top:100px;
text-align:center;
font-size:30px;
color: #111;
}
body.dark .opinion .heading{
color:#c8c8c8;
}
.opinion .row {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 40px 0;
}
.opinion .row .columns{
background: white;
width:400px;
margin:auto;
}
body.dark .opinion .row .columns{
background:#222;color:#fefefe;
border-radius: 15px;
box-shadow:10px 10px 20px rgba(0,0,0,.16);
}
.opinion .row .columns img{
border-radius:50%;
width:100px;
margin:10px;
}
.opinion .row .columns h3{
font-size:24px;
}
.opinion .row .columns p{
font-size:20px;
padding: 30px;
}
.social-links img {
width: 30px; /* Ajusta el tama帽o seg煤n sea necesario */
height: 40px;
border-radius: 40%;
}
.social-links img:hover {
transform: scale(1.2);
}
JAVASCRIPT
const btnSwitch = document.querySelector("#switch");
// las constantes almacenan los datos que no cambian
//Esta l铆nea selecciona el elemento HTML con el ID “switch” y lo asigna a la variable btnSwitch.
btnSwitch.addEventListener("click", () => {
document.body.classList.toggle("dark");
btnSwitch.classList.toggle("active");
//Registra un evento de clic en el bot贸n. Cuando el bot贸n se hace clic,
//ejecuta la funci贸n de flecha que contiene el c贸digo para cambiar el modo y guardar la configuraci贸n.
//guardar modo
if (document.body.classList.contains("dark")) {
localStorage.setItem("dark-mode", "true");
} else{
localStorage.setItem("dark-mode", "false");
}
})
// Estas l铆neas verifican si el cuerpo del documento contiene la clase “dark”. Si es as铆, se guarda el valor “true”
//en el almacenamiento local del navegador con la clave “dark-mode”. Si no, se guarda “false”.
//optener modo al actualizar
if(localStorage.getItem("dark-mode") === "true"){
document.body.classList.add("dark");
btnSwitch.classList.add("active");
} else {
document.body.classList.remove("dark");
}
//estas l铆neas verifican el valor de “dark-mode” en el almacenamiento local cuando la p谩gina se carga o se actualiza.
// Si el valor es “true”, se a帽aden las clases “dark” y “active” al cuerpo del documento y al bot贸n, respectivamente.
//Si no, se elimina la clase “dark” del cuerpo del documento.
0 comments:
Publicar un comentario