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.
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-schemeand have any additional changes saved in the browser
- Solution URL: Frontend Mentor Solution
- Live Site URL: Github Pages
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.
// 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));
}
}- Svelte 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: 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: While the examples were in Java, the logic helped me finally understand how to handle operator precedence and the transition from infix to postfix.
- Website: Sijal Manandhar
- Frontend Mentor: @sam4web
- Github: @sam4web