scrimba
Figma to code
Car Sales Site
Adding the Like Functionality
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Adding the Like Functionality
AboutCommentsNotes
Adding the Like Functionality
Expand for more info
index.js
run
preview
console
// javascript

const menuBtn = document.querySelector('.menu')
panel = document.querySelector('.filter')
panelStyles = window.getComputedStyle(panel);

menuBtn.addEventListener('click', () => {

if (panelStyles.getPropertyValue('clip-path') === 'circle(0% at 100% 0%)') {
panel.style.clipPath = 'circle(100% at 50% 50%)'
}

else {
panel.style.clipPath = 'circle(0% at 100% 0%)'
}
})

document.addEventListener('mouseup', (event) => {
if (panelStyles.getPropertyValue('clip-path') === 'circle(100% at 50% 50%)') {
if(!panel.contains(event.target))
panel.style.clipPath = 'circle(0% at 100% 0%'
}
})
Console
/index.html#
-1:55