62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
// Cargar intenciones desde localStorage
|
|
let intenciones = JSON.parse(localStorage.getItem("intenciones")) || [];
|
|
|
|
const muro = document.getElementById("muro-intenciones");
|
|
const input = document.getElementById("nueva-intencion");
|
|
const btn = document.getElementById("btn-guardar");
|
|
|
|
// Iconos disponibles
|
|
const iconos = ["vela.png", "flor.png", "cruz.png"];
|
|
|
|
// Crear un hexágono
|
|
function crearHexagono(intencion, icono) {
|
|
const hex = document.createElement("div");
|
|
hex.className = "hexagono";
|
|
hex.dataset.intencion = intencion;
|
|
hex.dataset.icono = icono;
|
|
|
|
hex.innerHTML = `<img src="img/iconos/${icono}" class="icono-intencion">`;
|
|
|
|
muro.appendChild(hex);
|
|
}
|
|
|
|
// Guardar intención
|
|
btn.addEventListener("click", () => {
|
|
const texto = input.value.trim();
|
|
if (texto === "") return;
|
|
|
|
const icono = iconos[Math.floor(Math.random() * iconos.length)];
|
|
|
|
intenciones.push({ texto, icono });
|
|
localStorage.setItem("intenciones", JSON.stringify(intenciones));
|
|
|
|
crearHexagono(texto, icono);
|
|
input.value = "";
|
|
});
|
|
|
|
// Mostrar intenciones guardadas
|
|
intenciones.forEach(i => crearHexagono(i.texto, i.icono));
|
|
|
|
// MODAL
|
|
const modal = document.getElementById("modal-intencion");
|
|
const cerrar = document.getElementById("cerrar-modal");
|
|
const textoModal = document.getElementById("texto-modal");
|
|
const iconoModal = document.getElementById("icono-modal");
|
|
|
|
// Abrir modal al tocar un hexágono
|
|
document.addEventListener("click", e => {
|
|
const hex = e.target.closest(".hexagono");
|
|
if (!hex) return;
|
|
|
|
textoModal.textContent = hex.dataset.intencion;
|
|
iconoModal.src = "img/iconos/" + hex.dataset.icono;
|
|
|
|
modal.classList.add("visible");
|
|
});
|
|
|
|
// Cerrar modal
|
|
cerrar.onclick = () => modal.classList.remove("visible");
|
|
modal.onclick = e => {
|
|
if (e.target === modal) modal.classList.remove("visible");
|
|
};
|