Frontend Mentor - Calculator app solution

This is a solution to the [Calculator app challenge on Frontend Mentor]

Table of contents

• Overview
  • The challenge
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS rem
• CSS Grid
• Javascript

What I learned

• Using CSS grid to create grid layouts. It allows me to align keys and buttons in an easier way than using tables. Compared to flexbox, grid module makes it possible to layout rows and columns at the same time.
• Using media query + rem units in CSS to create an App adpated to different screen size.
• Practicing the use of JavaScript conditionals to control the flow of execution.
• Making a toggle switch by using a checkbox (the use of checked/unchecked status).

Continued development

The change of colour theme is currently realized by creating different stylesheets and then loading one of them based on user's action. It is easy to understand and implement if there are just a few colour themes. However, it might be inefficient when dealing with more complicated situations. I'll continue learning other ways to dynamically implement this function.

Useful resources

• Basic Concepts of grid layout - This helped me understand the basics of grid layout.
• How TO - Toggle Switch - A clear guide to making a toggle button.
• A Complete Guide of responsive web design using CSS rem and em Units - A good article talking about responsive web design.