Forked from glenda drew's Pen target practice complete.
A Pen by Spencer Mathews on CodePen.
| <table id="choc"> | |
| <tr> | |
| <th colspan='2'>chocolate</th> | |
| </tr> | |
| <tr> | |
| <td>extra dark</td> | |
| <td>ecstatic</td> | |
| </tr> | |
| <tr> | |
| <td>very dark</td> | |
| <td>very happy</td> | |
| </tr> | |
| <tr> | |
| <td>dark</td> | |
| <td>happy</td> | |
| </tr> | |
| <!--add two more table rows with table data of more types of chocolate--> | |
| <tr> | |
| <td>white</td> | |
| <td>sweet</td> | |
| <tr> | |
| </table> |
| //call to jQuery ready function that checks whether or not the browser is | |
| //ready to load the page | |
| $(document).ready(function() { | |
| //send a message to the console window to check | |
| //if this page is geting read | |
| console.log("ready"); | |
| //custom js goes here | |
| //add code to change the body background | |
| //js filters include :even and :odd | |
| $('#choc tr:even').css('backgroundColor', '#eee'); | |
| // add a filter that changes something in the css for the odd tr's | |
| //close jQuery | |
| }); |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
| * { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| body { | |
| font-family: Verdana; | |
| color: #222; | |
| } | |
| table#choc { | |
| width: 5in; | |
| margin: 1in auto 0px auto; | |
| color: #420808; | |
| border-bottom: 1px solid #eee; | |
| border-right: 1px solid #eee; | |
| } | |
| table#choc tr { | |
| padding: 7px; | |
| } | |
| table#choc td, | |
| table#choc th { | |
| height: .5in; | |
| padding-left: 25px; | |
| border-left: 1px solid #eee; | |
| } | |
| table#choc th { | |
| text-align: left; | |
| font-size: 36px; | |
| padding: 24px; | |
| } |
Forked from glenda drew's Pen target practice complete.
A Pen by Spencer Mathews on CodePen.