https://github.com/sam4web/calculator-app
This is a solution to the Calculator app challenge on Frontend Mentor.
https://github.com/sam4web/calculator-app
frontend-mentor sveltejs tailwindcss typescript
Last synced: 11 days ago
JSON representation
This is a solution to the Calculator app challenge on Frontend Mentor.
- Host: GitHub
- URL: https://github.com/sam4web/calculator-app
- Owner: sam4web
- Created: 2026-04-09T15:30:56.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-05-11T17:02:41.000Z (about 1 month ago)
- Last Synced: 2026-05-11T18:28:26.070Z (about 1 month ago)
- Topics: frontend-mentor, sveltejs, tailwindcss, typescript
- Language: CSS
- Homepage: https://sam4web.github.io/calculator-app/
- Size: 574 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Calculator app solution
This is a solution to the [Calculator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Useful resources](#useful-resources)
- [Author](#author)
## 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: [Frontend Mentor Solution](https://www.frontendmentor.io/solutions/calculator-app-cvmBM047hY)
- Live Site URL: [Github Pages](https://sam4web.github.io/calculator-app/)
## My process
### Built with
- [Svelte](http://svelte.dev/)
- [Tailwind](https://tailwindcss.com/)
- TypeScript
- Mobile-first workflow
### What I learned
In this project, I implemented the **Shunting Yard algorithm** to convert **Infix** expressions into **Postfix** (Reverse Polish Notation). This involved managing operator precedence and parentheses using a **Stack**.
**Key Highlights:**
- **Shunting Yard Algorithm:** Utilized a stack to reorder tokens based on mathematical precedence.
- **Stacks (LIFO):** Applied "Last-In, First-Out" logic for both parsing operators and evaluating the final expression.
- **Postfix Evaluation:** Developed a logic to process the final string and calculate results without the need for parentheses.
```javascript
// Postfix evaluation logic using a for...of loop
for (const token of tokens) {
if (isOperator(token)) {
const b = stack.pop();
const a = stack.pop();
stack.push(calculate(a, b, token));
} else {
stack.push(Number(token));
}
}
```
### Useful resources
- [Svelte Docs](https://svelte.dev/docs/): As someone new to Svelte, these docs were my primary guide. They were incredibly helpful for understanding reactivity and component lifecycle.
- [Evaluation of Postfix Expression](https://www.geeksforgeeks.org/dsa/evaluation-of-postfix-expression/): This article broke down the step-by-step logic for using a stack to evaluate expressions, which was crucial for my calculation logic.
- [Shunting Yard Algorithm Implementation](https://www.geeksforgeeks.org/java/java-program-to-implement-shunting-yard-algorithm/): While the examples were in Java, the logic helped me finally understand how to handle operator precedence and the transition from infix to postfix.
## Author
- Website: [Sijal Manandhar](https://sijalmanandhar.com.np/)
- Frontend Mentor: [@sam4web](https://www.frontendmentor.io/profile/sam4web)
- Github: [@sam4web](https://github.com/sam4web)