Skip to content

Instantly share code, notes, and snippets.

@chadellison

chadellison/index.css

Forked from neight-allen/index.css
Created May 16, 2016 15:17
Show Gist options
  • Save chadellison/322f505d35e1b550e947d8d1640f268a to your computer and use it in GitHub Desktop.
Save chadellison/322f505d35e1b550e947d8d1640f268a to your computer and use it in GitHub Desktop.
Download ZIP
Example code used for a Turing lesson about basic jQuery DOM traversal and manipulation
Raw
index.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
background-color: white;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 12px;
}
td, th {
padding: 0.5em;
border: 1px solid #999;
}
th {
background-color: #CCC;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The Presidents of the United States of America</title>
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body>
<table class="presidents">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Term</th>
<th>Party Affiliation</th>
<th>Selected</th>
</tr>
</thead>
<tbody>
<tr class="president none">
<td class="number">1</td>
<td class="name">George Washington</td>
<td class="term">1789-1797</td>
<td class="party">None</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president federalist one-term">
<td class="number">2</td>
<td class="name">John Adams</td>
<td class="term">1797-1801</td>
<td class="party">Federalist</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democratic-republican">
<td class="number">3</td>
<td class="name">Thomas Jefferson</td>
<td class="term">1801-1809</td>
<td class="party">Democratic-Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democratic-republican">
<td class="number">4</td>
<td class="name">James Madison</td>
<td class="term">1809-1817</td>
<td class="party">Democratic-Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democratic-republican">
<td class="number">5</td>
<td class="name">James Monroe</td>
<td class="term">1817-1825</td>
<td class="party">Democratic-Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president national-republican one-term">
<td class="number">6</td>
<td class="name">John Quincy Adams</td>
<td class="term">1825-1829</td>
<td class="party">National-Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat">
<td class="number">7</td>
<td class="name">Andrew Jackson</td>
<td class="term">1829-1837</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat one-term">
<td class="number">8</td>
<td class="name">Martin Van Buren</td>
<td class="term">1837-1841</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president whig died">
<td class="number">9</td>
<td class="name">William H. Harrison</td>
<td class="term">1841-1841</td>
<td class="party">Whig</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president whig">
<td class="number">10</td>
<td class="name">John Tyler</td>
<td class="term">1841-1845</td>
<td class="party">Whig</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat one-term">
<td class="number">11</td>
<td class="name">James K. Polk</td>
<td class="term">1845-1849</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president whig died">
<td class="number">12</td>
<td class="name">Zachary Taylor</td>
<td class="term">1849-1850</td>
<td class="party">Whig</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president whig">
<td class="number">13</td>
<td class="name">Millard Fillmore</td>
<td class="term">1850-1853</td>
<td class="party">Whig</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat one-term">
<td class="number">14</td>
<td class="name">Franklin Pierce</td>
<td class="term">1853-1857</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat one-term">
<td class="number">15</td>
<td class="name">James Buchanan</td>
<td class="term">1857-1861</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican died">
<td class="number">16</td>
<td class="name">Abraham Lincoln</td>
<td class="term">1861-1865</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">17</td>
<td class="name">Andrew Johnson</td>
<td class="term">1865-1869</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">18</td>
<td class="name">Ulysses S. Grant</td>
<td class="term">1869-1877</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican one-term">
<td class="number">19</td>
<td class="name">Rutherford B. Hayes</td>
<td class="term">1877-1881</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican died">
<td class="number">20</td>
<td class="name">James A. Garfield</td>
<td class="term">1881</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">21</td>
<td class="name">Chester A. Arthur</td>
<td class="term">1881-1885</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat">
<td class="number">22</td>
<td class="name">Grover Cleveland</td>
<td class="term">1885-1889</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican one-term">
<td class="number">23</td>
<td class="name">Benjamin Harrison</td>
<td class="term">1889-1893</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat">
<td class="number">24</td>
<td class="name">Grover Cleveland</td>
<td class="term">1893-1897</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican died">
<td class="number">25</td>
<td class="name">William McKinley</td>
<td class="term">1897-1901</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">26</td>
<td class="name">Theodore Roosevelt</td>
<td class="term">1901-1909</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican one-term">
<td class="number">27</td>
<td class="name">William Howard Taft</td>
<td class="term">1909-1913</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat">
<td class="number">28</td>
<td class="name">Woodrow Wilson</td>
<td class="term">1913-1921</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican died">
<td class="number">29</td>
<td class="name">Warren G. Harding</td>
<td class="term">1921-1923</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">30</td>
<td class="name">Calvin Coolidge</td>
<td class="term">1923-1929</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican one-term">
<td class="number">31</td>
<td class="name">Herbert Hoover</td>
<td class="term">1929-1933</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat died">
<td class="number">32</td>
<td class="name">Franklin D. Roosevelt</td>
<td class="term">1933-1945</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat">
<td class="number">33</td>
<td class="name">Harry S Truman</td>
<td class="term">1945-1953</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">34</td>
<td class="name">Dwight D. Eisenhower</td>
<td class="term">1953-1961</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat died">
<td class="number">35</td>
<td class="name">John F. Kennedy</td>
<td class="term">1961-1963</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat">
<td class="number">36</td>
<td class="name">Lyndon B. Johnson</td>
<td class="term">1963-1969</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican resigned">
<td class="number">37</td>
<td class="name">Richard M. Nixon</td>
<td class="term">1969-1974 (Resigned)</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">38</td>
<td class="name">Gerald R. Ford</td>
<td class="term">1974-1977</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat one-term">
<td class="number">39</td>
<td class="name">James Earl Carter</td>
<td class="term">1977-1981</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">40</td>
<td class="name">Ronald Reagan</td>
<td class="term">1981-1989</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican one-term">
<td class="number">41</td>
<td class="name">George Bush</td>
<td class="term">1989-1993</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat">
<td class="number">42</td>
<td class="name">William J. Clinton</td>
<td class="term">1993-2001</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president republican">
<td class="number">43</td>
<td class="name">George W. Bush</td>
<td class="term">2001-2009</td>
<td class="party">Republican</td>
<td class="selected"><input type="checkbox"></td>
</tr>
<tr class="president democrat">
<td class="number">44</td>
<td class="name">Barack H. Obama</td>
<td class="term">2009-</td>
<td class="party">Democrat</td>
<td class="selected"><input type="checkbox"></td>
</tr>
</tbody>
</table>
</body>
</html>
Raw
index.js
$(document).ready(function(){
console.log($('input[type=checkbox]'));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment