/calculator-app

This is a Solution for the Frontendmentor.io Calculator Challenge.

Primary LanguageJavaScript

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

dark theme in desktop dark theme in mobile customized theme in mobile light theme in desktop

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • CSS Grid
  • Mobile-first workflow
  • Neovim
  • npm live-server
  • Firefox

What I learned

Some of the Things I've Learned from working on this Project, see below:

Semantic HTML

<header>Header consist of themeToggler and Heading</header>
<main>Main consist of Keypad</main>

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look.

CSS Transition

#themeToggler {
  transition: margin-left .5s;
}
  • Here, the first parameter margin-left is the property we need to add an animation to.
  • Second parameter .5s is the duration of the animation

Grid Display

.keypad {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
  • fr stands for "fraction of available space". It divides the space into equal number of parts.
  • 1fr takes 25% of this space. Because there are 4 cols in a row. 100% / 4 = 25%.

Centering Items vertically and horizontally

.num-key {
  align-items: center;
  justify-content: center;
}

This helped me to center the keypad numbers vertically and horizontally in the keypad <div>.

prefers-color-scheme

if (window.matchMedia('(prefers-color-scheme:dark)').matches) {
  applyDarkTheme();
}

Used to update the Theme according to the preference of the user.

Author

Acknowledgments

References