Frontend Mentor - Calculator app solution

Live Link: https://jailbreak-101.github.io/CALCULATOR-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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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: Add solution URL here
• Live Site URL: [https://jailbreak-101.github.io/CALCULATOR-APP/]

My process

Built with

• CSS Grid
• Flexbox
• CSS custom properties
• Semantic HTML5 markup
• Desktop-first workflow
• Local Storage
• Object Oriented Principle (class template)

What I learned

• I learnt how to manipulate the DOM properly accessing all i need on the WebPage using JavaScript.
• I also learnt how to use the object-oriented principle to create a class component with similar methods and attributes to it.
• Adding a theme switcher was a bit of a pain in the neck, but i used local storage to solve this problem after watching a video on YouTube. The link to this video will be in the useful resources section.

Continued development

• I would love to continue using the Class template to create instances of objects, where possible to make my code easily re-usable and readable for other developers.

• I also want to continue to manipulate the DOM more, because it is an essential for creating Web Applications, and also easily access pages on the Web,for JavaScript is the language of the Web.

Useful resources

• The Object Oriented Principle - Learning about the Object Oriented Principle to write class templates for Object instances and methods.

• How to develop a theme switcher - This helped me to code a theme switcher using CSS and not JavaScript

Author

• Twitter - @Oluwagbemiga
• Frontend Mentor - @JAILBREAK
• Github - @JAILBREAK-101

Acknowledgments

I'll like to appreciate Frontend Mentor for their amazing projects that gives all developers out there including I the opportunity to build real-world project, and to see what documenting a project really is.