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
• 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

Screenshot

Links

• Solution URL: (https://github.com/mallow12/Calculator-project.git)
• Live Site URL:(https://abdullah-digital-calculator.netlify.app/)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Vanilla js

What I learned

One of the major things i leearned in this project is out to use the eval() function in javascript and i also improved my knowledge on using javascript local storage.

code i am proud of:

<div class="toggle" id="theme-1">
  <i class="indicator"></i>
</div>
<div id="screen" class="screen">0</div>

.item:nth-of-type(17) {
  grid-column: 1/3;
}
.item:nth-of-type(18) {
  grid-column: 3/5;
}

const updateTheme = () => {
  const themeGetter = localStorage.getItem('theme');
  const themeMain = JSON.parse(themeGetter);
  html.classList = themeMain;
  toggle.id = themeMain;
};

Continued development

I am going to continue developing my javascript skills with future projects.

Author

• Frontend Mentor - @mallow12

Acknowledgments

This is acknowledgement to God for making this project easy for me and my colleagues Abdurrahman and Badru fuad for their contribution in explaining and giving me more insights on part of this project.😀