Skip to content
Submitted about 4 years ago

Calculator - Mobile first, Sass, BEM, Webpack, vanilla-picker

tediko•6,700
@tediko
A solution to the Calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello👋!

It was one of the most enjoyable challenges I have done so far. When I saw that challenge requires a change theme I decided to add another functionality which is extra "custom" theme where the user can edit freely colors in theme modal. Many times, when I finished a certain function, I had an idea with another one, and I had a lot of fun doing it. Honestly, It took me more time to made this custom modal than the calculator itself - which itself was a good javascript challenge as well. You can use both the keyboard and the mouse to enter data into the calculator. List of things I learned or used creating this project:

  • Added customizable settings for 4th theme. User selected colors are saved in Local Storage so the settings are saved and loaded when the user will come back to the site. The user can set 13 options, but he doesn't have to change all of them, he can only change those that interest him. To get the color from user I used vanilla-picker library which creates a color palette from which to choose. Palette always show current set color of element you want to change so it is easy to adjust colors back and forth without searching for that color again.
  • Added prefers-color-scheme CSS media feature which is used to detect if the user has requested a light or dark color theme and save it to Local Storage. I made it with window interface matchMedia() method. It returns a new MediaQueryList object that can then be used to determine if the document matches the media query string. In this case prefers-color-scheme. Read more(1). How to detect user prefered theme in JS(2).
  • Implemented focus trap inside modal to make it ADA compliant. Focus trap in short prevent our focus go outside the modal once the modal is opened. Read more.
  • While displaying the result, I used toLocaleString() method to return a string with a language-sensitive representation of this number. In short it convert 3500 to 3,500 if in U.S. Read more.
  • I tried to make my comments more readable and transparent. For this purpose, I used JavaScript description comments which are equivalent to Python docstring. If you precede your function definitions with a description comment, VSCode will pick it up and include it as a tooltip. It’s like having MDN right there in your editor. Read more.
  • I used object literals instead of if statement in several cases. Shortly, we have an object where the keys are the conditions and the values are the responses. Then we can use the square bracket notation to select the correct value of the object from the argument passed in. This looks clean and I will definitely continue to use this. Read More.
  • Of the things that are invisible at first glance, the calculator returns a error message after the user divides by zero and also after you calculate one result you can click/input equal button again and it will perform same operation again. For example 2+2=4 and another click will be 6 since result our previous equation was 4 and our last input was 2 so 4+2=6.

You can find more about the things I used in the project in the README on github. I just wanted to point out new things here.

Special thanks to @brasspetals for tossing an idea with the focus trap which she used in her project. No specific questions here but any additional feedback will be appreciated! Let me know if you spot any bugs. I know they're hiding somewhere! 😅

Thanks! 😁

Code

Please log in to post a comment

Log in

Community feedback

  • Anna Leigh•5,135
    @brasspetals

    Yet again an incredible job! 🎉 The keyboard accessibility is awesome, and the custom theme picker is so cool! I also really appreciate how helpful and packed full of resouces your README is!

    🕵️‍♀️ I did some serious hunting and can only come up with two minor suggestions.

    • A "reset to defaults" type of button would be nice on the theme settings modal. (Excellent job on the modal focus trap, btw).
    • If calc__display-value--previous is empty calc__display-value--current shifts upward. I think design wise, it'd be best if the current number always kept the same position.
  • P
    Dave•5,295
    @dwhenson

    Amazing work again @tediko!! I really like what you did with this one! I’m having a good look at your repos too as I’m thinking I need to switch my overall approach now I’ve mostly got the basics of html and css sorted to something more like what you are doing with these challenges

    I.e. taking them on and really using them as a way of exploring and pushing things further, rather than a check list to get through!

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, tediko! 👋

    This solution is just amazing! 👏 The calculator functions really well and looks great and I love the extra colors preference menu that you added! 😍 And it's especially cool that you did all this with good ol' vanilla JS (and webpack, I suppose)! 😎

    I took a look at your code and I really like it—I think it's very readable and makes a lot of sense. I've bookmarked this solution (and the last one, too)! 😀

    You've also been giving so much great feedback lately—keep that up, as well! 👍

    And of course—keep coding (and happy coding, too)! 😆

  • darenhua•125
    @darenhua

    I absolutely love your work here. As a beginner, I've been intensely reading your github repo code, and there are just so many wonderful techniques. Just from reading, I learned so much about how to organize and break sass/css files into many (with layout, base, util folders...), niche things like aria-label, a resets.css/sass file... and a LOT more. Thank you for your wonderful work and documentation.

    I have only been exposed to the tip of the iceberg of development- with a cookie-cutter code structure of one big "styles.css" file and one big "script.js" file, and I desperately want to write code that is more organized and can scale more neatly. If possible, could you explain a little the purpose of the div with the class "overlay", that you included before the calculator div? Also, I would greatly appreciate a little breakdown of how you personally tackle the task of splitting your sass files. As far as my beginner analysis goes: base is the folder for "initializing" sass files- like initiliazing with margin resets or font family

    component is for any "component" styles, like modals or other popups that are normally hidden and not a part of the main webpage

    layout is where the main webpage layout happens- for styles like changing display:, width/heights, padding/margins, position, etc... making the webpage layout properly

    and utilities is for helper files with variables, animations, etc that are used in the main style files?

    At the moment, I am also confused on where things like element background colors, things like font size of the text on the keypad keys, or even the background color of the body. Surprisingly for me, I can't find any style like

    body{ background = blue; }

    in the code haha! I'd love to hear any feedback on how I could get to the level you are at, or any tips/resources to getting to write more professional-feeling code.

    Thank you so much!!!

  • Dinesh•1,115
    @Dinesh1042

    Great Work on this challenge the calculator looks awesome.😍 I really liked the way of OOP in your code and I have learned something new from that. and Awesome work custom color selection.

    Happy Coding!💪

  • Beygs•130
    @Beygs

    Wow! Amazing job! I will definitely study that code 😄

  • Mojtaba Mosavi•3,740
    @MojtabaMosavi

    @tediko Great work, looks really nice. I specially liked your way of writing OOP(js), I would really aprreciate it if you could if you mention the learning resources you used in the beginning of your Js journey.

    Happy coding :)

  • Faris P•2,810
    @FarisPalayi

    Wow!!! 😲

  • Alex Daniel•700
    @p-alex

    Well done @tediko! The color configuration feature was a great idea. Amazing project!

  • Grace•32,130
    @grace-snow

    Fatastic! I don't know if I could make this myself, it would take me aaaaages! Well done 👏

  • P
    Skyz Walker•1,215
    @Skyz03

    @tediko Nice work Man, Really love your custom theme idea. You are quite an inspiration. Keep up the good Work ! Your projects are really amazing to source of learning as well. I am surely gonna bookmark this. Thanks.

  • Rahul kumar Gautam•655
    @RahulKumarGautam1636

    This is really amazing idea, one more great work from you as usual.

  • Matt Studdert•13,611
    @mattstuddert

    Another incredible solution, tediko!! 💯

    I absolutely love the added detail of the colour configuration modal as a fourth option. Nice work making the modal trap focus as well. Great to see you taking accessibility into consideration with each project you create.

    Keep up the amazing work! 🙌

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