laforja/JS/index.js

185 lines
5.2 KiB
JavaScript

function cargado() {
// ---------------------- CONFIGURACIÓN BOTON SUBIR ARRIBA -----------------------------////
const $btnUp = document.getElementById("botonArriba");
document.addEventListener("click", (e) =>{
if(e.target === $btnUp || e.target.matches(".fa-arrow-up")){
window.scrollTo({
behaviour: "smooth",
top: 0
})
}
});
}
//--------------------- CONFIGURACIÓN SLIDERS ------------------------------///
let operacion = 0,
counter = 0;
function moveToRight() {
let elementoAMover = this.event.target.parentNode.firstElementChild;
let numeroContenedores = elementoAMover.children.length
let widthImg = 100 / numeroContenedores;
if (counter >= elementoAMover.children.length-1) {
operacion = 0;
counter = 0;
elementoAMover.style.transform = `translate(-${operacion}%)`;
return;
}
counter++;
operacion = operacion + widthImg;
elementoAMover.style.transform = `translate(-${operacion}%)`;
}
function moveToLeft() {
let elementoAMover = this.event.target.parentNode.firstElementChild;
let widthImg = 100 / elementoAMover.children.length;
counter --;
if (counter < 0 ) {
counter = elementoAMover.children.length-1;
operacion = widthImg * (elementoAMover.children.length-1);
elementoAMover.style.transform = `translate(-${operacion}%)`
elementoAMover.style.transition = 'none';
return;
}
operacion = operacion - widthImg;
elementoAMover.style.transform = `translate(-${operacion}%)`
}
//-------------------------- CONFIGURACIÓN CALENDARIO --------------------------------
const cargaCalendario = () => {
const nombresMeses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
let fechaActual = new Date();
let diaActual = fechaActual.getDate();
let numeroMes = fechaActual.getMonth();
let yearActual = fechaActual.getFullYear();
let fechas = document.getElementById("dates-calendar");
let mes = document.getElementById("mes-actual");
let year = document.getElementById("year");
let mesAnteriorDOM = document.getElementById("mes-anterior")
let mesSiguienteDOM = document.getElementById("mes-siguiente");
mes.textContent = nombresMeses[numeroMes];
year.textContent = yearActual.toString();
mesAnteriorDOM.addEventListener("click", () => mesAnterior());
mesSiguienteDOM.addEventListener("click", () => mesSiguiente())
const generacionMeses = (mes) => {
for(let i = diaComienzoSemana(); i>0; i--){
fechas.innerHTML += `<div class= "dia-calendario item-calendario dias-ultimo-mes">
${numeroDiasMes(numeroMes-1)-(i-1)}
</div>`;
}
for (let i = 1; i <= numeroDiasMes(mes); i++){
let fechaActualVieja = new Date();
let mesActual = fechaActualVieja.getMonth();
if((i === diaActual) && (mes === mesActual)){
fechas.innerHTML += `<div class= "dia-calendario item-calendario today">${i}</div>`;
}else {
fechas.innerHTML += `<div class= "dia-calendario item-calendario">${i}</div>`;
}
}}
const numeroDiasMes = (mes) => {
if(mes === -1) mes = 11;
if (mes === 0 || 2 || 4 || 6 || 7 || 9 || 11) {
return 31;
} else if (mes === 3 || 5 || 8 || 10) {
return 30;
} else {
return esBisiesto() ? 29:28;
}
}
console.log(numeroDiasMes(numeroMes))
const esBisiesto = () => {
return ((yearActual % 100 !== 0) && (yearActual % 4 === 0) || (yearActual % 400 === 0));
}
const diaComienzoSemana = () => {
let comienzo = new Date(yearActual, numeroMes, 1);
return ((comienzo.getDay()-1) === -1) ? 6 : comienzo.getDay()-1;
}
const mesAnterior = () => {
if(numeroMes !== 0){
numeroMes--;
}else {
numeroMes = 11;
yearActual--;
}
nuevaFecha();
}
const mesSiguiente = () => {
if(numeroMes !== 11){
numeroMes++;
}else {
numeroMes = 0;
yearActual++;
}
nuevaFecha();
}
const nuevaFecha = () => {
fechaActual.setFullYear(yearActual, numeroMes, diaActual);
mes.textContent = nombresMeses[numeroMes];
year.textContent = yearActual.toString();
fechas.textContent = '';
generacionMeses(numeroMes)
}
generacionMeses(numeroMes);
}