In order to truly understand the difference between traditional JavaScript and jQuery, I decided to re-write my Board Finder app (which is for for Ester and Jimmy who are looking to buy gear). In doing so, I found that it is easier and cleaner to manipulate the DOM using jQuery. Adding and removing HTML within element is quick and simple. Therefore, I proceeded to change all my interactions with the DOM to jQuery. The code is now cleaner and easier to understand. You can also easily use regular JavaScript code combined with jQuery code.  

Fetching JSON data using was also quite simple, 1 line of jQuery instead of 6 lines in JavaScript. I did struggle a little to find out how to assign a dataset from JSON to an array I can manipulate. I added a general grouping name called snowboards to my JSON file and I was able to assign this to a new array variable: var snowboard = data.snowboards;. I could then use snowboard[] wherever I needed. 

I then wanted to make the Board Finder table more interactive and sortable for Ester and Jimmy. I started to make a jQuery table sorter from scratch and in the process found a jQuery table sorting plugin (by Christian Bach and Rob G: https://mottie.github.io/tablesorter/) which is simply to use and efficient. Upload the plugin, link to the proper files in the HTML , assign the correct class name to the table to be sorted, and finally add a few lines of jQuery code to activate the table’s sorting features. It was easy, I would use this again.   

I also needed to add terms of use to my website, which was a further requirement in my original plan in unit 1. I found another useful jQuery plugin for this called jQuery Modal by (@kylefox: https://jquerymodal.com). All I needed to do is, upload the plugin files, link to these files in the HTML , create a new HTML file called termsofuse.html, and add an achor with rel=”modal:open” to my web page. A modal DIV displaying terms of use appears when the anchor is clicked. Once done, the user can click the X or press ESC to close the modal DIV. 

I enjoyed using jQuery and I will use it in future projects to manipulate the DOM and data when it is efficient to do so via the clients browser.   

You can view my changes for assignment 6 here: http://student.athabascau.ca/~michelde10/unit6/