Skip to content
Submitted 4 months ago

Article preview component

Fatima Abid•110
@fatemzh
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?

I wrote my first JavaScript lines and I understand how the DOM works. I'm proud of learning how to manipulate the DOM and seeing the immediate impact of my code on the webpage. Next time, I would spend more time planning the structure of my HTML and CSS to ensure a smoother transition between mobile and desktop views.

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

I struggled with juggling between CSS and JavaScript for displaying or hiding different div elements. Ensuring the HTML structure was well-organized was tricky because the layout for mobile was different from the desktop version, requiring some modifications to the HTML structure. I overcame these challenges by adopting a mobile-first approach, meticulously adjusting the layout for desktop, and thoroughly testing each change.

What specific areas of your project would you like help with?

I have an issue where elements are displayed incorrectly when switching from desktop to phone and vice versa without refreshing the page. I need help understanding how to manage state and events in JavaScript to ensure the correct elements are displayed without requiring a page refresh.

Community feedback

  • Eugen•200
    @psdesignroPosted 4 months ago

    Hi Fatima,

    Your solution looks good. Regarding the layout, I suggest you shoud add more padding for the thext some line-height for p and also a bit more width for the image.

    I can't give you an extended feedbak regarding JS because it's also new for me, but you can check my solution, because I see that you have wrote a lot of code, and I achieved the desired functionality with 4 lines of JS.

    const shareIcon = document.getElementById("share-icon"); const shareBox = document.getElementById("share-box"); shareIcon.addEventListener('click', function(){ shareBox.classList.toggle('show'); });

    I used classList toggle method to add/ remove the class for the share tooltip.

    Check here https://psdesignro.github.io/article-preview/ how it works!

    Marked as helpful
    1

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