Frontend Mentor - Calculator app solution
This is a solution to the Calculator app challenge on Frontend Mentor.
Table of contents
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.
