Landing : Athabascau University

Group members: this is the place for your learning diary. Use this to post your zipped-up site at least once each unit, and your reflections as often as you wish (at least once per unit). Please write your reflections directly in the post, not as attached files. Where you do need to attach documents, such as for unit 1 designs, use PDF, PNG or JPG formats. You can attach files using the 'Embed content' link in the editor.

QUICK COURSE LINKS:  Add blog post - Read latest group postsFAQs: Course process : Site design : HTML : CSS : JavaScript : JQuery : AJAX : MiscPodcasts for each unit

Updated resource pages:  Unit 1 - Unit 2  - Unit 3Units 4 & 5 - Unit 6 - Unit 7

mportant notice: the student web server is unavailable. Until this is fixed, we do not require you to upload your site to the student server. See Running a web server on your local machine for details of how to meet the requirements for the final unit

Unit 6: JQuery Uses

  • Public
By Ben Dueck in the group COMP 266 March 9, 2024 - 11:57am

Here is my Learning Diary and ZIP file for Unit 6:

In this unit, I learned how to use JQuery libraries to add dynamic content to my website. The three implementations I went for were quite complex.

The most challenging one to add was an audio player. This used HTML, CSS, and JS vs JQuery to embed a good-looking interactive audio player. This was challenging because I had to hunt down and test out many different kinds of audio player plug-ins to find one that fit my sites style and goal. Eventually, I found one that looked good. But it was still hard to implement. I had to ensure the JS, CSS were in the right places and not interfering with my previous code. That took a while. Then I had to learn how the controls and settings work. For example, the player has an autoplay function that I wanted to turn off. Instead of added autoplay="false" I had to remove the autoplay text entirely. This makes sense but there were many of these small instances that added up to make this a challenge. This allows users to listen to my music on the site rather than click an external link.

The second feature I implemented was a "zoom while hovering" feature over the images in the shop. This allows users to view shop items in detail.

The final feature I implemented was a carousel photo slideshow. This allows users to get more information visually about my band and website vibe. Thank you for reading. I look forward to the last and final unit ahead! 

  Unit 6.zip