working dial pad

index.html

<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
  <div id="output"></div>
  <div class="row">
    <div class="digit" id="one">1</div>
    <div class="digit" id="two">2
      <div class="sub">ABC</div>
    </div>
    <div class="digit" id="three">3
      <div class="sub">DEF</div>
    </div>
  </div>
  <div class="row">
    <div class="digit" id="four">4
      <div class="sub">GHI</div>
    </div>
    <div class="digit" id="five">5
      <div class="sub">JKL</div>
    </div>
    <div class="digit">6
      <div class="sub">MNO</div>
    </div>
  </div>
  <div class="row">
    <div class="digit">7
      <div class="sub">PQRS</div>
    </div>
    <div class="digit">8
      <div class="sub">TUV</div>
    </div>
    <div class="digit">9
      <div class="sub">WXYZ</div>
    </div>
  </div>
  <div class="row">
    <div class="digit">*
    </div>
    <div class="digit">0
    </div>
    <div class="digit">#
    </div>
  </div>
  <div class="botrow"><i class="fa fa-star-o dig" aria-hidden="true"></i>
    <div id="call"><i class="fa fa-phone" aria-hidden="true"></i></div>
    <i class="fa fa-long-arrow-left dig" aria-hidden="true"></i>
  </div>
</div>

script.js

var count = 0;

$(".digit").on('click', function() {
  var num = ($(this).clone().children().remove().end().text());
  if (count < 11) {
    $("#output").append('<span>' + num.trim() + '</span>');

    count++
  }
});

$('.fa-long-arrow-left').on('click', function() {
  $('#output span:last-child').remove();
  count--;
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

working-dial-pad {
  background-color: #42a5f5;
}

working-dial-pad .row {
  margin: 0 auto;
  width: 200px;
  clear: both;
  text-align: center;
  font-family: 'Exo';
}

working-dial-pad .digit,
working-dial-pad .dig {
  float: left;
  padding: 10px 30px;
  width: 30px;
  font-size: 2rem;
  cursor: pointer;
}

working-dial-pad .sub {
  font-size: 0.8rem;
  color: grey;
}

working-dial-pad .container {
  background-color: white;
  width: 320px;
  padding: 20px;
  margin: 30px auto;
  height: 420px;
  text-align: center;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

working-dial-pad #output {
  font-family: "Exo";
  font-size: 2rem;
  height: 60px;
  font-weight: bold;
  color: #1976d2;
}

working-dial-pad #call {
  display: inline-block;
  background-color: #66bb6a;
  padding: 4px 30px;
  margin: 10px;
  color: white;
  border-radius: 4px;
  float: left;
  cursor: pointer;
}

working-dial-pad .botrow {
  margin: 0 auto;
  width: 220px;
  clear: both;
  text-align: center;
  font-family: 'Exo';
}

working-dial-pad .digit:active,
working-dial-pad .dig:active {
  background-color: #e6e6e6;
}

working-dial-pad #call:hover {
  background-color: #81c784;
}

working-dial-pad .dig {
  float: left;
  padding: 10px 20px;
  margin: 10px;
  width: 30px;
  cursor: pointer;
}

working-dial-pad.markdown

working dial pad

Working Dial Pad that outputs the keys pressed. The backspace key deletes a character.

A Pen by Ilya on CodePen.

License.