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-scheme
and have any additional changes saved in the browser
- Solution URL: Github
- Live Site URL: Calculator App
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
Building a calculator app has always been in my to-do list. Plus, I've learned CSS grid recently and also wanted to try that out in my project. Fortunately, I found this challenge on Frontend Mentor and thus I decided to give it a try.
Initially, I coded this project with traditional website development stack (HTML, CSS, and JavaScript); and I completed website layout and UI stuff. However, when it comes to deal with interactions, I decided to shift this project to React since I think it is easier to develop interaction with React rather than plain JavaScript and DOM.
For layout and styles, I still use plain CSS. I used CSS grid alongside with flexbox. So as to achive light/dark theme, modern CSS features like CSS variables are utilized. To trigger (toggle) dark & light theme, React's useState and useEffect come into play.
I used mathjs for calculation process. In this way, I can extend my app's functionalities like complex calculations in the future.
Last but not least, this app is a Progress Web App (PWA) and hence this app can be installed (Add to Home screen) in mobile devices when opened in browser and used just like a native app.
In my next projects, I'll learn and integrate styling with SCSS. Besides, I'll probably use TailwindCSS with React, NextJS.
- CSS-Tricks (A Complete Guide to Grid) - Want to learn CSS Grid? I'm sure this is one of the best resources for CSS Grid. I learned CSS Grid from this website.
- MathJS - A useful math library for complex calculations. I used this library to evaluate the input string to calculation.
- Bedimcode - A good youtube channel that shows how to build beautiful websites using pure CSS.