All solutions

This challenge has also ended, I started this challenge to practice the previous knowledge in order to stay away from the learning environment for a while and practice on the current knowledge so that it is not forgotten.

I am waiting for your comments about this design.

I finally managed to finish this challenge.

It took me a long time to create the js part of the challenge because this was the first calculator challenge I created. I have tested this challenge several times and in different ways to avoid the problem as much as possible (although there may still be some unsolved problems).

The next part of the time was spent on customizing the radio buttons, it wasn't too hard, but it took a while to get the accessibility issue resolved and to be able to work with the calculator using the keyboard buttons (tab and spacebar).

Actually, this is the first challenge where I added "sass build process" to the challenge. which automatically converts the sass code to css by entering the command "npm run build" and then adds all the necessary vendor prefixes to it. Of course, I am a beginner in this new knowledge and I need to spend time improving my knowledge. (I will probably use gulp in the next project).

I am impatiently waiting for your suggestions and criticisms to write better sass and js codes.

I finally designed this challenge, it really took me a lot of time for several reasons that I will mention below:

• Better and cleaner writing js codes compared to previous projects.
• Use of bem methodology.
• Creating a loading section for when the data is taken from the json file and placed in the html element.
• Increasing the performance of the project by observing some points and using the light house tool in the chrome browser.
• ...

The things mentioned above did not take much time, but it was the rework (changing the names of the classes to the bem methodology, better writing the js codes, ...) that took my time.

From this challenge, in addition to the many things I learned, I learned to write better codes to avoid having to rewrite the code later, which is a waste of time and energy. (Of course, I try to make it so)

I look forward to your comments, criticisms and suggestions on how to better write js code and better design the challenge.

I builded NFT preview card component, this is the second project I have used sass, I am waiting for your comments and criticisms on how to write sass better.

I builded QR code component, this is the first project I have used sass, I am waiting for your comments and criticisms on how to write sass better.

Finally, I was able to create the (Intro section with dropdown navigation) challenge, I am waiting for your comments and criticisms about how I designed and code it.

Version 1.1 changes:

• Rename classes to BEM methodology.
• Adding font to the main project files and using it instead of using web fonts.
• Added style.min.css file.
• Added description meta tag.
• The media_queries.css file has been deleted and the style in this file has been added to the style.css file.
• Fixed Accessibility and HTML Issues.