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
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 and have any additional changes saved in the browser
Screenshots
Links
My process
Built with
- Semantic HTML5 markup
- CSS pre-processor (SASS)
- Mobile-first workflow
- BEM naming convention
- Flexbox
- Regular expression
- TypeScript
What I learned
I learned a lot about RegExp and TypeScript.
A great example would be this function that checks the passed string and returns a modified version of it with
, as thousand separator and . as a decimal separator.
function formatString(value) {
return value.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}
Continued development
I’d definitely plan to get better at writing JavaScript and TypeScript code.
Useful resources
- RegExp - MDN - Great sourse for learning about RegExp.
- RegExp - W3Schools - Another great sourse for learning about RegExp.
- Thousands Digit Separators - great tool for writing and testing the regular expression
- Stackoverflow - This post on StackOverflow helped me understand and implement the number formatting with JavaScript
- Custom Theme Toggler - This helped me with the toggler design. Gary is an amazing UX/UI Designer.
I’d definitely recommend to anyone to check his channel.
- TypeScript Crash Course - In this video Brad explains the basics
of TypeScript
Author