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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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
• Bonus: Have their initial theme preference checked using prefers-color-scheme and have any additional changes saved in the browser

• Solution
• Live

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow
• JavaScript ES6+

Generally I improved my ES6+ JS, also learned a bit about CSS Grid and a lot about CSS variables <- they are awesome!

.themeselector-dot {
  background: var(--t3-hlighted-bg, var(--t2-hlighted-bg, var(--hlighted-bg)));
}

You can nest them to create "select theme thing"!

I need to develop my JavaScript skills, that was part I had most problems with. Now I'm really comfortable with HTML & CSS.

• CSS-Tricks - This helped me for better understanding of CSS Grid. I like this website, because it's making hard things easy to understand.

• MDN - Helped me with Syntax!

• Web Dev Simplified - He's awesome guy, helped me with understanding whole calculator feature.

• Github - Haxikowy
• Frontend Mentor - @Haxikowy