Skip to content
Submitted 7 months ago

Responsive Calculator App using Flexbox, Media query and DOM operation

pure-css
Sameema Nasrin•130
@SameemaNasrin
A solution to the Calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I’m really proud of the fact that I managed to quickly find a workaround for the resizing issue in my result div. I added a max-width and set overflow: hidden, which stopped the layout from breaking when the numbers got too large. It’s not perfect, but it did the job for now. Next time, I’d probably try to come up with a more scalable solution that doesn’t limit the content visibility. Something more dynamic that adapts as the number grows would be ideal, so the layout stays intact without cutting off any data.

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

The biggest challenge was that as the numbers in the result div grew, they stretched the container, throwing off the layout and making things look messy. To fix this, I used max-width to cap the div size and added overflow: hidden to prevent the content from overflowing. It was a quick fix, but I realized it’s not the most elegant or long-term solution, so I’d like to improve it moving forward.

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

I'm looking for a cleaner way to handle dynamic content resizing. Currently, I'm using a max-width with overflow: hidden, but it feels like more of a workaround than a permanent solution. I’m wondering if there’s a more elegant and flexible layout approach that could better handle this, without compromising the responsiveness of the design. Any suggestions or guidance on how to improve this would be really helpful!

Code

Please log in to post a comment

Log in

Community feedback

  • Yacoub AlDweik•3,540
    @YacoubDweik

    Hey! good job!

    few notes if u don't mind:

    • never ever give padding or margin values like vw or vh, do u know why? cuz simply if I am using a very large screen like those for gamers and traders then I will get a huuuuuge spaces, the opposite applies for small screens.

    • the problem with that max-width and overflow is because you 1.didn't give a width for the parent, try not to use fit-content cuz it is not logical here.

    1. did not use input type number instead of using div, cuz input elements will respect the width of the parent and will keep you tracking the last number u entered.

    Keep it up!

    Marked as helpful
  • Veronika Palto•355
    @JepardMay

    Hi! Nice work on this one! I've got some notes on your solution:

    • adaptive styles are changing too early from mobile to desktop, and therefore it's very squished on 375px screen
    • you also can have max-width and width: 100%; to allow the element not to shrink when it's plenty of space available
    • I think it's better to use something like word-break: all; to allow big numbers to wrap other than cuts off by the container
  • Sameema Nasrin•130
    @SameemaNasrin

    In reviewing my calculator app, I think adding support for keyboard inputs would make it more versatile and user-friendly. While the app currently works well with on-screen buttons, allowing users to input values directly from the keyboard will improve accessibility and overall usability. I plan to include this feature soon.

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