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

• Frontend Mentor - Calculator app solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
  • Author

Note: Delete this note and update the table of contents based on what sections you keep.

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: GitHub Repo
• Live Site URL: GitHub Pages

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla JS

What I learned

It was pretty cool to build the JS using best practices from software engineering.

The first thing I did was to decouple the Calculator engine logic. This way, the CalculatorView is not tied to a single way of doing calculations. If someone wants to change how the engine works, without changing how the view behaves, that is totally possible.

new CalculatorView(new DifferentCalculatorEngine());

Another thing that was awesome to learn was how to animate the theme tip indicator when you changed the theme. I didn't want to make the tip change theme in a static way but to move in the track following an inertia like-behavior.

I ended up doing: 1 div for the track, 3 radio buttons for the 3 themes and 1 span as the tip.

<form class="theme-toggle">
  <span class="selected-theme"></span>

  <!-- Radio buttons here -->
</form>

And moving the selected-theme span based on which radio button was selected at the moment.

Continued development

I thought this should be made using Vanilla JS, but it seems it's not. I'd like to implement this using a JS library I'm not familiar with like:

• New versions of VueJS
• Svelte
• Lit

I'm also a bit uncomfortable on how I implemented the themes. I'd like to add some lazy loading to them, so I might find better ways to handle that.

Author

• Website - David Sánchez
• Frontend Mentor - @d4vsanchez
• Twitter - @d4vsanchez