Edit on
<header class="group">
			<svg class="coderspace-logo" alt="CoderSpace logo" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600.000000 1200.000000" preserveAspectRatio="xMidYMid meet">
						<g transform="translate(0.000000,1200.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
									<path d="M7710 11619 c-1231 -87 -2357 -697 -3100 -1679 -724 -958 -1009
                  -2177 -784 -3355 248 -1299 1090 -2412 2272 -3004 1196 -599 2608 -599 3804 0
                  813 407 1488 1080 1893 1889 682 1361 590 2967 -243 4240 -357 547 -869 1029
                  -1436 1355 -726 416 -1577 612 -2406 554z m486 -619 c522 -32 974 -151 1419
                  -375 383 -191 683 -411 983 -719 286 -294 480 -569 662 -941 390 -795 471
                  -1709 229 -2575 -106 -378 -298 -781 -522 -1095 -236 -331 -524 -621 -852
                  -860 -897 -652 -2080 -850 -3157 -529 -378 113 -759 301 -1073 529 -398 290
                  -743 662 -990 1070 -87 144 -232 439 -288 590 -332 884 -307 1878 71 2742 292
                  668 817 1266 1447 1648 138 83 414 219 566 279 326 127 724 213 1089 235 185
                  12 239 12 416 1z"></path>
									<path d="M6140 9090 c-507 -90 -891 -436 -1035 -935 -59 -206 -60 -217 -60
                  -875 0 -590 1 -608 23 -718 78 -388 267 -686 555 -879 236 -158 465 -218 827
                  -217 231 0 334 13 508 60 506 137 811 518 878 1097 l6 57 -356 0 c-196 0 -356
                  -3 -356 -7 0 -42 -36 -207 -58 -270 -87 -247 -249 -366 -534 -392 -427 -39
                  -682 175 -774 649 -13 67 -17 176 -21 526 -7 641 10 796 116 1009 79 158 166
                  249 298 312 177 85 463 79 651 -13 170 -83 277 -266 316 -539 l12 -80 353 -3
                  354 -2 -6 60 c-19 181 -80 388 -159 543 -186 363 -486 560 -948 622 -153 21
                  -457 18 -590 -5z"></path>
									<path d="M9380 9104 c-413 -51 -746 -225 -931 -487 -102 -145 -143 -288 -143
                  -497 1 -214 37 -347 139 -500 141 -211 473 -405 965 -562 461 -147 588 -202
                  693 -298 100 -92 146 -215 134 -358 -16 -190 -133 -318 -347 -379 -100 -28
                  -433 -25 -545 5 -273 74 -414 234 -433 492 l-7 85 -356 3 -356 2 4 -77 c10
                  -177 62 -351 145 -490 49 -83 187 -223 286 -291 284 -194 626 -292 1022 -292
                  611 0 1073 229 1230 610 84 205 92 479 20 704 -43 132 -107 235 -209 336 -187
                  186 -455 323 -901 461 -306 94 -518 184 -630 268 -213 159 -191 480 43 634
                  107 71 221 98 409 98 199 0 330 -38 443 -128 98 -78 169 -215 181 -353 l7 -70
                  355 0 355 0 -6 83 c-13 181 -63 331 -157 474 -168 256 -448 433 -797 504 -90
                  18 -147 22 -343 24 -129 2 -251 1 -270 -1z"></path>
									<path d="M5120 2275 c0 -195 -2 -355 -5 -355 -2 0 -25 21 -50 46 -70 70 -140
                  98 -254 102 -301 12 -480 -183 -522 -567 -30 -275 32 -527 162 -659 95 -97
                  210 -138 366 -130 76 3 101 9 155 36 39 19 84 52 112 82 26 27 49 50 51 50 2
                  0 9 -34 16 -75 l12 -75 153 0 154 0 0 950 0 950 -175 0 -175 0 0 -355z m-113
                  -503 c22 -12 57 -40 77 -63 l36 -43 0 -276 0 -277 -29 -40 c-71 -98 -250 -121
                  -349 -46 -71 54 -102 160 -102 351 0 237 60 375 177 412 45 15 144 5 190 -18z"></path>
									<path d="M1825 2514 c-245 -54 -431 -241 -497 -500 -22 -83 -23 -109 -22 -404
                  0 -291 2 -321 22 -395 56 -205 170 -353 333 -434 108 -53 193 -71 347 -71 311
                  0 515 107 627 328 31 64 65 189 65 244 l0 38 -174 0 -174 0 -6 -45 c-20 -129
                  -75 -219 -162 -261 -49 -24 -74 -29 -154 -32 -79 -3 -105 0 -152 18 -71 26
                  -148 106 -176 183 -39 104 -44 159 -40 472 4 279 6 304 26 360 47 128 129 210
                  234 235 61 15 172 8 240 -15 91 -32 158 -128 181 -261 l11 -64 173 0 173 0 0
                  33 c0 19 -9 69 -20 113 -60 237 -206 388 -435 450 -87 23 -330 28 -420 8z"></path>
									<path d="M8478 2520 c-215 -39 -380 -147 -451 -297 -31 -65 -32 -73 -32 -188
                  1 -159 20 -212 114 -306 87 -86 211 -149 458 -233 265 -89 325 -122 364 -199
                  26 -50 29 -149 6 -193 -19 -36 -62 -77 -103 -97 -81 -41 -238 -43 -362 -5
                  -110 33 -182 131 -182 245 l0 33 -181 0 -181 0 6 -57 c22 -196 124 -335 310
                  -427 136 -67 208 -81 416 -81 146 0 199 4 250 18 273 74 414 253 397 502 -18
                  257 -161 387 -575 524 -271 91 -346 133 -378 216 -43 113 26 231 159 270 64
                  19 190 19 251 1 103 -31 170 -105 184 -203 l7 -48 178 -3 177 -2 0 23 c0 55
                  -22 136 -55 203 -64 131 -213 245 -380 290 -69 19 -323 28 -397 14z"></path>
									<path d="M3302 2050 c-102 -27 -166 -64 -242 -140 -77 -76 -131 -172 -162
                  -287 -30 -111 -30 -354 0 -464 63 -233 217 -390 427 -434 160 -34 369 -11 488
                  52 126 67 234 214 279 382 30 110 30 353 0 464 -62 227 -213 382 -423 432 -92
                  21 -275 19 -367 -5z m309 -278 c101 -53 149 -176 149 -384 -1 -289 -94 -420
                  -291 -406 -80 6 -121 27 -166 86 -50 66 -65 128 -70 288 -6 161 4 225 48 314
                  47 93 105 128 215 129 49 1 73 -5 115 -27z"></path>
									<path d="M6130 2054 c-87 -23 -157 -62 -223 -124 -74 -69 -128 -157 -164 -265
                  -23 -70 -27 -101 -31 -247 -5 -199 8 -276 70 -400 102 -203 290 -308 553 -308
                  123 0 197 10 295 42 80 25 180 77 180 92 0 13 -67 216 -73 222 -2 2 -39 -11
                  -83 -30 -103 -45 -183 -59 -291 -54 -131 6 -202 49 -258 158 -21 40 -46 136
                  -37 144 3 3 182 6 399 6 l393 0 0 139 c0 172 -18 272 -67 371 -64 132 -176
                  220 -325 255 -81 19 -265 18 -338 -1z m265 -273 c76 -35 115 -106 115 -207 l0
                  -54 -221 0 -222 0 7 42 c16 97 72 185 141 221 41 22 131 21 180 -2z"></path>
									<path d="M7585 2046 c-53 -24 -121 -91 -151 -147 l-18 -34 -7 50 c-4 28 -8 69
                  -8 93 l-1 42 -165 0 -165 0 0 -660 0 -660 175 0 175 0 0 450 0 450 43 44 c52
                  54 91 66 218 66 l95 0 18 156 c15 130 16 158 4 165 -7 5 -47 9 -88 9 -58 0
                  -86 -6 -125 -24z"></path>
									<path d="M10083 2056 c-59 -19 -103 -48 -156 -104 l-45 -49 -6 30 c-3 16 -6
                  42 -6 57 0 61 2 60 -171 60 l-159 0 0 -915 0 -915 175 0 175 0 0 316 0 317 46
                  -43 c74 -68 141 -94 260 -98 194 -8 325 58 426 212 82 127 121 346 100 563
                  -15 142 -33 215 -77 308 -90 189 -226 276 -429 274 -50 0 -110 -6 -133 -13z
                  m134 -281 c100 -50 143 -154 150 -366 9 -227 -33 -352 -137 -407 -39 -21 -55
                  -23 -125 -20 -91 5 -146 28 -189 78 l-26 32 0 291 0 292 31 38 c70 85 196 112
                  296 62z"></path>
									<path d="M11292 2050 c-195 -52 -331 -183 -351 -337 l-8 -53 177 0 177 0 7 38
                  c6 38 39 79 81 99 65 32 184 20 237 -25 44 -37 58 -79 58 -175 l0 -84 -177 -6
                  c-98 -3 -208 -13 -245 -21 -144 -32 -251 -105 -305 -208 -26 -50 -28 -61 -28
                  -178 0 -114 2 -130 26 -181 69 -146 208 -216 411 -207 82 3 104 8 161 37 37
                  17 90 55 118 82 28 28 52 49 53 47 1 -2 12 -36 24 -75 l23 -73 178 0 178 0
                  -25 83 c-25 80 -26 91 -32 497 -7 463 -9 471 -77 570 -45 65 -133 128 -225
                  160 -93 33 -331 39 -436 10z m378 -854 l0 -114 -46 -40 c-111 -99 -301 -97
                  -349 4 -32 67 -13 153 44 208 43 41 101 55 234 55 l117 1 0 -114z"></path>
									<path d="M12652 2050 c-158 -42 -262 -130 -337 -283 -57 -117 -75 -209 -75
                  -377 0 -214 38 -349 133 -475 62 -82 144 -141 242 -174 95 -32 289 -40 389
                  -17 207 49 369 215 384 393 l5 63 -167 0 -166 0 0 -25 c0 -36 -34 -98 -70
                  -128 -85 -72 -253 -60 -323 22 -106 127 -100 588 11 694 60 58 177 75 258 38
                  69 -32 124 -117 124 -195 l0 -26 166 0 167 0 -6 73 c-14 188 -128 335 -313
                  404 -60 23 -88 27 -209 30 -115 2 -153 0 -213 -17z"></path>
									<path d="M13970 2054 c-87 -23 -157 -62 -223 -124 -74 -69 -128 -157 -164
                  -265 -23 -70 -27 -101 -31 -247 -5 -199 8 -276 70 -400 102 -203 290 -308 553
                  -308 123 0 197 10 295 42 80 25 180 77 180 92 0 13 -67 216 -73 222 -2 2 -39
                  -11 -83 -30 -103 -45 -183 -59 -291 -54 -131 6 -202 49 -258 158 -21 40 -46
                  136 -37 144 3 3 182 6 399 6 l393 0 0 139 c0 172 -18 272 -67 371 -64 132
                  -176 220 -325 255 -81 19 -265 18 -338 -1z m265 -273 c76 -35 115 -106 115
                  -207 l0 -54 -221 0 -222 0 7 42 c16 97 72 185 141 221 41 22 131 21 180 -2z"></path>
						</g>
			</svg>
			<h1>Student Roster</h1>
			<nav>
						<div class="btn-group group" id="gender">
									<a href="#" id="gender-ladies">Ladies</a>
									<a href="#" id="gender-gents">Gents</a>
						</div>

						<div class="btn-group group" id="state">
									<a href="#" id="state-here">Still With Us</a>
									<a href="#" id="state-school">Back to School</a>
						</div>

						<div class="btn-group group" id="year">
									<a href="#" id="year-freshmen">Freshmen</a>
									<a href="#" id="year-sophomores">Sophomores</a>
									<a href="#" id="year-juniors">Juniors</a>
									<a href="#" id="year-seniors">Seniors</a>
									<a href="#" id="year-other">Other</a>
						</div>

						<div class="btn-group group" id="clear">
									<a href="#" id="clear-all">Clear</a>
						</div>
			</nav>
</header>

<section class="students group">

			<div class="studentInfo" data-gender="f" data-state="here" data-year="junior">
						<img src="https://coderspace.github.io/coderspace2/images/ameena.jpg">
						<p>Ameena</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/briana.jpg">
						<p>Briana</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/derek.jpg">
						<p>Derek</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/diamond.jpg">
						<p>Diamond</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="school" data-year="college">
						<img src="https://coderspace.github.io/coderspace2/images/pl.jpg">
						<p>Dominique</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="sophomore">
						<img src="https://coderspace.github.io/coderspace2/images/imani.jpg">
						<p>Imani</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="school" data-year="junior">
						<img src="https://coderspace.github.io/coderspace2/images/imari.jpg">
						<p>Imari</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="here" data-year="freshman">
						<img src="https://coderspace.github.io/coderspace2/images/meermeer.jpg">
						<p>Jameer</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="school" data-year="freshman">
						<img src="https://coderspace.github.io/coderspace2/images/jonathon.jpg">
						<p>Jonathan</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="school" data-year="sophomore">
						<img src="https://coderspace.github.io/coderspace2/images/baldridge.jpg">
						<p>Justin</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="here" data-year="junior">
						<img src="https://coderspace.github.io/coderspace2/images/pl.jpg">
						<p>Justin</p>
			</div>

			<div class="studentInfo" data-gender="m" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/mar.jpg">
						<p>Marquis</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="school" data-year="pre-freshman">
						<img src="https://coderspace.github.io/coderspace2/images/ny.jpg">
						<p>Nychia</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="sophomore">
						<img src="https://coderspace.github.io/coderspace2/images/samara.jpg">
						<p>Samara</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="junior">
						<img src="https://coderspace.github.io/coderspace2/images/serenity.jpg">
						<p>Serenity</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="senior">
						<img src="https://coderspace.github.io/coderspace2/images/siobhan.jpg">
						<p>Siobhan</p>
			</div>

			<div class="studentInfo" data-gender="f" data-state="here" data-year="sophomore">
						<img src="https://coderspace.github.io/coderspace2/images/me.jpg">
						<p>Whitney</p>
			</div>

</section>
.group:after {
  content: "";
  display: table;
  clear: both;
}

.hide {
  display: none;
}

body {
  font-family: sans-serif;
  width: 90%;
  margin: auto;
}

svg.coderspace-logo {
  width: 10em;
  position: relative;
  left: -0.3em;
  float: left;
}

h1 {
  margin: 10px 0;
  font-size: 2.5em;
  line-height: 3em;
}



/*NAV*/

nav {
  margin: 20px auto;
  padding: 20px;
  border: 5px solid #ddd;
}

div.btn-group:before{
    display: inline-block;
    min-width: 150px;
    float: left;
    margin-right: 15px;
    padding: 10px 0;
    font-weight: bold;
    text-align: right;
    content: " ";

}

div#gender:before {
    content: "Filter By Gender: ";
}

div#state:before {
    content: "Filter By Status: ";
}

div#year:before {
  content: "Filter By Year: ";
}

div#clear {
  margin-top: 30px;
}

a#clear-all {
  padding: 10px 30px;
  border-color: #888;
  color: #888;
}

a:hover#clear-all {
  border-color: #333;
  color: #fff;
  background-color: #888;
}

.btn-group {
  margin: 15px 0;
}

.btn-group a {
    cursor: pointer;
    padding: 10px 15px;
    border: 1px solid gray;
    margin: 0;
    text-decoration: none;
    float: left;
    color: black;
}

#gender a {
  background-color: rgba(102, 51, 153, 0.3);;
}

#gender a:hover {
  background-color: rgba(102, 51, 153, 0.5);;
}

#gender a.active {
  background-color: rgba(102, 51, 153, 0.9);;
}

#state a {
  background-color: rgba(74, 164, 228, 0.3);
}

#state a:hover {
  background-color: rgba(74, 164, 228, 0.5);
}

#state a.active {
  background-color: rgba(74, 164, 228, 0.9);
}

#year a {
  background-color: rgba(0, 136, 1, 0.3);
}

#year a:hover {
  background-color: rgba(0, 136, 1, 0.5);
}

#year a.active {
  background-color: rgba(0, 136, 1, 0.9);
}

.btn-group a:not(:first-child) {
    border-left: 0;
}

.btn-group a:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.btn-group a:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/*STUDENT INFO*/

.students {
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.studentInfo {
  text-align: center;
}

.studentInfo img {
  width: 250px;
  margin: 10px 10px 0;
}

.studentInfo p {
  margin-top: 10px;
  font-weight: bold;
}

@media (max-width: 815px) {
  nav {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  div.btn-group:before {
    width: 100%;
    text-align: left;
  }

}

@media (max-width: 600px) {
  svg.coderspace-logo {
    float: none;
    left: -0.6em;
  }

  h1 {
  line-height: normal;
  }
	
  .btn-group a {
    display: inline-block;
    margin: 5px 0;
    float: none;
    border-radius: 4px;
  }

  .btn-group a:not(:first-child) {
    border-left: 1px solid gray;
  }
	
}
// Make the GENDER buttons work

// Ladies


// -- Identify the button that needs to work
$('#gender-ladies')
// -- Identify what type of action will trigger button to work
.click(
// -- Write out the instructions for what happens when button is triggered:
function(event) {
// -- -- Turn off the default behavior: we don't want to go to the top of the page when the button is clicked
	event.preventDefault();
// -- -- Make the button active. Add the .active class
	$(this).addClass('active');
// -- -- -- Make the other button(s) not active
	$(this).siblings().removeClass('active');
// -- -- Show the students that match this button
	$('.studentInfo').filter('[data-gender="f"]').show();
// -- -- -- Hide the students that *don't* match this button
	$('.studentInfo').filter('[data-gender="m"]').hide();


// Close the function
}

// Close the .click method
);

// *** We can add and remove the .active and .hide classes, we can toggle those classes, or we can use show() and hide() methods




// Gents


// Make the STATUS buttons work

// Make the YEAR buttons work

// Make the CLEAR button work

$('#clear-all').click(function(event) {
	event.preventDefault();
	$('.btn-group a').removeClass('active');
	$('.studentInfo').show();
});


/*

NOTES:

-- Make sure these rules only apply when the HTML has fully loaded. The JavaScript won't be able to find elements that are not yet on the page.

-- Make sure that clicking the link doesn't return you to the top of the page.


PROCESS:

*** Discuss syntax and terms as you go

1.
*** Have students write psuedo code for one of each button group.
*** *** To shorten time, "we do" one Gender button, "you do" one Status/State button.

2.
*** Have students write code for one of each button group.
*** *** To shorten time, "we do" one Gender button, "you do" one Status/State button. Then students copy, paste and edit the code for other buttons.

3. 
*** Write code for notes above

4.
*** If there's time, "we do" Clear button psuedo code.

5.
*** Have students complete remaining code.

*/
Rerun