Article Preview Component
Solution retrospective
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
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Bisshy
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
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