Skip to content

Instantly share code, notes, and snippets.

@spencermathews
Last active January 22, 2016 01:52
Show Gist options
  • Save spencermathews/a336c729af4f2d87087a to your computer and use it in GitHub Desktop.
Save spencermathews/a336c729af4f2d87087a to your computer and use it in GitHub Desktop.
target practice 2 (js) start
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment