Submitted about 2 months ago

Article Preview Component Built With HTML/CSS/JS

Dylan• 290

@dquinn089

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

This is a solution for...

Article preview component

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?

Finally implementing some script, first implementing the click function with addEventListener, to then implementing the sharing function, which takes the live server url of this project, and automatically copy and pastes the url on that websites share page. Finally for fun, using some JS and CSS to add an animation to the .links pop-up window.

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

building the .links container, which was a bit of a challenge figuring out how to style and position it to overlap other elements. So far what I've worked with, elements are usually on the same level or layer and display around each other, so this was new. It was pretty easy to style once i discovered the z-index property.

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

Any tips on the JS as far as more efficient ways to go about similar problems, whether a different function might work better in this context or something like that. Any notable tips whether helping with this problem specifically or any general "must-know" industry tips for using JS; very novice with JS so all is welcome.

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted about 2 months ago

Hi!

I love that you though about dynamic addon to urls! If I can understand correctly, it's purpose to track from which page user came?

Also you did cool thing with animation! By the way, there are useful method which can helps with it.

Literally couple of suggestions:

var is rarely used in JS now, it mostly replaces by let and const.
Guess you should add cursor: pointer and some hover effect to button for better UX

Hope that helps =)

Marked as helpful

Dylan• 290

@dquinn089

Posted about 2 months ago

@Alex-Archer-I

So I actually realized when I read this comment that I forgot to replace my currentUrl variable placeholder with the live server url for the project. It seems to be working now(although the link worked in the share window I didn't actually share it, I don't use these websites lol).

Also thank you for the other suggestions, I feel the designed feels much more complete now. Good advice as always!

Alex• 3,130

@Alex-Archer-I

Posted about 2 months ago

@dquinn089

Oh, yeah, it's cos it's a share button! I didn't even think about it! Now I get why you need a dynamic url!

Haha, that's actually cool, that why I love this place, you look at someone's works and realized a huge gaps in you knowledge =)

And hey, you're welcome as always! Cool hover effect you did =)

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