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 Brief
  • Screenshot
  • Links
• My process
  • Built with
  • Development Tools
  • 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: github
• Live Site URL: vanillajs-responsive-multitheme-calc.vercel.app

My process

Built with

• Semantic HTML5 markup
• Accessability
• Mobile-first workflow
• CSS (GRID, custom properties, media-queries, relative sizing units, color transitions)
• CSS Reset
• Vanilla JS
• Local Storage, prefers-color-scheme APIs
• No build step

Development Tools

• VS Code
• http-server to have hot-reload

What I learned

I've used the event delegation pattern to handle clicks over the keypad instead of adding an event listener to each button.

Utilizing this technique optimizes performance and reduce memory usage by minimizing the number of event listeners.

I use it quite often, especially in cases where there are multiple dynamically generated elements or when handling events on a large number of elements.

  function handleKeypadInput(event) {
    if (event.target.tagName !== "BUTTON") {
      return;
    }

    const button = event.target;
    const buttonValue = button.getAttribute("data-id");
    ...
  }

For theme switcher I used calc() function to vertically align slider position to its labels withing absolute positioning.

/* some lines omitted */

:root {
  --slider-width: 2.725rem;
  --slider-position-step: calc(var(--slider-width) / 2.625);
}

html[data-theme="dark"] .slider:before {
  transform: translateX(0rem);
}

html[data-theme="light"] .slider:before {
  transform: translateX(var(--slider-position-step));
}

html[data-theme="violet"] .slider:before {
  transform: translateX(calc(var(--slider-position-step) * 2));
}

Continued development

Continued development includes enhancing desktop user support by implementing device keyboard input, streamlining user experience with potential features like playing sound on key-press.

As the project is aimed to give me more practice in features I don't work on in my day-to-day job, I wish to find room to use the latest CSS features released, such as the :has() pseudo-class and prefers-color-scheme media query.

Useful resources

• The Perfect Theme Switch Component - This helped me to find a great approach for implementing the theme switch. I really liked this pattern and will use it going forward.
• Can-I-Use - "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. Check it every time before using cutting edge CSS property or Web Browser API.

Author

• Frontend Mentor - @eugenekulikou
• LinkedIn - @eugenekulikou