Give and receive constructive feedback from your fellow campers on Algorithm Challenge solutions, Frontend and Backend projects
Hello everyone! I am working on a small project that is still not fully conceptualized and would like to have some feedback. I am building an authorization module with Vue, Node.js and Mongoose. My idea is to simplify the whole auth process (server, views, etc) and have sort of like a module, like a lego piece, that I can just plug into any vue + vue-router + vuex project and just work.
I am working with two repositories, one for showing the components + server in action, and the other that would be the actual module:
Deploy on Heroku: https://vue-auth-components.herokuapp.com/
Vue Cli 3 code: https://github.com/kamatheuska/proto-vue-auth
Actual Project: https://github.com/kamatheuska/vue-auth-components-server
I feel that I am making progress although I have a long way to way, in all senses. Criticism is very welcomed, that is how you learn :punch:! Thanks for the help!
@longnt80 Sorry for my late late answer! Thank you so much for your review.
why don't you convert all var to let and const?
I just forgot to do it 😅. Thanks to point this out!
Why prevetDefault at the end? Why not at the beginning?
I refer you to that discussion on StackOverflow 👉 https://stackoverflow.com/questions/4476973/does-location-of-e-preventdefault-matter
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"});
}
})();
The main purpose was to made it easy to compare Collections of different classes by comparing some of their fields. Any help and/or tips would be greatly appreciated! :)
https://codepen.io/VicPopescu/full/GPrvRY
