Skip to content

LiyanNguyen/calculator-app

Repository files navigation

Calculator App

A simple calculator webApp with theme switcher


⚠️ Updates

5/11/2022

  • This project has been updated to use TypeScript

17/11/2022

  • This project has been updated to use LESS Preprocessor

Frontend Mentor - Calculator App

This is a solution to the Calculator app challenge on Frontend Mentor.

Screenshot

image image image image

Links

My Process

  • Design the Mobile viewport WHILE desinging the Desktop Viewport at the same time
  • Design the flex/grid system, making sure to have both Desktop and Mobile Viewport layout correct
  • Add in all the other HTML content
  • Finished up all the CSS designs
  • Add in the JavaScript logic
  • Upgrage to TypeScript

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • TypeScript
  • Flexbox
  • Mobile-first workflow

What I Learned

  • Reviewed TypeScript
  • Theme Switcher using classes on the root file of the CSS
  • Probably better to specify the widht and height of the small UI elements first rather than the big ones
  • The containers of UI element should just be paddings - their width and height is defined by the smaller elements inside as flex items

Author

Acknowledgments

JavaScript Minifier: https://www.toptal.com/developers/javascript-minifier

About

A simple calculator webApp with theme switcher

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published