Dynamic UI with jQuery

This is a step-by-step guide to completing the Dynamic UI with jQuery part of the Dynamic Project. It also covers Setup

[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.
2. Clone Repo to Your Local Computer
   1. In the GitHub Repo: Click the green Code button.
   2. Copy the link
   3. Open VS Code
   4. Open a New Window
   5. Click the Clone Git Repository link
   6. paste in the link
   7. Click Open to open the cloned Repository
3. Install and test node
   1. Open Terminal
   2. Type: npm install
      1. it should run through installing and make node-modules folder
   3. Type: npm start
      1. The site should build and you should get a link to see it in the browser
   4. Use the link from the terminal to open it in a browser
      1. Remember the link is something like: http://localhost:8080/

[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 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 filer code and one to end the document.ready
4. edit the code to change the data- attribute
   1. There are two places in the code that refer to data-type. In our buttons we use data-borough.
   2. You can either manually or use find and replace to change the data-type to data-borough.
5. 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-borough attribute and make the value {{img.borough}} to read in the borough from the yaml file. It should look like this:
      
6. Test out the buttons.

Everything should be working now.