/calculator-app-Frontend-io-Challenge

My code for the challenge : https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29

Primary LanguageCSS

Frontend Mentor - Calculator app solution

This is my 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

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

image

image

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid (first time I used Grid)
  • Mobile-first workflow
  • Vanilla JS (first time Vanilla JS only, I used to use Jquery most of the time)

What I learned

  • I learned to use CSS grid ruleset, in a basic way.

  • I also learned to use vars in CSS for the themes.

Useful resources

  • StackOverflow
  • w3schools

Author