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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

• Solution URL: Solution
• Live Site URL: Live site

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vite - Frontend build tool
• Vue3 - JS library
• TypeScript - Strongly typing javaScript
• SCSS - For styles

What I learned

Use Scss features like @mixin to create key button styles:

@mixin keyType-1($area) {
  grid-area: $area;
  color: var(--text-key-1);
  background-color: var(--bg-key-1);
  box-shadow: 0 4px var(--bg-key-1-shadow);
}

@mixin keyType-2($area) {
  grid-area: $area;
  color: var(--text-key-2);
  background-color: var(--bg-key-2);
  box-shadow: 0 4px var(--bg-key-2-shadow);
}

@mixin keyType-3($area) {
  grid-area: $area;
  color: var(--text-key-2);
  background-color: var(--bg-key-3);
  box-shadow: 0 4px var(--bg-key-3-shadow);
}

Then use @each to iteratively add css on each button

$keys1: zero, one, two, three, four, five, six, seven, eight, nine, dot, slash,
  multiply, minus, plus;

$keys2: delete, reset;

@each $key in $keys1 {
  .#{$key} {
    @include keyType-1($key);
  }
}

@each $key in $keys2 {
  .#{$key} {
    font-size: 20px;
    text-transform: uppercase;
    @include keyType-2($key);
    @include desktop {
      font-size: 28px;
    }
  }
}

.equal {
  font-size: 1.2rem;
  @include keyType-3(equal);
  @include desktop {
    font-size: 24px;
  }
}

Author

• Website - [Danny Wen]
• Frontend Mentor - @Furxx2000