Give and receive constructive feedback from your fellow campers on Algorithm Challenge solutions, Frontend and Backend projects
function handleRevealerAnim({...args}, cb){
return setTimeout(function() {
args.target.classList.add(args.anim)
cb && cb();
}, args.ms);
}
function createLi(pages){
const paginationContainer = document.querySelector('.pagination');
for(var i=0; i < pages.length; i++){
const targetText = pages[i].childNodes[3].childNodes[1].innerText;
const LI = document.createElement('LI');
const NUM = document.createElement('SPAN');
const TEXTCONTAINER = document.createElement('SPAN');
const textNode = document.createTextNode(targetText);
const textNodeIndex = document.createTextNode(i);
LI.appendChild(NUM);
i === 0 ? LI.classList.add('pagination-li', 'active-pagination') : LI.classList.add('pagination-li');
i === 0 ? TEXTCONTAINER.classList.add('pagination-title', 'active-text') : TEXTCONTAINER.classList.add('pagination-title', 'none')
LI.appendChild(TEXTCONTAINER);
TEXTCONTAINER.appendChild(textNode)
NUM.appendChild(textNodeIndex)
paginationContainer.appendChild(LI);
}
}
(function() {
const section = document.querySelector('.section')
const tab = document.querySelector('body')
const li = document.getElementsByClassName('pagination-li');
let pages = document.getElementsByClassName('work'),
currentPage = 0,
prev;
createLi(pages)
handleRevealerAnim({
target: section.childNodes[3].children[0],
ms: 300,
anim: 'scale-out-hor-right'
});
handleRevealerAnim({
target: section.childNodes[5].children[0],
ms: 400,
anim: 'scale-out-ver-top'
});
handleRevealerAnim({
target: section.childNodes[1],
ms: 400,
anim: 'slide-out-left'
});
handleRevealerAnim({
target: section,
ms: 2000,
anim: 'slide-out-left'
}, () => pages[currentPage].style.display = 'block');
window.addEventListener('wheel', function(e) {
console.log(e.deltaY)
handleSections(e.deltaY)
});
const links = document.querySelectorAll('a');
for(let a = 0; a < links.length; a++){
links[a].addEventListener('click', function(e) {
console.log(10)
});
}
function handleSections(delta){
var direction = (delta < 0) ? 'up' : 'down';
if(direction == 'down' && currentPage <= pages.length - 2){
prev = currentPage;
currentPage = currentPage + 1;
scrollIntoSection({
prev,
currentPage,
pages
})
} else if(direction == 'up' && currentPage > 0) {
prev = currentPage;
currentPage--;
scrollIntoSection({
prev,
currentPage,
pages
})
}
}
function scrollIntoSection({...opts}){
opts.pages[opts.prev].childNodes[1].classList.add('scale-out-hor-right');
setTimeout(function(){
opts.pages[opts.prev].childNodes[1].classList.remove('scale-out-hor-right');
li[opts.prev].classList.remove('active-pagination');
li[opts.prev].childNodes[1].classList.remove('active-text')
opts.pages[opts.prev].style.display = 'none';
opts.pages[opts.currentPage].style.display = 'block';
li[opts.currentPage].classList.add('active-pagination');
li[opts.currentPage].childNodes[1].classList.add('active-text');
}, 500)
opts.pages[opts.currentPage].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
})();