boyofgreen

<div class="wrapper">
    <h1>HTML5 GLASSES</h1>
    <p>Created by <a href="http://twitter.com/wesbos" target="_blank">Wes Bos</a>. 
    See full details <a href="">here.</a></p>
    <!-- Our Main Video Element -->
    <video height="426" width="640" controls="false">
        <source src="videos/wes4.ogg" />
        <source src="videos/wes4.mp4" />
    </video>
    <!-- Out Canvas Element for output -->

boyofgreen

var pageMeter = document.querySelector('.completeMeter');
var checkMyValidity = function(){
    var valueCollection = document.querySelectorAll('#RegisterUserForm input');
    var myTotal = 0;
    for (var i = 0; i< valueCollection.length; i++) { 
    //store it in local storage so it's there if they come back
    localStorage[valueCollection[i].name] = valueCollection[i].value;
    var isValid = valueCollection[i].checkValidity();
       if(isValid === true){
             myTotal += 20;     

boyofgreen

input:required {
     border: 1px solid #16cc16; /*green */
    -moz-box-shadow: 0px 0px 11px #16cc16;
    -webkit-box-shadow: 0px 0px 11px #16cc16;
    box-shadow: 0px 0px 11px #16cc16;
    outline: none;
}
input:invalid {
     border: 1px solid #f5ba0a; /*yellow*/
    -moz-box-shadow: 0px 0px 11px  #f5ba0a;

boyofgreen

...

 <progress class="completeMeter" min="0" max="100" low="0"  high="10" value="0" ></progress>
</div>
 <form id="RegisterUserForm" action="" name="myForm" method="post">
 <fieldset>
     <p>
        <label for="name">Name</label>
        <input id="name" name="name" type="text" class="text" placeholder="Name" 
value="" required />

boyofgreen

    <div class="container">

      <h1>Choose Your weapon</h1>
      <p>Click on one of the selections below to find out more info about your character:</p>
      
      <ul id="myList">
        <li data-discription="Most powerful goblin in entire kingdom" >Ludo</li>
        <li data-discription="Ruler over all goblins big and small" >Jareth the Gobblin King</li>
        <li data-discription="Only person who can put a stop to the Goblin King" >Sarah</li>
        <li data-discription="Unsung hero of the goblin kingdom" >Hoggle</li>