Dynamic UI with jQuery

This is a step-by-step guide to using jQuery in a project. We will use

[0] Setup

1. Create GitHub Repo from Template
   1. Go to the Github Template
   2. Click the green Use this Template button.
   3. Go through the steps to finish creating your version of the repository.
   4. Remember the name you gave the repository.
2. Open the Repository in GitPod.

If you would like to use VS Code on your local computer, read this version of the instructions from a prior semester.

[1] Get JavaScript Ready

1. Add jQuery
   1. Go to jQuery CDN: https://code.jquery.com/
   2. Click on the minified link under jQuery 3.x
   3. Copy the script tag by clicking the blue file icon
   4. Paste the copied code into the src > _includes > base.njk file just before the closing </body> tag (around line 38).
2. Add a link to main.js
   1. Add a new blank line right after the code you just pasted
   2. add a script element with the src attribute of: src=”/js/main.js”

[2] Get Accordion Working

1. Go to my Accordion example Codepen
2. Copy the code in the JavaScript part
3. Paste this into the main.js file in the js folder
4. Test the Accordion
   1. If you stopped the server type npm start in the terminal again and open the browser
   2. click the accordion to see if its working

[3] Get the Filter Buttons Working

1. Go to my Filter Buttons Example Codepen
2. Copy the JavaScript inside of the $(document).ready(). Lines 3–33. You already have a document ready from the accordion.
3. Paste this into main.js making sure it is doesn’t go inside of the Accordion code but is inside of the $(document).ready() in main.js.
   1. There should be two lines that look the same at the end:
   2. one is to end the filter code and one to end the document.ready
4. Add a data attribute to the cards
   1. open image-card.njk in the includes folder
   2. in the opening div element, add a data-type attribute and make the value {{img.borough}} to read in the borough from the yaml file. It should look like this:
      “>
      
5. Test out the buttons.

Everything should be working now.