Piano Keyboard Like Calculator App In jQuery - Pianolator

A jQuery-powered, Piano Keyboard-like calculator app that allows the user to perform arithmetic operations on numbers just like playing a piano. 

How to use it:

1. Add the necessary JavaScript and CSS files to the 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>
    <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>
        <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>
        </div>
      </div>
    </div>
  </div>
</section>

---

This awesome jQuery plugin is developed by elisatheng. For more Advanced Usages, please check the demo page or visit the official website.