Online Calculator PWA

Hi there👋   This is a Standard Calculator Web Component (custom element) developed only using HTML5, CSS3, and Vanilla JS. The custom tag created for this calculator is <my-calculator></my-calculator>. This custom tag contains various attributes which can be modified to our liking in index.html file.

Click 👉 THIS LINK to see it in live action🚀 You can also use keyboard (in laptops/desktops) for using this calculator.

Cool Features 😎

• This is a PWA (Progressive Web App), which can be installed natively on mobile and desktop devices.
• TAB key can be used to navigate forward, and SHIFT+TAB key to navigate backward, for focusing input display/calc keys.
• SPACE key can be used to press/click a focused calc key.
• ENTER or = key can be used (when calc display is in focus) to evaluate the entered expression.
• ESCAPE key can be used to reset calc display (when in focus).
• The display ignores input from any other keyboard key apart from numeric and arithmetic keys.
• Event Delegation has been used for listening to 'click' and 'keydown' events of each calc key.
• A single parenthesis key () has been used for conditionally entering ( or ) brackets.

Demo Clips 👇

Creating a Web Component

Javascript syntax for creating a basic custom web component 👇

  customElements.define('custom-tag-name', class extends HTMLElement{
    constructor() {
      super();
      this.attachShadow({mode: 'open'}); // Attaches a shadow DOM to the custom element
      
      // ... Create child elements using document.createElement('tag-name')
      
      this.shadowRoot.appendChild(childElement); // Append child elements to the shadow DOM
      
      // ... append more child elements if any
    }
  });

Steps to Run Project Locally 💻

• Clone this repo to your local machine.
• Open repo in vscode.
• Open with live server.