Frontend Mentor - Article preview component solution

Table of contents

• Overview
  • The challenge
  • Screenshot
• My process
  • Built with
  • What I learned
  • Continued development

Overview

The challenge

Your 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

My process

Built with

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

What I learned

I learned how to create a pseudo element and position it:

  .social-media::after{
        content: "";
        width: 25px;
        height: 25px;
        background-color: var(--VeryDarkGrayishBlue);
        position: absolute;
        top: 74%;
        transform: rotate(45deg);
    }

I also implemented media queries and flexbox to convert columns into rows, making the article more responsive on larger screen sizes:

    @media (min-width:850px){
      article{
          flex-direction: row;
          max-width: 42em;
          overflow: visible;
          .info-container{
              padding: 0.5em;
          }
      }
    }

I created an array to facilitate data entry, which helped me reduce the amount of HTML needed:

 const articles = [{
    imageAuthor: './images/avatar-michelle.jpg',
    author: 'Michelle Appleton',
    date: '28 Jun 2020',
    imageArticle: './images/drawers.jpg',
    title: 'Shift the Overall Look and Feel by Adding These Wonderful Touches to Furniture in Your Home',
    introduction: 'Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.',
    facebook: '#',
    twitter: '#',
    pinterest: '#',
}]

Then, I created a function that adds the elements to the DOM from the retrieved data:

 function uploadingArticles (){
    main.innerHTML = "";
    articles.forEach(article =>{
      //html elements
      })
    }

Here’s how I handled event listeners to detect user clicks and apply additional styles to the button:

    const authorShare = document.getElementById("share-author");
    const socialMediaDiv = document.getElementById("social-div");


    authorShare.addEventListener('click', e =>{
        socialMediaDiv.classList.toggle("show");
    })

  .show{
      opacity: 1;
      bottom: 0;
      transition: all .3s ease-in-out;
  }

Continued development

In future development, I plan to focus on several key areas:

- Advanced CSS Grid Techniques: Further exploration of complex grid layouts and the use of grid-template-areas for more flexible and maintainable designs.

- Responsive Design: Enhancing responsive layouts using media queries to ensure that web applications look great on all devices.

- JavaScript Best Practices: Improving JavaScript code readability and performance by refactoring and leveraging ES6 features like template literals and destructuring.

- Integrating APIs: Fetching and displaying data from external APIs to create more dynamic and interactive web applications.

These areas will help me build more sophisticated, user-friendly, and performant web applications.