Skip to content
Submitted about 1 month ago

added functionality to a button to toggle between two values.

Obiwumma•110
@Obiwumma
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?

I'm proud of the fact that I took my time on this project. Struggled through the functionality

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

I encountered multiple issues, such as trying to make different functions run at different screen sizes. To solve this, I implemented the window.matchMedia() method, which allows JavaScript to dynamically respond to screen size changes, similar to CSS media queries.

Another issue was that my code worked well in Chrome DevTools but refused to work in my main browser window. To fix this, I wrapped my entire script in "DOMContentLoaded" to ensure it runs only after the HTML document has fully loaded. I also specified the screen size precisely.

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

This is my first JavaScript challenge in a long time. My code writing style is amateur. There are probably better ways I could do this so I'm open to all opinions

Community feedback

  • Marcos Travaglini•6,210
    @BlackpachamamePosted about 1 month ago

    Hey your solution is amazing! 🤩

    📌 Some suggestions

    • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
    • Your item3 should be a button. Also, you could use more descriptive names for your classes
    Marked as helpful
    0
    Obiwumma•110
    @ObiwummaPosted about 1 month ago

    @Blackpachamame Thanks for the suggestions

    1
  • Olamilekan Owolemi•170
    @nakelcodePosted about 1 month ago

    Wow this is done well. I'm a newbie in web development and i really struggle with this project especially the active share button on desktop mode and i'm still not done with it. I just upload my own on here, can you please check it out and tell me what you think

    Marked as helpful
    0
    Obiwumma•110
    @ObiwummaPosted about 1 month ago

    @nakelcode Alright

    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