- I gathered all of the student info in a Google Spreadsheet.
- I used a CSV to JSON converter to create a JSON file of the student info.
- 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
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.