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

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

#accessibility#svelte#tailwind-css#typescript#fetch
AntoineC• 1,180

@AntoineC-dev

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


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

@Lukiticas

Posted

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

AntoineC• 1,180

@AntoineC-dev

Posted

@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
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