Responsive Numeric Keypad

index.html

<div class="keypadwrapper">
  <div class="inputwrapper">
    <span class="numberinput"></span>
    <span class="numberinput"></span>
    <span class="numberinput"></span>
    <span class="numberinput"></span>
  </div>
  <div class="keypad">
    <div id="lineone" class="numberline">
      <div class="content">
        <div>
          <span class="number">1</span>
          <span>___</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span class="number">2</span>
          <span>ABC</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span class="number">3</span>
          <span>DEF</span>
        </div>
      </div>
    </div>
    <div id="linetwo" class="numberline">
      <div class="content">
        <div>
          <span class="number">4</span>
          <span>GHI</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span class="number">5</span>
          <span>JKL</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span class="number">6</span>
          <span>MNO</span>
        </div>
      </div>
    </div>
    <div id="linethree" class="numberline">
      <div class="content">
        <div>
          <span class="number">7</span>
          <span>PQRS</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span class="number">8</span>
          <span>TUV</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span class="number">9</span>
          <span>WXYZ</span>
        </div>
      </div>
    </div>
    <div id="linefour" class="numberline">
      <div class="content">
        <div>
          <span class="number"><</span>
          <span>___</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span class="number">0</span>
          <span>___</span>
        </div>
      </div>
      <div class="content">
        <div>
          <span class="number">*</span>
          <span>___</span>
        </div>
      </div>
    </div>
  </div>
</div>

responsive-numeric-keypad.markdown

Responsive Numeric Keypad

A responsive numeric keypad with full browser support. Inspiration taken from the iPhone lock screen.

A Pen by stella siera on CodePen.

License.

script.js

$(function () {
	$(".content").click(function () {

		var value = $(this).find(".number").text();

		if (value !== "<") {
			$(".numberinput").each(function () {
				var a = $(this).text();
				if (!a) {
					$(this).text(value);
					$(this).addClass("nocircle");
					return false;
				}
			});
		} else {
			$($(".numberinput").get().reverse()).each(function () {
				var a = $(this).text();
				if (a) {
					$(this).text("");
					$(this).removeClass("nocircle");
					return false;
				}
			});
		}
	});
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

html, body { margin: 0; padding: 0; background-color: #000000; font-family: 'Open Sans', sans serif; font-weight: 300; -webkit-tap-highlight-color: transparent; }

.rotate { display: none; color: #ffffff; position: absolute; left: 50%; top: 50%; text-align: center; width: 400px; height: 50px; margin-left: -200px; margin-top: -25px; }

.keypadwrapper { text-align: center; width: 100%; color: #FFFFFF;

	.inputwrapper { margin: 2em; line-height: 0.61em;   vertical-align: middle; }

	.numberinput { display: inline-block; height: 15px; width: 15px; border-radius: 50px; border: 1px solid #FFFFFF; margin-right: 2%; margin-left: 2%; font-size: 2em; }

	.keypad {
		.numberline { width: 100%; }

		#linefour { position: absolute; bottom: 10%; }

		#linethree { position: absolute; bottom: 30%; }

		#linetwo { position: absolute; bottom: 50%; }

		#lineone { position: absolute; bottom: 70%; }

		.content { display: inline-block; margin: 0 8%;

			div { width: 4em; height: 4em; text-align: center; border: 1px solid #FFFFFF; border-radius: 70px; display: inline-block; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

				span:nth-child(1) { display: block; font-size: 1.8em; height: 1em; margin-top: 0.2em; }

				span:nth-child(2) { font-size: 0.6em; }
			}

			div:hover { background-color: #ffffff; color: #000000; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
		}
	}
}

.nocircle { width: auto !important; border: none !important; height: auto !important; }

@media all and (max-width: 470px) {
	.content { margin: 0 5% !important; }
}

@media all and (max-width: 350px) {
	.content { margin: 0 2% !important; }
}

@media all and (max-height: 470px) {
	#linefour { bottom: 2% !important; }

	#linethree { bottom: 23% !important; }

	#linetwo { bottom: 43% !important; }

	#lineone { bottom: 63% !important; }
}