/calculator-app

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

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Desktop-first workflow

What I learned

I learned to use HTML inputs as CSS click event listeners and also learned about sibling selector.

input[type="radio"] {
  opacity: 0;
  cursor: pointer;
}

#theme1:checked ~ .circle {
  top: 17%;
  transform: translateX(5px);
}

#theme2:checked ~ .circle {
  top: 17%;
  transform: translateX(33px);
}

#theme3:checked ~ .circle {
  top: 17%;
  transform: translateX(60px);
}

Also this was the first time I used Switch statement in Javascript which I think made my code cleaner than it would have been with IF ELSE statements. Also I finally got to use an event listener that was not click.

document.body.addEventListener("keydown", e => {
    switch (e.key) {
        case "0":
        case "1":
        case "2":
        case "3":
        case "4":
        case "5":
        case "6":
        case "7":
        case "8":
        case "9":
        case "*":
        case "+":
        case "/":
        case "-":
        case "x":
            output.value += e.key;

            mathExpression += (e.key === "x") ? "*" : e.key;

            break;
        case "Backspace":
            output.value = output.value.slice (0, output.value.length - 1)
            mathExpression = mathExpression.slice (0, mathExpression.length - 1)

            break;
        case "=":
            output.value = eval (mathExpression)

            break;
        default:
            alert ("Invalid Input!")
    }
})

Useful resources

Author