This is a solution to the Blogr landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: solution URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Vanilla javascript
Learned to remove show-link class from inactive links
.arrow-up{
transform: rotate(180deg);
}
.show-links{
display: flex;
}
dropDowns.forEach(dropDown => {
const parent = dropDown.closest('.list')
const arrow = parent.querySelector('.arrow')
const link = parent.querySelector('.link')
link.addEventListener('click', () => {
dropDowns.forEach(item => {
const parentItem = item.closest('.list')
const arrowItem = parentItem.querySelector('.arrow')
if(item !== dropDown) {
item.classList.remove('show-links')
arrowItem.classList.remove('arrow-up')
}
})
arrow.classList.toggle('arrow-up')
dropDown.classList.toggle('show-links')
})
})