Skip to content

Commit

Permalink
page size, quotes in db, analytics
Browse files Browse the repository at this point in the history
  • Loading branch information
Johann ELSASS committed Mar 8, 2024
1 parent d2752ee commit 1cac194
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 96 deletions.
8 changes: 4 additions & 4 deletions docs/css/estilos.css
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ a.botonGetStarted:hover {
.boxFeatures {
padding: 50px;
background-color: #f6f6f6;
height: 100vh;
min-height: 80vh;
}

.features {
Expand Down Expand Up @@ -294,7 +294,7 @@ a.botonGetStarted:hover {
background-color: #fff;
overflow: hidden;
position: relative;
height: 100vh;
min-height: 80vh;
}

.callToActions {
Expand Down Expand Up @@ -403,7 +403,7 @@ a.botonGetStarted:hover {
.boxAbout {
padding: 50px;
background-color: #f6f6f6;
height: 100vh;
min-height: 80vh;
}

.about {
Expand Down Expand Up @@ -496,7 +496,7 @@ a.botonGetStarted:hover {
.boxContacto {
padding: 50px;
background-color: #f6f6f6;
height: 100%;
min-height: 80vh;
}

.contacto {
Expand Down
20 changes: 6 additions & 14 deletions docs/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<a class="nav-link scroll" href="#linkAbout">About</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#linkTestimonial">Testimonial</a>
<a class="nav-link scroll" href="#linkTestimonio">Testimonial</a>
</li>
<li class="nav-item">
<a class="nav-link scroll" href="#linkContacto">Contact</a>
Expand Down Expand Up @@ -129,28 +129,20 @@ <h3>Our Mission</h3>
<!-- End About Section -->

<!-- Testimonial Section -->
<section class="boxSlider" id="linkTestimonial">
<section class="boxSlider" id="linkTestimonio">
<h3>Testimonials</h3>

<div id="carouselExampleIndicators" class="carousel slide centerSlider" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>

<ol class="carousel-indicators" id="testimonioIndicators"></ol>
<div class="carousel-inner" id="testimonio"></div>


</div>

</section>
<!-- End Testimonial Section -->

<!-- Contact Section -->
<section class="boxContacto" id="linkContacto">
<h3>Get Involved</h3>
<h3>Contact</h3>
<div class="container contacto">
<p>Interested in contributing or need help? Join the community or report an issue!</p>
<div class="row">
Expand Down Expand Up @@ -182,8 +174,8 @@ <h4>Report Issues on GitHub</h4>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/dataApi.js"></script>
<script src="js/app.js"></script>
<script type="module" src="js/dataApi.js"></script>
<script type="module" src="js/app.js"></script>

</body>

Expand Down
81 changes: 62 additions & 19 deletions docs/js/app.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,43 @@
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.8.1/firebase-app.js'
import { getAnalytics } from 'https://www.gstatic.com/firebasejs/10.8.1/firebase-analytics.js'
//import { getAuth } from 'https://www.gstatic.com/firebasejs/10.8.1/firebase-auth.js'
import { getQuotes } from './dataApi.js'

const firebaseConfig = {
apiKey: "AIzaSyCRMzakhggi4fRmL3aE8DFFIXMeu_lY_0Y",
authDomain: "bgrabitmap.firebaseapp.com",
projectId: "bgrabitmap",
storageBucket: "bgrabitmap.appspot.com",
messagingSenderId: "728161949558",
appId: "1:728161949558:web:175524e00c53eab0e04c57",
measurementId: "G-BQSSMRXTS8"
};
export const app = initializeApp(firebaseConfig);
const analytics = getAnalytics();

// AGREGA CLASE boxCardAnimated AL HACER SCROLL PARA ANIMAR COMPONENTE CARD
window.onscroll = function() {

let scrollPosY = window.pageYOffset | document.body.scrollTop;

if (scrollPosY >= 400) {
subir = document.querySelector('#subir');
const subir = document.querySelector('#subir');
subir.classList.add("irArriba");
} else {
subir = document.querySelector('#subir');
const subir = document.querySelector('#subir');
subir.classList.remove("irArriba");
}

if (scrollPosY >= 910) {
cardAnimated = document.getElementById('cardAnimada');
cardAnimated.classList.add("boxCardAnimated");
} else {
cardAnimated = document.getElementById('cardAnimada');
cardAnimated.classList.remove("boxCardAnimated");
}

};


// AGREGA CLASE current AL HACER SCROLL
let mainNavLinks = document.querySelectorAll("nav div ul li a");
const mainNavLinks = document.querySelectorAll("nav div ul li a");
const mainNav = document.getElementById("navFixed");

window.addEventListener("scroll", event => {
event.preventDefault();

let fromTop = window.scrollY;
let fromTop = window.scrollY + mainNav.offsetHeight + (window.innerHeight - mainNav.offsetHeight) * 0.3;

mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
Expand All @@ -47,7 +56,8 @@ window.addEventListener("scroll", event => {
// DESPLAZAMIENTO SMOOTH SCROLL
window.onload = function() {

const easeInCubic = function(t) { return t * t * t }
fillSite();
const easeInCubic = function(t) { return 0.5 - Math.cos(t * Math.PI)/2 }
const scrollElems = document.getElementsByClassName('scroll');

const scrollToElem = (start, stamp, duration, scrollEndElemTop, startScrollOffset) => {
Expand Down Expand Up @@ -79,20 +89,53 @@ window.onload = function() {

const anim = requestAnimationFrame(() => {
const stamp = new Date().getTime();
const duration = 1200;
const duration = 800;
const start = stamp;

const startScrollOffset = window.pageYOffset;

const scrollEndElemTop = scrollEndElem.getBoundingClientRect().top;
const scrollEndElemTop = scrollEndElem.getBoundingClientRect().top - mainNav.offsetHeight;

scrollToElem(start, stamp, duration, scrollEndElemTop, startScrollOffset);
})
})
}
}

function enviarMensaje() {
alert('Mensaje enviado con éxito!');
document.getElementById("miForm").reset();
async function fillSite() {
await getQuotes()
.then((quotes) => {
let index = 0;
let indicators = document.getElementById('testimonioIndicators');
let texto = document.getElementById('testimonio');
quotes.forEach((row) => {
const quote = row.data();
let string = '';
let indicator = '';

if (index == 0) {
string += `
<div class="carousel-item active">
<img class="d-block mx-auto" src="${quote.avatar}" alt="">
`;
indicator = `<li data-target="#carouselExampleIndicators" data-slide-to="${index}" class="active"></li>`;
} else {
string += `
<div class="carousel-item">
<img class="d-block mx-auto" src="${quote.avatar}" alt="${quote.name}">
`;
indicator = `<li data-target="#carouselExampleIndicators" data-slide-to="${index}"></li>`;
}

string += ` <p class="text-center sliderText">${quote.quote}</p>`;
string += `<p class="text-center"><b>${quote.name}</b></p>`;
string += `</div>`;

texto.innerHTML += string;
indicators.innerHTML += indicator;
index++;
});
}).catch((error) => {
console.log('ERROR: ', error);
});
}
64 changes: 5 additions & 59 deletions docs/js/dataApi.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,6 @@
let texto = document.getElementById('testimonio');
import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/10.8.1/firebase-firestore.js'

// MÉTODO PARA OBTENER POSTS
async function getPosts(id) {

return await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${id}`)
.then((resp) => {
return resp.json();
})
.then((post) => {
for (let i = 0; i < 4; i++) {
return post;
}
}).catch((error) => {
console.log('ERROR: ', error);
});
}

// MÉTODO PARA OBTENER USUARIOS
async function getUsers() {
await fetch('https://jsonplaceholder.typicode.com/users')
.then((resp) => {
return resp.json();
})
.then((user) => {

for (let i = 0; i < 4; i++) {
const usuario = user[i];
getPosts(usuario.id).then(resp => {
usuario.posts = resp;
user[i] = usuario;
let string = '';

if (user[i].id === 1) {
string += `
<div class="carousel-item active">
<img class="d-block mx-auto" src="images/person_${i + 1}.jpg" alt="">
`;
} else {
string += `
<div class="carousel-item">
<img class="d-block mx-auto" src="images/person_${i + 1}.jpg" alt="">
`;
}

string += ` <p class="text-center sliderText">${usuario.posts[0].body}</p>`;
string += `<p class="text-center"><b>${usuario.name}</b></p>`;
string += `</div>`;

texto.innerHTML += string;

;
});
}
}).catch((error) => {
console.log('ERROR: ', error);
});
}

getUsers();
export async function getQuotes() {
const db = getFirestore();
return getDocs(collection(db, "quotes"));
}

0 comments on commit 1cac194

Please sign in to comment.