This is a solution to the Calculator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
By performing this challenge I acquired js+css+html skill. I completed this challenge in vanilla JS, so no other frameworks used. Though in the future I'm planning to complete this challenge in React. As a bonus I learned how to created a theme toggler switch, and to use global CSS variables, and how it is convenient to switch them by just few lines of JS code. The challenge is made totally responsive according the requirements. Where the breakpoints considered as 600px, since it satisfies the lower px screens as well
Users should be able to:
- See the size of the elements adjust based on their device's screen size
- Perform mathmatical operations like addition, subtraction, multiplication, and division
- Adjust the color theme based on their preference
- Solution URL: Github repo
- Live Site URL: Website
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
- Vanilla JavaScript implemented
I learned how to switch theme colors easily by JavaScript and CSS custom properties. Improved using HTML semantics. JS classes and objects.
I would implement key typing function. Right now the solution only provides mouse click inputs, however, using the same methods of the calculator object, I could connect the triggering on number key pressed.
-
20 Best Toggle Switches - There are plenty of examples of the different toggle switches. Alvaro did a great job by collecting nice work in one page.
-
Dark and Light theme switcher - Musthad Ahamad created good tutorial about how to easily implement theme switching in website with big css properties.
-
Building Calculator with JS by WebDev Simplified - In this channel, it is easily explained how to code a calculator in JS.
- Github page - Yakub
- Frontend Mentor - Yakub Egamnazarov
I would like to give credits for the resource makers, that they help to other developers to grow.