Fun with Buttons

To give the CoderSpace students an introduction to JavaScript and jQuery, I built a class roster site that would let them filter students by characteristics such as team or year in school. You can see the full collection on CodePen.

I’d just taken an AJAX and JSON class with Girl Develop It, so I decided to use JavaScript to build the page rather than building it myself:

  1. I gathered all of the student info in a Google Spreadsheet.
  2. I used a CSV to JSON converter to create a JSON file of the student info.
  3. I created JS, CSS and HTML files locally and used the jQuery ajax() function to write out the <div>s for each student.

From here, I took the finished HTML and my CSS and added that to CodePen.

The students would be expected to fork the pen and write jQuery to make the buttons work:

Step 1 – HTML and CSS

After forking a pen with no JavaScript/jQuery, the students would write pseudo code for each step. I created an example pen as an outline for myself:

Step 2 – Pseudo Code

Next, the students would walk through writing jQuery for only one gender button and the Clear button:

Step 2.5 – Write Code for First Buttons

Lastly, after walking through some code as a class, the students would continue working on the remaining buttons:

Step 3 – Remaining Buttons

To make the student roster responsive, I rearrange and change styles for the buttons at different viewport widths, and the student images are arranged using flexbox.