Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Customized Article Preview with SASS & JavaScript

Daniel 🛸 44,230

@danielmrz-dev

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Well, this one took me a while.

Getting that share button to do what it's supposed to was harder than I expected. I'm still not satisfied with the result, but this is as far as I can go with the skills I got so far.

I'm still learning DOM Manipulation and if you have any advice on how I can improve this project, fell free to leave me a comment.

Feedback is appreciated!

Community feedback

JimTK16 370

@JimTK16

Posted

Hi Daniel,

Good job on this challenge!

For CSS, in mobile view, I can see a layout shift when I click the Share button so you might want to adjust the styles to fix it.

As with JS, i think you did a good job too. Something to consider is to add a feature that the user can also close the popup when they click outside the popup box.

Jim

Marked as helpful

1

Daniel 🛸 44,230

@danielmrz-dev

Posted

Yeah, I tried my best, but with my current JS skills, that was as far as I could go. But I'm taking courses to learn how to improve it 😁

@JimTK16

1
JimTK16 370

@JimTK16

Posted

@danielmrz-dev That's great to hear. What are the courses that you're taking, just curious, as I want to improve my JS too.

Also, the feature that I talked about above, is quite simple to implement. I added an event listener to the container to listen to 'click' event, and it will perform the close action (like set the display of the popup to none etc.). Another event listener also added to the popup box to stop the Propagation, so that the popup won't be closed if the user click on the popup itself. The result is that the popup only closes when the user click outside its area. Link to my code for reference: https://github.com/JimTK16/Article-Preview-Component.

Jim

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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