As a newcomer to web development, I'm currently working on creating my own portfolio website. One of the features I am trying to implement is triangle bullet points that can change direction when clicked - kind of like an arrow. My idea is for them to point down initially, display an image upon clicking (although this part isn't done yet), and then revert back to pointing right upon another click. However, I ran into some issues with getting this functionality to work as intended.
const projectList = document.getElementById('projects').querySelector('ul');
const projectPsuedo = projectList.querySelectorAll('span');
const switchBulletDown = event => {
event.target.style.borderLeftColor = 'transparent';
event.target.style.borderTopColor = '#111';
event.target.style.left = '-1.2em';
event.target.style.top = '1.6em';
}
const switchBulletRight = event => {
event.target.style.borderLeftColor = '#111';
event.target.style.borderTopColor = 'transparent';
event.target.style.left = '-1em';
event.target.style.top = '1.4em';
}
const eventHandler = psuedoClass => {
if (psuedoClass.style.borderLeftColor === '#111') {
psuedoClass.addEventListener('click', switchBulletDown);
} else {
psuedoClass.addEventListener('click', switchBulletRight);
}
}
projectPsuedo.forEach(eventHandler);