Hi, I'm Alex

Article Preview 'Enduro' Card

by Alexander Roan on 9 Jun 2025

Challenge Details

This is the first Frontend Mentor challenge in their JavaScript path.

The JavaScript in this exercise is:

  1. Use an event listener to pick up a mouse click on the share icon
  2. Show a pop-up menu with links for social media platforms.

The layout of the pop up is significantly different on the wide and narrow displays. There are a variety of ways to achieve this. It was a little trickly to settle on a good solution.

Enduro Design

Desktop:

Enduro Desktop Design

Mobile:

Enduro mobile design

Standard Design

Desktop:

Article preview desktop design

Mobile:

Article preview mobile design

Links

Have a look at the live site hosted on github pages to see the share menu pop-up in action:

Article preview card live site on Github

And view my submission on Frontend Mentor:

Article preview card on FrontendMentor

Share, comment/discuss

Share to: LinkedIn, X