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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• 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 and have any additional changes saved in the browser

Screenshots

Links

• Solution URL: https://www.frontendmentor.io/solutions/localstorage-regex-sass-X4ekBCyU4
• Live Site URL: https://mrgeminus.github.io/calculator-app-main/

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

• Website - Uros Tomic
• Frontend Mentor - @MrGeminus
• LinkedIn - Uros Tomic
• Xing - Uros Tomic
• StackOverflow - MrGeminus
• Twitter - @MrGeminus