Skip to content
Submitted 25 days ago

Article preview container using Javascript Click events

RajanCP•90
@RajanCP
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

What are you most proud of, and what would you do differently next time?

Completing the JavaScript in a fairly concise manner. Some solutions I have seen had made two share buttons and containers for desktop/mobile however I felt this could be achieved with one which I had managed.

What challenges did you encounter, and how did you overcome them?

Positioning the share container to align exactly with my container was difficult. However my accessing the developer tools and selecting the element I was able to mess around with the position of it inside of chrome (since the position was set to absolute). This allowed me to use trial and error to line it up perfectly.

Community feedback

  • Khrystyna Horbenko•230
    @KristinaHorbenkoPosted 25 days ago

    Overall, the code is well-written and follows the basic principles of web development. There is a slight difference in design in the desktop version with the dropdown window, specifically regarding the arrow. Here is my implementation example:

    <div class="share-button"> <div id="socialIcons" class="social-icons"> <p>Share</p> <a href="#" target="_blank"><img src="images/icon-facebook.svg" alt="Facebook"</a> <a href="#" target="_blank"><img src="images/icon-twitter.svg" alt="Twitter"></a> <a href="#" target="_blank"><img src="images/icon-pinterest.svg" alt="Pinterest"></a> </div> 
    <button id="shareArrow"> 
    <img class="icon-share" src="images/icon-share.svg" alt="">
</button>
    </div>

    .social-icons { display: none; position: absolute; top: -12rem;
    right: -4.5rem;
    transform: translateY(-50%); background-color: hsl(217, 19%, 35%);
    padding: 1.5rem;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); border-radius: 1rem; }

    .social-icons::before { content: ""; position: absolute; top: 98%; left: 57%; transform: translateX(-50%); border-width: 1rem 1rem 0 1rem; /* Triangle dimensions */ border-style: solid; border-color: hsl(217, 19%, 35%) transparent transparent transparent; }

    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