scrimba
Frontend Career Path
Essential JavaScript concepts
Twitter Clone
Aside: Conditionally render CSS class
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

Aside: Conditionally render CSS class
AboutCommentsNotes
Aside: Conditionally render CSS class
Expand for more info
index.js
run
preview
console
const galleryContainer = document.getElementById('gallery-container')

document.addEventListener('click', function(e){
if(e.target.dataset.heart){
console.log('❤️')
}
else if(e.target.dataset.share){

}
})

function render(){

let imageHtml = `
<div id="image-1" class="img-container">
<img src="dino2.jpeg" alt="Man in front of dinosaur">
<div class="social-icons-container">
<i class="fa-solid fa-heart" data-heart="image-1"></i>
<i class="fa-solid fa-share " data-share="image-1"></i>
</div>
`
galleryContainer.innerHTML = imageHtml
}

render()
Console
/index.html
-6:53