-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
151 lines (131 loc) · 5.82 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
// -------------Cover de la pagina----------------
// const contenedor = document.querySelector(".figcaption");
// const cover = document.querySelector(".cover");
// cover.onload = function() {
// const anchoContenedor = figcaption.clientWidth;
// const altoContenedor = figcaption.clientHeight;
// cover.style.width = anchoContenedor + "px";
// cover.style.height = altoContenedor + "px";
// };
// -------------Desplazamiento suave--------------
document.addEventListener("DOMContentLoaded", function () {
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
function smoothScroll(event) {
event.preventDefault();
const targetId = event.currentTarget.getAttribute("href");
const targetElement = document.querySelector(targetId);
const headerOffset = 100;
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition - headerOffset;
window.scrollBy({
top: offsetPosition,
behavior: "smooth",
});
}
/* ----Formulario----(inactivo)*/
/*
const contactForm = document.getElementById("contact-form");
contactForm.addEventListener("submit", function (event) {
event.preventDefault();
const formData = new FormData(event.target);
// Aquí puedes procesar los datos del formulario, como enviarlos a un servidor o guardarlos en una base de datos.
console.log("Formulario enviado:", Object.fromEntries(formData));
// Aquí puedes mostrar un mensaje de éxito o redirigir a otra página.
alert("Formulario enviado con éxito");
event.target.reset();
});
*/
//--------------- Modo oscuro ------------------
const darkModeToggle = document.getElementById("sign");
const body = document.body;
const imagen = document.getElementById("sign");
const imagenFondo = document.getElementById("img-fondo");
// Función para actualizar la imagen según el modo
function updateImage() {
if (body.classList.contains("dark-mode")) {
imagen.src = "./publics/img/sign1.png";
imagenFondo.src = "./publics/img/forest-night1.jpg";
} else {
imagen.src = "./publics/img/sign2.png";
imagenFondo.src = "./publics/img/forest-day.jpg";
}
}
// Verifica si el usuario ha preferido el modo oscuro en su sistema
const prefersDarkScheme = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
// Si ya está en modo oscuro, cambia la apariencia predeterminada del sitio
if (prefersDarkScheme) {
body.classList.add("dark-mode");
updateImage(); //llama a la funcion de cambiar imagen
}
// Cambia entre modos claro y oscuro cuando se hace clic en el botón
darkModeToggle.addEventListener("click", function () {
body.classList.toggle("dark-mode");
updateImage();
});
});
// ------Sonidos-------(Activados desde el HTML)
function playSelect() {
var audio = new Audio("./publics/fx/select.mp3");
audio.play();
}
function playSign() {
var audio = new Audio("./publics/fx/sign.mp3");
audio.play();
}
//------------Descripcion de Iconos (td-icons)--------------------
//-----modal----//
/*
EJEMPLO DEL PRIMER ITEM
<!-- Primer item -->
<td class="td-icon" id="td-1">
<!-- Icono -->
<img src="./publics/img/jewel-icon.png" alt="diamond" class="icon" />
<!-- Modal -->
<div class="modal" id="modal-1">
<div class="modal-title">
<!-- Titulo -->
<h2>Info</h2>
<div class="contenido-modal">
<img class="modal-icon" src="./publics/img/jewel-icon.png" alt="diamond icon">
<p>Los contenidos con la propiedad "Diamante" simbolizan una página web con resultados excepcionales
</p>
<p class="more-info">Presiona para cerrar</p>
</div>
</div>
</div>
</td>
*/
function mostrarModal(id) {
const modal = document.getElementById(id);
modal.classList.add("visible");
} //Busca un elemento en el documento con el ID proporcionado (id) y lo asigna a la variable modal.
//Agrega la clase CSS "visible" al elemento modal, lo que generalmente lo hace visible en la pantalla.
function cerrarModal(id) {
const modal = document.getElementById(id);
modal.classList.remove("visible");
} //Busca un elemento en el documento con el ID proporcionado (id) y lo asigna a la variable modal.
//Elimina la clase CSS "visible" del elemento modal, lo que generalmente lo oculta de la pantalla.
const tdImges = document.querySelectorAll("td img");
//Selecciona todas las imágenes dentro de elementos "td" de forma genérica, evitando la selección manual de cada imagen por separado (imagen1, imagen2, etc.). Esto hace que el código sea más adaptable a cambios en la estructura HTML.
tdImges.forEach(imagen => {
//Recorre todas las imágenes encontradas y agrega event listeners a cada una de ellas de forma dinámica, reduciendo la repetición de código y mejorando la mantenibilidad.
imagen.addEventListener("click", () => {
//Obtiene el ID del modal a mostrar directamente del ID del elemento "td" padre de la imagen, eliminando la necesidad de condicionales o código adicional.
mostrarModal(`modal-${imagen.parentElement.id.split("-")[1]}`);
});
});
const modals = document.querySelectorAll(".modal");
modals.forEach(modal => { //Recorre todos los modales y agrega event listeners de cierre de forma dinámica, evitando la repetición.
const contenidoModal = modal.querySelector(".contenido-modal");
modal.addEventListener("click", (event) => {
if (event.target != modal || event.target === contenidoModal) {
//Combina la comprobación del click en el propio modal y en su contenido en un solo if, simplificando el código.
cerrarModal(modal.id);
}
});
});