Calculator App
Frontend Mentor - Calculator App Solution
This is a solution to the Calculator App Challenge on Frontend Mentor.
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
Screenshot
Links
- Live Site URL: https://kens-visuals.github.io/calculator-app/
- Solution URL: https://www.frontendmentor.io/solutions/calculator-app-built-with-react-and-tailwindcss-S1tYTCe85
My process
Built with
- React
- hooks: useState, useReducer
- Tailwind CSS
- Semantic HTML5 markup
- CSS Flexbox
- CSS Grid
- Mobile-first workflow
What I learned
One of my favorite projects that and a project that I wanted to create since day one of learning web development. It feels ten times cooler because now I'm built it with modern tools such as: React, TailwindCSS, etc. TailwindCSS came in handy to make all the themes and change the colors easily. I feel like every other option out there, such as using CSS :root variables would've made the matter a lot harder than it is. What comes to the main functionality of the app, I was planning on making it with just useState, but once I managed to do that pretty easily, I wanted to make this a bit more challenging. So, I went to research useReducer, after a bunch of videos, articles and reading the docs, I managed to build it with just useReducer. Will definitely use useReducer in the upcoming projects. As an addition I added a small section in the main display, that will show the previous number, current number and the operation, so the user doesn't have to guess what's happening behind the scenes. I hope you'll enjoy using it as much as I enjoyed coding it!
Useful resources
- useReducer from React's new docs - As of 05/04/2022 this React doc is in beta mode, yet it's fresh and cool to play with and learn.
- useReducer article - A cool article that helped me to get started with useReducer.
Author's Links
- Medium - @kens_visuals
- CodePen - @kens-visuals
- Codewars - @kens_visuals
- Frontend Mentor - @kens-visuals
