Submitted 4 months ago

Article preview component

bem

Anamay•470

@anamaydev

A solution to the Article preview component challenge

Preview Code

Solution retrospective

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

I'm proud of how I used Grid and Flexbox to make the layout responsive, and how I implemented JavaScript to manipulate DOM classes for the share button. Next time, I'd focus on improving the structure and efficiency of my code.

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

Designing the share button for tablet and desktop views was challenging, especially adjusting its behaviour based on screen size. But it wasn’t too difficult, it was a new concept for me, and I actually found it fun to figure out!

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

I'd love to get feedback on my JavaScript—specifically, where I can improve and what good programming practices I can implement in the future.

Code

Please log in to post a comment

Community feedback

Stevan-Dev•660
@Stv-devl
Posted 4 months ago
Hi good work,

For your code, I would advise you not to handle responsive in JavaScript. Just use CSS. (Even though doing it in training is good for trying new things)

. For do simple you can just do a toggle and hide the popup with css :
```
const btn = document.querySelector(".article__share");

btn.addEventListener("click", () => {
  popup.classList.toggle("hidden");
});
```
in css :
```
.hide {
  display: none;
}
```
. Also, do not put your CSS file in the 'asset' folder. It's better to create a 'style' folder directly in the 'article-preview-component' directory.

Good continuation

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