Press "Enter" to skip to content

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.

calculator using jquery ui, calculate input fields jquery, html5 piano code, build a piano keyboard using javascript, jquery piano, piano html code

Features:

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

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

Piano Keyboard Like Calculator App, Pianolator Plugin/Github, piano javascript github


See Demo And Download

Official Website(elisatheng): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.