Frontend Mentor - Calculator app solution

This is a solution to the Calculator app challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

The challenge

The user is 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

Screenshot

Links

• Solution URL: github repo
• Live Site URL: github live page

My process

Built with

• HTML5
• SASS
• Typescript's page - Typescript
• Svelte's page - Svelte framework
• github repo Math Evaluator by morriswmz

What I learned

I'm happy to finally finish this project. It was a way a for me to get into typescript, sass and especially svelte. I think choosing a framework was a big step in my web developpement journey, it facilitated a lot of the process, for example, making the screen update when you enter numbers etc... Now one thing I'm not happy with is how I got the themes to change. I tried multiple ways, having 3 scss files for each color theme but i couldn't find a way to globally change the color theme's file import on components.

Useful resources

• Svelte tutorials - This helped me to learn svelte.
• Beginner's Guide to Using SCSS - This is an nice article which helped me learn scss quickly.
• Typescript Documentation - This article summarized me features of typescript.