Submitted 2 months ago

Article Preview Component

Josephine Fitalvo• 260

@fitalvojosephine

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?

I am proud of my ability to combine HTML, CSS Grid, Flexbox, and transformations (translate along the X and Y axes and scale) to make the share button hide the element, along with using DOM JavaScript. I accomplished this by researching and reading other developers' code to complete an article preview component. I structured it responsively and added basic JavaScript functionalities using addEventListener.

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

I encountered some difficulties with the button, specifically with how to make it hide, transform, and translate on hover and when clicked by the user. I researched this issue and resolved it by studying other developers' code. Additionally, I had some challenges with the grid-template-columns property for the container size. To fix this, I decided to use grid-template-columns: 285px minmax(300px, 445px);. This means the first column will always be 285 pixels wide, while the second column will have a flexible width that adjusts between 300 pixels and 445 pixels, depending on the available space in the container. This solution works perfectly.

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

So far, none. Kindly give me some feedback to improve my coding skills. Thank you! #HappyCodingEveryone

Community feedback

Bisshy• 150

@Bisshy

Posted 28 days ago

Nice job your naming sense with the BEM method and your styling are good I learnt some new skills from you, I checked your page and I found out that your card__share-option is by default active when it's visited you can turn it off by adding the hidden class to the div of your html file which carries the icon images and adding the hidden class to you css and style it with the display none. i don't know if your JS will still work after this adjustments but if it doesn't try

"shareButton.addEventListener("click", function () { shareOption.classList.toggle("hidden");" }); that is you set thet the shareButton to display the hidden card__share-options and you can fine-tune your css html also by removing the active class. I learnt a lot from your naming convention and I hope this I wrote up on here helps you

Josephine Fitalvo• 260

@fitalvojosephine

Posted 28 days ago

@Bisshy Thank you so much! I appreciate your feedback. I hope I can help you with my naming convention. Happy coding!

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