/calculator-app

Calculator app challenge from Frontend Mentor

Primary LanguageCSS

Frontend Mentor - Calculator app solution

This is a solution to the Calculator app challenge on Frontend Mentor.

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

Desktop screenshot

Mobile purple screenshot

Links

My process

I like to write first the HTML, only the HTML, it looks weird but when it's done I have a better idea of the styles needed.

Then I try to use only CSS for everything (animations, states, styles) and the last step is to add JS.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow
  • Vanilla JS

What I learned

  1. How to group numbers.
  2. How to use media queries with JS.
  3. How to format numbers (Intl.NumberFormat). (This isn't effective for this particular project.)

Continued development

  • Update layout for horizontal orientation in mobile.
  • Add other mathematical functions.

Useful resources

JS Media queries

Author

Contributors