/fem-calculator-app

Calculator app - one of frontend mentor challenges.

Primary LanguageCSS

Frontend Mentor - Calculator app solution

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.

Table of contents

Overview

The challenge

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

Screenshot

Links

My process

Built with

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

What I learned

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"!

Continued development

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

Useful resources

  • 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.

Author