Vintage typewriter: The sexiest jQuery contact form ever

Hello friends, on today’s tutorial we will take a step aside of our classical design tutorials and will be focusing more on the programming part, we’re about to show you how to develop an awesome typewriter experiment with all the primary functions fully operational thanks to the mighty power of jQuery and CSS. But don’t think that this is pure crazy experimentation, because this typewriter can actually be utilized as a brilliant contact form to place on your different projects. The tutorial will guide you across the different programming stages, so please set your Dreamweaver, Notepad++ or whatever media you utilize and let’s begin.

View Demo
Download Source

Please enter your email address. (be sure is correct, so we can send you the download link)

You will be suscribed to our freebies newsletter, NO CRAP, NO SPAM, No news, No promos... Only high quality freebies each 15 days. Promise. Easy unsuscribe.

 

Regarding the design, our creative team designed a beautiful vintage typewriter using a retro color palette, the beautiful Lobster font and an old school notebook sheet, this great design will be explained in a future tutorial. We also placed a nice green texture on the background to support the design. If you want to learn how to make beautiful artworks like this typewriter, please check all our icons tutorials exclusively by TutorialShock.

How does it work?

The typewriter can be manipulated in 3 different ways: You can either operate it via keyboard, clicking directly over the typewriter’s keys or using a touch screen, though there are a couple of things that can be improved (remember that this is just an exercise).

On the keyboard area, you will find all the interactive keys that will let you enjoy our typewriter, each key follows your keyboard orders except the Tab key because as you probably know, that key is utilized for switch between windows. The text area is the corresponding to the sheet, there you will see all the input text and it has an infinite vertical size unless you click the Send button which in that case replaces the sheet with a new one so you can write a new message. As for the DIV container it’s where everything is located and it has no interactivity applied to.

Using the typewriter as a contact form

The typewriter’s system is very easy to understand. First you enter your message using the keyboard (you can even enter Spaces, switch to Caps Lock and use the Tab key) and once you’re satisfied with the message, simply click on the send key and your message will be automatically dispatched to the recipient.

Implementing the @font-face property

We used something pretty cool in our typewriter experiment, the @font-face property. The great thing about @font-face is that now you can implement more than just the standard system fonts in your designs and be absolutely sure that people are going to see them because the property actually calls the typeface from an specific URL and loads it when the people visits the place, so the person can see the font without having it installed on their computer. For our typewriter experiment we utilized the lovely fonts Harting and Lobster, you can check this by highlighting the letters, you will see that they’re not images but actual characters.

The Harting font was created using the @font-face generator of Font Squirrel.

You can find many more useful information about @font-face in WebDesignshock.

Calling the sound library to our typewriter

To complement our typewriter exercise, we decided to insert a series of sounds from the internet to emulate the actual typewriter sounds such as the paper rip, the key pressing and others. What we did was integrate all the sounds with our typewriter with the powerful library SoundManager 2. What this library does is that it wraps and extends both the HTML and Flash audio sound APIs, providing a single, unified sound API to JavaScript.

The sound library was implemented using the power of Flash and JavaScript to ensure a high cross-browser feature, probably many of you are thinking right now “are you guys insane?, Flash is dead, you must utilize HTML5″. The truth is despite the fact that HTML5 is getting more popular every day, it’s still not fully steady and because of that it does not guarantee the same level of cross-browser features that can be achieved using Flash.

Step 1: Configure the HTML

To begin our typewriter we must take care of the HTML. You must create a demo page and then save it as demo.php so once you done it we can continue with the further implementation of the jQuery library.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>typewritter</title>
</head>

<body>
</body>
</html>

Step 2: Identifying the Typewriter’s elements

Having our HTML established, we proceed with the identification of the different graphic elements that are going to be part of our typewriter. Those elements are the following:

Step 3: Working with the CSS

Considering the images that we’ve just defined, we proceed with the implementation of our CSS, so now we leave you with the whole code (comments included) that you have to insert to make the typewriter.

* {
margin: 0;
padding: 0;
}
/* Background image utilized for the whole document */
body {
background-image: url('../img/i27x7ym.jpg') ;

}

/* Loads the main container where the typewriter is located. */
#container {
margin: 100px  auto 0 auto  ;
width: 1300px;
position:relative;

}
/* On this part the main housing of the typewriter is loaded without the keys. */
#typewritter{
height:858px;
width:845px;
background: transparent url(../img/machine_2.png) no-repeat 0 0;
position:relative;
top:120px;
z-index:2;
}
/* This section is where the sheet is loaded with a defined size of 477px width and 58 px height, though during programming it can be extended up to 260 px. */
#write {
margin: 0 200px;
padding:5px;
width: 477px;
height: 58px;
*height:66px;
font-family: 'HartingPlain', Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
color:#000;
background: transparent url(../img/sheet_2.png) no-repeat top left;
line-height:30px;
*line-height:30px;
border:none;
position:absolute;
top:105px;
*top:75px;
z-index:3;
outline:none;
resize:none;
overflow-y:hidden;

}
/* In this part the keyboard is loaded and on this case each key is loaded via an ul and li tag. */
#keyboard {
width:auto;
*width:614px;
margin: 0 100px 0 140px ;
list-style: none;
position:absolute;
z-index:3;
overflow:hidden;
top:490px;
}
/* Here is where a key is loaded and a li value is assign it within the keyboard. */
#keyboard li {
float: left;
margin: 0 0 0 0;
width: 40px;
height: 49px;
line-height: 40px;
text-align:     center;
font-family: 'Lobster', arial, serif;
font-size:16px;
color:#4B3005;
text-shadow: -1px -1px 1px #ccc;
}
/* On this part the main background for all the keys is assigned.*/
li.letter,li.symbol {
background: transparent url(../img/key.png) no-repeat  center  5px;
}
.capslock, .tab, .left-shift {
clear: left;
}
/* Here's where the background for the delete, tab and return keys is determined.*/
#keyboard .tab, #keyboard .delete ,#keyboard .return {
background: transparent url(../img/shift_key.png) no-repeat   center  7px;
width: 58px;
}
/* This is where the background is set for the Caps Lock key.*/
#keyboard .capslock {
background: transparent url(../img/return.png) no-repeat -2px 5px;
width: 104px;
}
/* On this part the background for the Left Shift and Right Shift is assigned.*/
#keyboard .left-shift, #keyboard .right-shift {
background: transparent url(../img/shifts_keys.png) no-repeat   center  7px;
width: 90px;
}

.lastitem {
margin-right: 0;
}
/* This applies exclusively on the case when the keyboard letters are set in Caps Lock mode. */
.uppercase {
text-transform: uppercase;
}
/* Here's where the background is established for the Space key.*/
#keyboard .space {
clear: left;
width: 544px;
*width: 534px;
background: transparent url(../img/key_space.png) no-repeat  center center;
}
/* This only applies when you hold Shift, it changes the numbers for symbols.*/
.on {
display: none;
}
/* Turns into pointer any of the keys when rolling over.*/
#keyboard li:hover {
cursor: pointer;
}
/* On this part the background for the Send key is assigned.*/
li#send {
font-size:22px;
color:#4B3005;
text-shadow: -1px -1px 1px #fff;
width:80px;
background: transparent url(../img/shifts_keys.png) no-repeat    center center;
}

Step 4: Establishing the JavaScript

This is the programmatic part of the tutorial, because is precisely on this stage where we’re going to define all the interactivity and animation instances such as the key’s effect, sounds and the sheet’s movement.

/* This function estimates the number of lines in the text area of any size, this is a jQuery function named countlines.*/
var top_init=105;/*Screen's starting position (textaarea).*/
var browser_info= new Array();
jQuery.each(jQuery.browser, function(i, val) {
browser_info[i]=val;

});
/*
This jQuery function makes reference to the following URL:  http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html

*/
(function($) {

/*
* Auto-growing textareas; technique ripped from Facebook
*/
$.fn.autogrow = function(options) {

this.filter('textarea').each(function() {

var $this       = $(this),
minHeight   = $this.height(),
lineHeight  = $this.css('lineHeight');

var shadow = $('

').css({
position:   'absolute',
top:        -10000,
left:       -10000,
width:      $(this).width() - parseInt($this.css('paddingLeft')) - parseInt($this.css('paddingRight')),
fontSize:   $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight'),
resize:     'none'
}).appendTo(document.body);
for(var i in browser_info )
{
if(i==='msie' )
{
var top_init=24;
break    ;
}
else{
var top_init=20;
break;
}

}
var update = function() {

var times = function(string, number) {
for (var i = 0, r = ''; i < number; i ++) r += string;
return r;
};

var val = this.value.replace(/
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/n$/, '
')
.replace(/n/g, '
')
.replace(/ {2,}/g, function(space) { return times(' ', space.length -1) + ' ' });

shadow.html(val);
var top_o=parseFloat($(this).css('height'));
/* On this part a validation process determines whether the textarea crosses a determined size of 260px height or in case that it pass over the top that gives static and vice versa.*/
if (top_o<260 || shadow.height()<=240)
{
$(this).css('height', Math.max(shadow.height() + top_init, minHeight));
$(this).css('overflow-y','hidden' );
}
if (top_o==260 || top_o==272)
{
$(this).css('overflow-y','auto' );
}
if (top_o
{
var top=parseFloat($(this).css('top'));

$(this).css('top', big = (top===105) ? top-22 : top-30 );
var aSoundObject2 = soundManager.createSound({id:'mySound1',url:'sound/typewriter_line_break.mp3'});aSoundObject2.play();
/*  Makes the sound effect in a newline case.*/
}
if (top_o>parseFloat($(this).css('height')))
{
var top=parseFloat($(this).css('top'));
$(this).css('top',big = (top===83) ? top+22 : top+30);
}

}

$(this).change(update).keyup(update).keydown(update);
update.apply(this);

});

return this;

}

})(jQuery);
/* This function verifies if the key that is being typed is on Caps Lock mode. */
function isCapslock(e){

var ascii_code    = e.which;
var shift_key    = e.shiftKey;
if( (65 <= ascii_code) && (ascii_code <= 90) && !shift_key )
{
return true
}
else
{
return false;
}
}

var $keyboard = jQuery.noConflict();    /*Loads the jQuery variable in order to avoid any conflict.*/
var caps_lock=false;
var atCount = 2;/* Starting position of the lines counter, it must be set at 2 to make the comparison.*/
var control_sc=false;/* Scroll's state of control when a newline happens.*/
var click_focus=false;

/* Makes the textarea show the cursor when the page starts.*/
$keyboard(document).ready(function(){
$keyboard("#write").focus();

});

$keyboard(function() {
$keyboard('#write').autogrow();
});

/* eventos del mouse */
$keyboard(function(){
var $write = $keyboard('#write'),
shift = false,
capslock = false;
/* Mousedown event= On mouse down= Mouse up, this event applies only within the virtual keyboard. */
$keyboard('#keyboard li').bind({
mousedown: function() {
/*When you're in mouse down state, the key's position changes to 1 px height and 1 px to the right to perform the effect. */
$keyboard(this).css('position','relative');
$keyboard(this).css('top','2px');
$keyboard(this).css('left','2px');
$keyboard(this).css('border-color','#e5e5e5');

var $this = $keyboard(this),

character = jQuery.trim($this.html()); // If it's a lowercase letter, nothing happens to this variable
if (! $this.hasClass('send'))
{

if ($this.hasClass('return'))
{
/* Performs the sound effect when pressing the Return key or performing a newline. */
var aSoundObject1 = soundManager.createSound({id:'mySound3',url:'sound/typewriter_line_break.mp3'});
aSoundObject1.play();
}
else{
/*  Executes the sound effect when pressing any other key. */
var aSoundObject = soundManager.createSound({id:'mySound2',url:'sound/typewriter_key_4.mp3'});
aSoundObject.play();

}

// Shift keys
/* When pressing the Shift key it changes the key's state. */
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$keyboard('.letter').toggleClass('uppercase');
$keyboard('.symbol span').toggle();

shift = (shift === true) ? false : true;
capslock = false;
return false;
}

// Caps lock
/* This happens when pressing the Caps Lock key.*/
if ($this.hasClass('capslock')) {
$keyboard('.letter').toggleClass('uppercase');
capslock = true;
return false;
}

// Delete
/*This is how you delete any character.*/
if ($this.hasClass('delete')) {

document.getElementById('write').value=document.getElementById('write').value.substr(0, document.getElementById('write').value.length - 1);
return false;
}

// Special characters

if ($this.hasClass('symbol')) character = $keyboard('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "t";
if ($this.hasClass('return')) character = "n";

// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();

// Remove shift once a key is clicked.
if (shift === true) {
$keyboard('.symbol span').toggle();
if (capslock === false) $keyboard('.letter').toggleClass('uppercase');

shift = false;
}
if(click_focus==true)
{
$keyboard('#write').val('');
click_focus=false;
}
// Add the character
if (! $this.hasClass('delete')) {
document.getElementById('write').value+=character;
}
$keyboard('#write').autogrow();
/* When there's more than one line on the textarea this effect is displayed and keeps increasing until it gets 14 lines to be at the monitor's level. */

}

},
mouseup:  function (){
/* On the mouse up event, it leaves the key on its original position so the key's effect stops.*/
$keyboard(this).css('position','static');
$keyboard(this).css('top','2px');
$keyboard(this).css('left','2px');
$keyboard(this).css('border-color','#000');
if(! $keyboard(this).hasClass('send'))
{
$keyboard("#write").focus();
}
}

});
/* This only happens when clicking over the Send button, what it does is to simply perform a character erasing effect and sends the email.*/
$keyboard('#send').click(function()
{
/* Generates the sound effect on case that you click over the Send key only. */
var aSoundObject5 = soundManager.createSound({id:'mySound5',url:'sound/typewriter-paper-1.mp3'});aSoundObject5.play();
/*Here's where the sheeet's animation happens in sincronicity withh the sound while moving 300 px up and changes the hidden position so it emerges behind the typewriter with a more subtle animation. */
$keyboard('#write').animate({"top": "-=300px"},'fast',function() {
/*The following variable is the email's body*/
var message=$keyboard(this).val();
$keyboard(this).css('height','58px');
$keyboard(this).val('     mail sent    ');
$keyboard(this).css('top','163px');
$keyboard(this).css('overflow-y','hidden' );
$keyboard(this).css('z-index','1');
$keyboard(this).animate({"top": "-=58px"},'slow',function(){
$keyboard(this).css('z-index','3');
/*On this part includes the PHP script to send the message, it receives the "message" parameter that is equivalent to the mail's body, if you wish to place your own parameters then you have to customize it.*/
$keyboard.post("Mail/sendmail.php", { mail:message  },
										function(data){

										});
});
click_focus=true;

});

});

/*On this part all the main keyboard events occur when you enter a text on the textarea, there are 3 different events that might be applied on this situation:

1.keydown
2.keypres
3.keyup
*/
var keypressed = 0;

$keyboard('#write').bind(
{
/*On keydown the same effect that occurs during mouse down is performed and it verifies only the characters to perform the same effect that with the mouse.*/
click:function(event){
if(click_focus==true)
{
$keyboard('#write').val('');
click_focus=false;
}
},

keydown:    function(event) {

/* This variable captures the pressed key when is on keydown, what you do is move 2 px down and then 2 px right to make the effect look more interesting.*/
var lowercase=String.fromCharCode(event.keyCode);

switch(event.keyCode)
{
case 8:
lowercase='delete';
break;
case 13:
lowercase='return';
break;
case 16:
lowercase='shift';
break;
case 20:
lowercase="caps lock";

if (isCapslock(event)===true ||caps_lock===false)
{
if (caps_lock===false)
{
$keyboard('.letter').toggleClass('uppercase');
caps_lock=true;
}
}
else
{
if (event.keyCode!=32)
{
if (caps_lock===true)
{
$keyboard('.letter').toggleClass('uppercase');
caps_lock=false;
}
}
}

break;
case 32:
lowercase=" ";
break;
case 186:
lowercase='<span class="off">;</span><span class="on">:</span>';
break;

case 188:
lowercase='<span class="off">,</span><span class="on">&lt;</span>';
break;
case 190:
lowercase='<span class="off">.</span><span class="on">&gt;</span>';
break;
case 191:
lowercase='<span class="off">/</span><span class="on">?</span>';
break;
case 222:
lowercase='<span class="off">'+"'"+'</span><span class="on">"</span>';
break;

}

$keyboard('#keyboard li').each(function(){
/* On this part the same Mousedown effect applies.*/

if ((jQuery.trim($keyboard(this).html())===lowercase.toLowerCase())|| jQuery.trim($keyboard(this).html())===lowercase)
{
$keyboard(this).css('position','relative');
$keyboard(this).css('top','2px');
$keyboard(this).css('left','2px');
$keyboard(this).css('border-color','#e5e5e5');
}

});
if (event.keyCode===13)
{
var aSoundObject1 = soundManager.createSound({id:'mySound3',url:'sound/typewriter_line_break.mp3'});
/* Makes the sound effect when it passes more than one newline.*/
aSoundObject1.play();
}
else{

var aSoundObject = soundManager.createSound({id:'mySound2',url:'sound/typewriter_key_4.mp3'});
aSoundObject.play();
/* Executes the sound effect when you type any key. */

}

},
keyup: function(event){
/* During this event the key that is being pressed returns to its original position instantly. */
var lowercase=String.fromCharCode(event.keyCode);
switch(event.keyCode)
{
case 8:
lowercase='delete';
break;
case 13:
lowercase='return';
break;
case 16:
lowercase='shift';
break;
case 20:
lowercase="caps lock";
break;

case 32:
lowercase=" ";
break;
case 186:
lowercase='<span class="off">;</span><span class="on">:</span>';
break;

case 188:
lowercase='<span class="off">,</span><span class="on">&lt;</span>';
break;
case 190:
lowercase='<span class="off">.</span><span class="on">&gt;</span>';
break;
case 191:
lowercase='<span class="off">/</span><span class="on">?</span>';
break;
case 222:
lowercase='<span class="off">'+"'"+'</span><span class="on">"</span>';
break;

}

/*On this part the same Mouseup effect happens*/
$keyboard('#keyboard li').each(function(){

if (jQuery.trim($keyboard(this).html())===lowercase.toLowerCase())
{
$keyboard(this).css('position','static');
$keyboard(this).css('top','2px');
$keyboard(this).css('left','2px');
$keyboard(this).css('border-color','#000');
}

});

},
keypress: function(event){
/* This is the keypress event and it occurs when you type in, it recognizes whether the typed text is in lowercase or uppercase.*/

if (isCapslock(event)===true)
{
if (caps_lock===false)
{
$keyboard('.letter').toggleClass('uppercase');
caps_lock=true;
}
}
else
{
if (event.keyCode!=32)
{
if (caps_lock===true)
{
$keyboard('.letter').toggleClass('uppercase');
caps_lock=false;
}
}
}

}
});
});

Step 5: Inserting the HTML code

We have made some major advances in our typewriter, now we must proceed with the implementation of the HTML code, so let’s grab that bull by the horns.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!--
The HTML design of this keyboard is based on http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/
-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Keyboard test</title>
   <!-- Loads the fonts Harting and Lobster-->
      <link href='http://fonts.googleapis.com/css?family=Orbitron:regular,500,900' rel='stylesheet' type='text/css' />
   <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
   <link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
   <!-- Content's CSS -->
    <link href="css/style.css" rel="stylesheet" type="text/css"  />
   <link rel="stylesheet" type="text/css" href="css/flashblock.css" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
   <script type="text/javascript" src="js/soundmanager2.js"></script>
    <script type="text/javascript">

    // Code to insert inside the sound library.
    // The library was inspired on http://www.schillmania.com/projects/soundmanager2/

    // Flash version URL switch (for this demo page)
        var winLoc = window.location.toString();

        if (winLoc.match(/flash9/i)) {
          soundManager.flashVersion = 9;
          if (winLoc.match(/highperformance/i)) {
            soundManager.useHighPerformance = true;
            soundManager.useFastPolling = true;
          }
        } else if (winLoc.match(/flash8/i)) {
          soundManager.flashVersion = 8;
            }

            soundManager.useFlashBlock = true;
            soundManager.url = 'swf/'; // path to SoundManager2 SWF files (note trailing slash)
            soundManager.debugMode = false;
            soundManager.consoleOnly = false;
            soundManager.onready(function(oStatus) {
                 if (!oStatus.success) {
                    return false;
                  }
              // soundManager is initialised, ready to use. Create a sound for this demo page.
                 soundManager.createSound({
                    id: 'mySound2',
                    url: 'sound/typewriter_key_4.mp3'
                });
                soundManager.createSound({
                    id: 'mySound3',
                    url: 'sound/typewriter_line_break.mp3'
                 });
                soundManager.createSound({
                    id: 'mySound5',
                    url: 'sound/typewriter-paper-1.mp3'
                });
                 if (soundManager.flashVersion > 8) {
                t = window.setInterval(checkRAM,500);
                document.getElementById('flash-ram-use').style.display = 'inline';
                checkRAM();
                  }
            });

function checkRAM() {
 if (soundManager.supported()) {
    var ram = (soundManager.getMemoryUse()/1024/1024).toFixed(2);
   if (!isNaN(ram)) {
     document.getElementById('flash-ram-use').innerHTML = ram+' MB';
   } else {
      document.getElementById('flash-ram-use').style.display = 'none';
   }
 }
}

var t = null;

function doEval(sHTML) {
 var html = sHTML.replace(/<(span|code)>/gi,'');
 html = html.replace(/<[/](span|code)>/gi,'');
 html = html.replace(/&gt;/gi,'>');
 eval(html);
 return false;
}

</script>
   <!-- Loads the logical content of the keyboard. -->
        <script type="text/javascript" src="js/keyboard.js"></script>

</head>
<body>
<div id="container">

    <div id="typewritter">
    </div>
   <!-- textarea or screen simulation. -->
    <textarea id="write"  wrap="virtual" autocomplete="off"  ></textarea>
   <!-- Virtual keyboard. -->
    <ul id="keyboard">
        <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
        <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
        <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
        <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
        <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
        <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
        <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
        <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
        <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
        <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
        <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
        <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
        <li class="symbol"><span class="off">=</span><span class="on">+</span></li>
        <li class="delete lastitem">delete</li>
        <li class="tab">tab</li>
        <li class="letter">q</li>
        <li class="letter">w</li>
        <li class="letter">e</li>
        <li class="letter">r</li>
        <li class="letter">t</li>
        <li class="letter">y</li>
        <li class="letter">u</li>
        <li class="letter">i</li>
        <li class="letter">o</li>
        <li class="letter">p</li>
        <li class="symbol"><span class="off">[</span><span class="on">{</span></li>
        <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
        <li class="symbol lastitem"><span class="off"></span><span class="on">|</span></li>
        <li class="capslock">caps lock</li>
        <li class="letter">a</li>
        <li class="letter">s</li>
        <li class="letter">d</li>
        <li class="letter">f</li>
        <li class="letter">g</li>
        <li class="letter">h</li>
        <li class="letter">j</li>
        <li class="letter">k</li>
        <li class="letter">l</li>
        <li class="symbol"><span class="off">;</span><span class="on">:</span></li>
        <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
        <li class="return lastitem">return</li>
        <li class="left-shift">shift</li>
        <li class="letter">z</li>
        <li class="letter">x</li>
        <li class="letter">c</li>
        <li class="letter">v</li>
        <li class="letter">b</li>
        <li class="letter">n</li>
        <li class="letter">m</li>
        <li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li>
        <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
        <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
        <li class="right-shift lastitem">shift</li>
        <li class="space lastitem">&nbsp;</li>
       <li id="send" class="send"><span>send</span></li>
    </ul>
   <!--Send button-->
</div>
</body>
</html>

And now our typewriter machine is ready and fully operational, we hope that you’ve enjoyed this great exercise that may have more than one practical application, you can test it on all the different browsers and the results will be the same, though in IE8 and IE9 the sheet’s scroll will not show up. Thanks for visiting TutorialShock and reading our articles, please leave us a message to find your opinions and well, we will see you soon :).

View Demo
Download Source

Please enter your email address. (be sure is correct, so we can send you the download link)

You will be suscribed to our freebies newsletter, NO CRAP, NO SPAM, No news, No promos... Only high quality freebies each 15 days. Promise. Easy unsuscribe.

 

 

 

WebDesignShock Editorial

Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock