Going from HTML to Javascript

Links to class exercises

by davestein

HTML

<div id="header">
    <h1>Going from HTML to Javascript</h1>
    <h2>Go here First: http://fiddle.jshell.net/davestein/zYBB2/show/</h2>
    Please don't click ahead. You'll ruin all the fun.<br />
    <br />
    Today's lessons will be using JSFiddle. To run anything hit: CTRL/CMD+Enter while mouse is in "JavaScript" box<br />
    The cheatsheet <a href="http://fiddle.jshell.net/davestein/a9hBQ/show/" target="_blank">is here</a>
  </div>
  
  <ol id="lessons"></ol>

CSS

body { 
  padding: 20px;   
  font-family : Helvetica, Arial, sans-serif;
  font-size: 14px;
}
a:hover { text-decoration: underline; }
#header { margin-bottom: 25px; }
a { font-size: 16px; }
a:visited { color: #333; }
.description { padding-top: 3px; }
ol li { list-style: decimal; margin-left: 25px; padding-bottom: 25px; }
h1 { margin-bottom: 3px; font-size: 16px; font-weight: bold; }
h2 { margin-bottom: 3px; font-size: 14px; font-weight: bold; }

JavaScript

var lessons = [
    { 
      link : 'daCA6',
      text : 'Alert Box',
      desc : 'Make it alert your name.'
    },
    { 
      link : 'YtGrt',
      text : 'Getting a Reference',
      desc : 'Set a variable based on the DOM.'
    },
    { 
      link : 'g9NFT',
      text : 'Alerting from Event',
      desc : 'Make it alert when form submits.'
    },
    { 
      link : 'KDfc5',
      text : 'Detect Adding to cart',
      desc : ''
    },
    { 
      link : 'X3wRF',
      text : 'Actually Adding to Cart',
      desc : 'See the difference between a String and Number'
    },
    { 
      link : 'g5CZW',
      text : 'Add and Subtract',
      desc : 'Make a function to subtract'
    },
    { 
      link : 'C9BCG',
      text : 'How to Add and Subtract',
      desc : 'The answer to what\'s above'
    },
    { 
      link : 'Qdqe6',
      text : 'DRY Concept',
      desc : 'Use functions to avoid repetition.'
    },
    { 
      link : 'ZLqk9',
      text : 'First If Statement',
      desc : 'Prevent Negative Numbers'
    },
    { 
      link : '6yav5',
      text : 'Multiple Products',
      desc : 'Uses a for-loop and function'
    },
    { 
      link : 'MTRRS',
      text : 'Multiple Products w/ Objects',
      desc : 'Using objects to store data'
    },
    { 
      link : 'wRLc3',
      text : 'Multiple Products Changing Price',
      desc : 'Make price update'
    },
    { 
      link : '2cm9D',
      text : 'Price Actually Changing',
      desc : 'The answer to what\'s above'
    },
    { 
      link : 'Rtb43',
      text : 'toFixed',
      desc : 'How to use toFixed'
    },
    { 
      link : 'qDWaM',
      text : 'Using a for-in loop',
      desc : 'Loop through object to add data'
    },
    { 
      link : 'AXnbv',
      text : 'Adding grand total',
      desc : 'The answer to what\'s above'
    },
    { 
      link : '4EkT7',
      text : 'Scope',
      desc : 'Same functionality as before, but better code'
    }
    
  ];
  
  var lessons_el =...