Skip to content
Submitted about 3 years ago

Responsive Article Preview Component Using SCSS, Javascript

Brian Carlo Birondo•320
@Briancarlo24
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is my JS code. Not sure if this is the optimal way but it works just fine for this challenge.

What should I have done differently? Any thoughts?

const shareIcon = document.querySelector(".fa-share"); const iconContainer = document.querySelector(".icon-container"); const picture = document.querySelector(".picture"); const profile = document.querySelector(".profile"); const socialMedia = document.querySelector(".social-media"); const mobile = window.matchMedia("(max-width: 977px)");

if (mobile.matches) { shareIcon.addEventListener("click", mobileButton); } else { shareIcon.addEventListener("click", desktopButton); }

function mobileButton() { shareIcon.classList.toggle("icon-color"); iconContainer.classList.toggle("bg-color"); picture.classList.toggle("hidden"); profile.classList.toggle("hidden"); socialMedia.classList.toggle("hidden"); }

function desktopButton() { socialMedia.classList.toggle("overlay"); }

Community feedback

  • Account deleted

    I think your Javascript is way too much for just a pop-up and has a lot of unnecessary stuff going on with it;

    • What I'd do is to make the pop-up in css and initialize with display : none and add a class & put it on display : block.
    • Then add an eventListener to the button that'll toggle the class. It'd take 5 lines at most.

    & by the way I don't think the pop-up works on mobile.

    Marked as helpful
    0
    Brian Carlo Birondo•320
    @Briancarlo24Posted about 3 years ago

    @thulanigamtee How do you change the design for desktop and mobile screen ?

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord