Submitted about 2 months ago

Article preview component

Fatima Abid• 110

@fatemzh

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS
JS

1newbie

View challenge

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

@psdesignro

Posted about 2 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

Please log in to post a comment

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