Skip to content
Submitted about 2 years ago

Calculator App | SvelteKit - Tailwind - TS | w/ Keyboard Navigation

Antoine C•1,210
@mattari97
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Calculator app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hello everyone.

I had a really good time w/ this project but the complexity was the JavaScript rather than the design itself.

I also added the possibility to use only the keyboard.

  • Arrow (left & right) to switch the theme
  • Numbers from 1 to 9, Operations & "." Dot)
  • Backspace to undo the last action
  • "=" Equal Sign to get the result
  • Delete to clear the calculator

I also chose to use SSR for the theming because i was annoyed by the flashing screen on previous projects on load before having access to the theme settings in local storage.

You can find the logic in the README of the solution.

Feel free to share your thoughts on my code/design and thank you for your time.

Have a good day/night. Peace.

Community feedback

  • Lucas Matheus•400
    @LukiticasPosted about 2 years ago

    Wow! I'm here just to admire your project, this is incredible. Did svelt make things easier for you? I'm trying to learn react but i'm not that sure if i choosed the right framework.

    Again, this is one of the best from the entire site. Bravo!

    1
    Antoine C•1,210
    @mattari97Posted about 2 years ago

    @Lukiticas Hello Lucas. These are some really kind words. I'm glad you liked my solution. I tried to go into details for the best possible result.

    I don't think that Svelte made this project easier. In fact, the equivalent in vanilla JS would probably be way less code and complexity in the project Structure.

    What SvelteKit (Which is to Svelte what NextJs is to React) gave me, is the possibility to use ServerSide Rendering. Which is the ability to prefetch the html on the server to reduce loading time and improve Seach Engine Optimization. I used it to manage the theme setting with cookies on the server. You can find all the logic in the README.

    Svelte is a really awesome framework and i really am enjoying playing with it. But React is also really good. I used React for 1+ year and it's really fun. I liked it at the beginning and event more when i started creating my own custom hooks etc...

    I don't think one is better than the other. You can do everything i did here with NextJs or GatsbyJs.

    It's just a matter of: choose on and commit to it. Then you'll be able to switch to any JS framework really quick. Also don't skip the basics. Learn vanilla JS (or even better IMO typescript). You'll understand better what is and event, a listener, and all the code happening behind the scene in your framework of choice.

    Again, thank you for your kind words it is really appreciated. I wish you a happy coding journey and happy learning.

    Peace :)

    1

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