A simple Piano Keyboard Like Calculator App in jQuery | Pianolator

Pianolator is a jQuery piano keyboard-like calculator app that allows the user to perform number math just like playing the piano.


  • Addition (+)
  • Subtraction (-)
  • Multiplication (*)
  • Division (/)
  • Modulo (%)
  • Pow (^)
  • Memory (Ms : save, M+ : addition, M- : subtraction)

Must Read: An Easy To Use Handling Keyboard Shortcuts in JavaScript | shortcut.js

How to make use of it:

1. Add the required JavaScript and CSS information to the web page.

<!-- OPTIONAL -->
<link rel="stylesheet" href="bootstrap.min.css" />
<!-- Basic Styling -->
<link rel="stylesheet" href="css/styles.css" />
<!-- For Responsive Piano Keys -->
<link rel="stylesheet" href="css/media-queries.css" />
<!-- jQuery Is Required -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Core JavaScript -->
<script src="js/script.js"></script>

2. Code the HTML for the piano calculator app.

<section class="row">
  <div class="container col calculator">
    <div class="row screens">
      <div class="col result"></div>
      <div class="col stock"></div>
    <div class="row keys">
      <div class="col-sm-12">
        <div class="row operators">
          <div class="col-xs-1 col-sm-1">Ms</div>
          <div class="col-xs-1 col-sm-1">M+</div>
          <div class="col-xs-1 col-sm-1">M-</div>
          <div class="col-xs-1 col-sm-1">^</div>
          <div class="col-xs-1 col-sm-1">%</div>
          <div class="col-xs-1 col-sm-1">/</div>
          <div class="col-xs-1 col-sm-1">*</div>
          <div class="col-xs-1 col-sm-1">-</div>
          <div class="col-xs-1 col-sm-1">+</div>
          <div class="col-xs-1 col-sm-1">C</div>
          <div class="col-xs-1 col-sm-1">&larr;</div>
        <div class="row numbers">
          <div class="col-xs-2 col-sm-1">1</div>
          <div class="col-xs-2 col-sm-1">2</div>
          <div class="col-xs-2 col-sm-1">3</div>
          <div class="col-xs-2 col-sm-1">4</div>
          <div class="col-xs-2 col-sm-1">5</div>
          <div class="col-xs-2 col-sm-1">6</div>
          <div class="col-xs-2 col-sm-1">7</div>
          <div class="col-xs-2 col-sm-1">8</div>
          <div class="col-xs-2 col-sm-1">9</div>
          <div class="col-xs-2 col-sm-1">0</div>
          <div class="col-xs-2 col-sm-1">.</div>
          <div class="col-xs-2 col-sm-1">=</div>

Read More –

Virtual Keyboard Typing Sound Built With Pure Javascript
A Robust Javascript Library for Capturing Keyboard Input | hotkeys

See Demo And Download

Official Website(elisatheng): Click Here

This superior jQuery/javascript plugin is developed by elisatheng. For extra Advanced Usage, please go to the official website.