Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Created Calculator using scss and typescript

Dinesh 1,115

@Dinesh1042

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


```Feedback are requested````😍

Community feedback

P
Matt Studdert 13,611

@mattstuddert

Posted

Really nice submission, Dinesh! @palgramming has made some excellent points. I'd also recommend refining how it works with keyboard-only navigation. At the moment, if you're using your keyboard, the numbers overwrite each other.

You've done an amazing job of matching the design, though, and the theme switching transition is beautiful! 😍

Keep up the amazing work!

2

Dinesh 1,115

@Dinesh1042

Posted

@mattstuddert Yeah! I seems to be ugly when the number overwrite each other. I will make sure to change that.

Thanks for your feedback. 😍

You have made an awesome community for all.

Happy Coding!💪

0
P
Patrick 14,325

@palgramming

Posted

Congrats being the first person I have seen to upload this project

I really like your animation transition when the color modes are selected

The buttons are missing their hover states the design files have specific colors but you could just change opacity or something to all of them

also some of the calculator logic need a little work. You could make it work with negative numbers like -3 * 4 = -12

I do like how you did your number/total display also that is really nice

this is the kind of challenge you can refine and refine and refine but really nice job so far

2

Dinesh 1,115

@Dinesh1042

Posted

@palgramming Yep😟. I have missed the calculator logic on that. I Will fix the bug🐛. Changing opacity is great idea .I'm gonna implement.

Thanks for your feedback😍 Happy Coding.💪

0
Julian 15

@julian-leahy

Posted

This is awesome - well done. 1 minor bug if you put in lots of numbers (try adding 16 numbers) they escape the output container probably need an overflow in there. Love the theme animation changes for the theme!

1
Dinesh 1,115

@Dinesh1042

Posted

@julian-leahy Thanks, for your feedback I will fix it soon

Happy Coding!💪

0

@banturalana

Posted

Great stuff

1

Dinesh 1,115

@Dinesh1042

Posted

@banturalana Thanks a lot!😍🥳🥳

0

@misaellopes01

Posted

Amaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaazing!

1

Dinesh 1,115

@Dinesh1042

Posted

@misaellopes01 Thank you very much 🥳😍

1
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Greetings, Dinesh! 👋

Fantastic work on this challenge! 🙌 This challenge has only just come out, but you've done a very nice job on it! 😀 Overall, the calculator seems to work pretty well and those theme-transitions are simply awesome! 🤩

The only very minor suggestion from me would be to add some space around the top and bottom of the calculator (using margin/padding) so that it isn't right up against the edges of the viewport at small screen heights. 😉

Of course—keep coding (and happy coding, too)! 😁

1

Dinesh 1,115

@Dinesh1042

Posted

@ApplePieGiraffe Yep! I Will add margin/padding for the main.

Thanks for your feedback😍 Happy Coding💪

0
P
tediko 6,580

@tediko

Posted

Hello, Dinesh! 👋

Well done on this challenge! Kudos for theme animations, it looks nice! I will definitely look at this soultion when I do it on my own!

Keep up the good work! 💪

1

Dinesh 1,115

@Dinesh1042

Posted

@tediko Thanks for your feedback😍

Happy Coding💪

0
Fidel Lim 2,775

@fidellim

Posted

Wow! Great implementation, I like it!

1

Dinesh 1,115

@Dinesh1042

Posted

@fidellim Thanks man 😍

Happy Coding💪

0

Please log in to post a comment

Log in with GitHub
Discord logo

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