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

@brasspetals Thank you Anna for great feedback! Not gonna lie I forgot about the reset button for theme. It really would be pain in the neck to change them all after taking a fun experimenting different colors. 😅 There is not much room for third button on mobile, not sure how to approach this. What would you say for having 3 icons on mobile like reset icon, save icon, close icon and then on 480px or tablet 769px it would be button for each reset and save and then icon for close like it is now.

UPDATE: Reset button has been added to the project. 😊

UPDATE2: Fixed a bug where calc__display-value--current shifts upward when --previous was empty.

@tediko Just checked it out - the reset functionality is great! The icons for mobile was an excellent idea, and executed really well! 🙌 The only small thing I noticed upon reset is that the custom theme resets, but if you open up the color picker, the colors are still set to the custom colors before reset. Maybe this is intentional?

Display bug is also all fixed, making the calculator even more "seamless". 💯🌟

@brasspetals It wasn't intentional 😅 It is fixed now. Thank you for your feedback Anna!

@dwhenson Thank you. It is not possible to create something extra with every project because there's really not much room for that with landing pages for example but I think challenges like this, when you can add some extra functionality to learn more is a good approach - atleast for me. Good luck! :)

@ApplePieGiraffe Thank you very much for your feedback! I am happy that you like it 😊 I am trying to feel more comfortably with vanilla JS before I hop into frameworks and libraries. Hope you find something helpful in my code 😅 Have a good one, APG 😁 (I replied in the whole thread by accident haha)

@tediko

LOL, I saw that! 😂 Have a good one, too! 👍

@darenhua Thank you very much, it means a lot! As you well know learning the front-end web development is a long journey, so it is important to take one step at the time. What I'm trying to say is that I learn something new from each project, this is the best way to approach it in my opinion.

Answering your first question. The purpose of the .overlay element is quite straight forward. It is using position: fixed and is stretched to take full width and height of my page. The overlay has a background color of rgba(0, 0, 0, 0.7) to create the effect of darkening. By default .overlay is hidden with visibility: hidden and opacity: 0 but I make it visible when my theme-modal is open. This way (in this case, it's hard to notice because there is no visible content behind the modal) my modal is specified and clearly visible while my background is darkened.

In response to the next question about my Sass files management. It is called partials/modules. This is a great way to modularize your CSS and help keep things easier to maintain. You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. In word, it's all about having everything in order so it is easier to work with code. To create this file structure, take a look at this Sass 7-1 Pattern which is self-explanatory. Kevin Powell tutorial about partials

Last but not least. My background-color is set in component-wrapper but it is taking a value from variables. As you can see, my variables are assigned to regular CSS variables from theme-colors. This is because we can't dynamically change Sass variables. Sass is a pre-processor for CSS that makes it easier to write your style rules during development. The browser will not load .sass files; it will load CSS -- so your .scss/.sass must be converted to CSS for the browser. Your Sass variables are only variables in your Sass files. Once converted into CSS, the variables will be replaced with the values they represented at the time of compilation.

My best advice is to create projects and try to learn something new in each of them. Write your code, and if you get stuck, google your problems. Good luck!

@tediko Thank you so much for the quick and in-depth response. The sass patterns guide is very helpful! I will take your advice to heart- I'll make projects and work hard!

@Dinesh1042 Thank you very much! It means a lot :) Also, congratulations on being featured in Newsletter Vol.55!

@tediko Thanks, And wish you the same😊

@Beygs Thank you very much. I hope that you learn something useful from me! :)

@MojtabaMosavi Thank you for kind words! I would love to point you every resource that I used in my learning process so far but there's not really much tutorial/course that I go throught. I remember that I started with FreeCodeCamp JavaScript Algorithms and Data Structures, then I finished JavaScript 30 from WesBos and it was really it. From that point my learning was from creating projects, trial and error. In every project I try to finish JS writing my own code, and then when something is not working iI google it and learn from that. I'm sorry that I didn't help you much.

@tediko Actually it does help a lot, thank you for sharing :).

@FarisPalayi Thanks 😅

@p-alex Thank you very much Alex!

@grace-snow Thank you! I'm glad you like it ☺️.

@Skyz03 Thanks for your feedback. I am glad that my work can be inspiring for someone. I hope you will learn something from this project as you review it. Thanks, again!

@RahulKumarGautam1636 Thank you! Looking forward to your next solution too 👀

@mattstuddert Thanks for the kind words! The idea with a customizable theme came to me as soon as I saw a challenge on slack. 😅 I wanted to do something similar for a long time, but there was no opportunity for it in other projects.

A little thing that I found is that design screenshot from comparison is dark and since we're using prefers-color-scheme in our project the screenshot from our solution is "light" since this "screenshot saver" that site use to generate screenshot doesn't have set dark mode. I had to disable prefers-color-scheme function for a moment to take a screenshot and then restore it 😅 Not a big deal but it is better if there are same colors compared.

@tediko, that's a good point about the prefers-color-scheme query and something to consider in the future. I'll think about anything we could do to improve how that works with the screenshots.