Frontend Mentor - Article preview component solution

This is a solution to the Article preview component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• The challenge
• Screenshot
• Links
• Built with
• Author

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See the social media share links when they click the share icon

Screenshot

Links

• Solution URL: https://github.com/seekinfox/Article-preview-cpmponent
• Live Site URL: https://seekinfox.github.io/Article-preview-cpmponent/

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow -javaScript

What I learned

applying little bit of javaScript to make a card more interactive is fun thing to learn. In this exercise i learned how to add event triggers and toggle classes. i used these two function to get the click event and the share-popup section.

function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("visible");
}

const color = document.querySelectorAll(".share");
color.forEach(color => {
    color.addEventListener("click", ()=>{
        color.classList.toggle("color");
    });   
});
}

Continued development

redoing javaScript basics.

Author

• Frontend Mentor - @seekinfox