calculator-app-main

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:

Screenshot


drawing




My process

Step one - Get one layout and theme
Step two - Figure out how to do math
Step three - Configure themes


Built with …




What I learned…

Keep it simple. And don’t be afraid to try something new.


As you can see, I chose a simple way achieve order

<form class="keys">
    <input type="button" value="7">
    <input type="button" value="8">
    <input type="button" value="9">
    <input type="button" value="del" class="del">
    <input type="button" value="4">
    <input type="button" value="5">
    <input type="button" value="6">
    <input type="button" value="+">
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <input type="button" value="-">
    <input type="button" value=".">
    <input type="button" value="0">
    <input type="button" value="/">
    <input type="button" value="x">
    <input type="button" value="reset" class="reset">
    <input type="submit" value="=" class="submit">
  </form>

I found a way to implement prefers-color-scheme against a custom localStorage variable

:root{
  .theme1{
   @include theme1;
  }
  .theme2{
    @include theme2;
  }
  .theme3{
    @include theme3;
  }
  @media(prefers-color-scheme: dark){
    .theme3{
      @include theme3
    }
  }
  @media(prefers-color-scheme: light){
    .theme2{
      @include theme2
    }
  }
}

Proudly reaping the benefits from OOP

import Calculator from "./objects/Calculator"
 
const el = document.querySelector('.calc');
const myCalc = new Calculator(el)

Continued development

I realized that I should have done this project with typescript in hindsight.

Useful resources

Author