Skip to content
Submitted 8 months ago

i used the positioning techniques to control the share component

Musie Misgun•40
@Natty-tech
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

im proud that I was able to successfully buld the share component and also making it interactive and reponsive, next time I would like to make the js more efficient.

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

Had some problems with manipulating the share components but after googling I was able to learn some manipulation in css dont neccessary apply in js. ex - in css we can say : .classname { display: "hidden" /to hide a certain element/}

but in js the "hidden" attribute doesnt work and took almost an hour to figure it out.

instead i use the "none" attribute like this : status.style.display = "none"

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

I would like to know if there was effiecient way to make the share component interactive. Thanks for the help!

Community feedback

  • Levis Kim•1,200
    @Orekihotarou-kPosted 8 months ago

    Hi @Natty-tech, Congratulations on successfully completing the challenge! 🥳 Your effort is truly commendable. I believe that incorporating a bit more padding around the furnituredetail section would enhance its overall aesthetic appeal. Additionally, it might be beneficial to position the attribution class outside of the furnituredetail element to maintain the integrity of the layout.

    Another suggestion for improvement could be to consider utilizing a button for the share image. This adjustment would enhance the accessibility of toggling the sharebar feature, making it more user-friendly.

    I hope these tweaks elevate the quality of your project.

    Marked as helpful
    0
    Musie Misgun•40
    @Natty-techPosted 8 months ago

    Hello @Orekihotarou-k, I really appreciate it for taking the time to give me insights on my projects. I would love to collaborate on working some projects with you in the future if the opportunity presents.

    0
    Levis Kim•1,200
    @Orekihotarou-kPosted 8 months ago

    @Natty-tech I'd love to work with you on some projects at anytime. Just let me know when 😊✨

    0
  • Grego•1,310
    @Grego14Posted 8 months ago

    Hello!, to make the sharebar hide and appear without using so much javascript you can use CSS classes.

    but for it to work, the default display of the sharebar must be none. and you will have to delete the inline styles that you added.

    something like this:

    .sharebar{
  display: none;
}

sharebar.show{
  display: flex;
}

    And using javascript you would only need to remove and add the show class using the classList.toggle('show') method

    and so you wouldn't have to check if the sharebar.style.display is equal to flex or not.

    I also recommend you look at these CSS properties that will help you make the image look much better:

    object-fit and object-position

    I hope this helps!

    Marked as helpful
    0
    Musie Misgun•40
    @Natty-techPosted 8 months ago

    Thanks you very much for your feedback @Grego14, really appreciate it!

    0

Please log in to post a comment

Log in with GitHub

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