Skip to content
Submitted almost 3 years ago

Responsive calculator built with Vanilla JS

accessibility, sass/scss
Elaine•11,360
@elaineleung
A solution to the Calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This is my first intermediate project, and I only built this because I already made a calculator app a while ago. Since I've been seeing a number of calculator solutions in my feed, I wanted to see whether I can reuse my old one in this challenge. I ended up rewriting almost all the JS except the event listeners, but this was a really good practice in writing JS classes!

This calculator can be used with the key pad as well, and also I structured the calculator keys in my HTML in a way where a user can use the tab key if they don't want to use the numpad. The tab functionality somewhat mirrors what my Windows calculator is doing, so I think that's alright for now!

I kept the design's initial value in my calculator, but I will probably remove it later after the screenshot is taken. The only thing I need to figure out later is how to change the screenshot browser's settings and keep it in dark mode, so if anyone's got any ideas please let me know 😆

To build this, I used the calculator by Web Dev Simplified's Kyle as my blueprint; his Vanilla JS calculator is probably the best I've seen so far, so if anyone is interested, do check out his work! Also, I aim to add a second display above the main one for showing the first operand, so hopefully that's coming soon!

Please let me know if there's anything that's broken or not working the way it should. Thank you!

Code

Please log in to post a comment

Log in

Community feedback

  • Assurance Chioma Ikogwe•410
    @Aik-202

    Hi Elaine, this is really amazing!!!!!, the theme switcher is really nice, the responsiveness is on point!. But I have a suggestion, I think it will be really nice if the users get to see each of their input displayed as they are typed. For example I want to calculate 3 × 5, When I enter × it doesn't reflect on the display.. till I maybe input another number or click "="... It will be really great if they get to see each of their input as I enter them.

    Marked as helpful
  • Lucas 👾•104,160
    @correlucas

    Hello Elaine, congrats for this amazing solution!

    Again a pixel perfect solution and what surprises me more is that you don't use Figma files to reach these results!

    I like a lot the theme switcher, its really amazing! The coolest is the third theme.

    I saw that you've used a div to wrap everything, I did this to a challenge and I was not sure if this is a good practice, to wrap all the content with a div, since there's the main that is more important inside a div that is a block element without meaning, this can causes accessibility issues?

    👾My rating for this solution: ⭐⭐⭐⭐⭐

    Nice solution, as always! Congrats Elaine, its really amazing to see people customizing solution and doing more than the challenge requires.

    Marked as helpful
  • Antoine C•1,240
    @mattari97

    Hi Elaine. Almost pixel perfect ! Impressive.

    I will look at your theme switcher tomorrow. I was going for a similar solution with 3 clickable areas but I went back to a single clickable area because I thought that on mobile I often was clicking on the wrong one because the switch on the design is quite small.

    Awesome work! Peace :)

    Marked as helpful
  • Md5 dalton•1,430
    @md5dalton

    Hello Elaine.. Impressive work👌

    If you want your screenshot to match the design's, set your app to load dark mode as the default theme. Then go to your solution's page in frontendmentor, click the Generate Screenshot button. That's it.

    Well at least that's how I did mine in one of my solutions. Hope that helps👍

    Marked as helpful
  • Nwali Joseph•180
    @Source-Web

    Hello, Elaine. I must say I love your theme toggle and as always, you didn't fail to reproduce the design to look like the original.

    I have to agree with @Aik-202, the screen inputs should be seen before the screen value is evaluated. I likewise don't think that's the design rather the screen is meant for printing the input and answer. I like to think of the placeholder text in the design as the result (answer) of the evaluated screen value{Eg. 399980+1}. This is what I did in my solution.

    Please, do check out my solution. I also left a question for the community and I hope you would help with that.

    Nice Job Elaine. :)

  • Pretty Kunene•690
    @nonoza

    You are an inspiration hey, I love the project :) .Amazing!!

  • Miguel Gomez•110
    @MikeProduce

    Man this is really nice! Hope I can get there someday!

  • Asha•1,210
    @livinglifemeaning

    Just here to comment that it is beautiful! I love the transition of the themes.

  • Rafi Mahmud Rizvi•130
    @RafiiMahmudRiizvii

    Amazing work. I just love it. 😍

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