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

Screenshot

Links

• Solution URL: Calculator App
• Live Site URL: Calculator App

My process

Built with

• Semantic HTML5 markup
• Tailwindcss
• Flexbox
• CSS Grid
• Mobile-first workflow
• React Context Api
• React - JS library

What I learned

Continued development

The Calculator even though functional has some small bugs that needs fixing also i will like to add history to it so a user can select from his/her calculator history.

Useful resources

• Tailwind `.container` the right way - This article helped me with customising tailwindcss' default .container config
• Tailwindcss Official Documentation - This is the tailwindcss docs which also helped with most class names.

Author

• Frontend Mentor - @Billbern
• Twitter 🐦 - @Kbillgreenz