Frontend Mentor - Calculator app solution

Git: https://github.com/MARVELGARR/Calculator-app App Demo: https://polite-sundae-d772e6.netlify.app/

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
• Built with
• What I learned
• Continued development
• Author

Overview

This is a frontend mentor challenge to create a web application calculator with three different theme

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 using prefers-color-scheme and have any additional changes saved in the browser

Built with

• React
• Tailwind css
• CSS Grid
• Mobile-first workflow
• React - JS library
• tailwind -css framework

What I learned

During the development of this web dev project, I had the opportunity to learn and implement some new technologies and techniques. Here are the two main takeaways from this project:

1. Context API in React: I had some prior experience working with React but had never used the Context API before. The Context API is a powerful tool that enables us to manage state across different components in our React app without having to pass props down the component tree. After learning the fundamentals of the Context API, I was able to implement it in this project to manage some of the state variables and make the code more modular and easier to maintain.

2. Custom Themes in Tailwind: Another new skill I acquired during this project was the ability to create custom themes in Tailwind. Tailwind is a popular CSS framework that provides a set of pre-defined styles and utility classes that we can use to style our web applications. However, with custom themes, we can go one step further and create our own set of styles and utility classes that align with our project's design goals. This allowed me to create a cohesive and consistent design across different components of the web app.

Overall, this project was a great learning experience that helped me improve my skills in both React and Tailwind, and I'm excited to apply these skills in my future projects.

Continued development

i would like to add more themes or you could also make a pull request to add your own theme to it and I would also like to add more functionalities

Author

• Frontend Mentor - @yourusername
• Twitter - @marvel_garra