Unit 4: Basic Dynamic Sites

Given that this course has CS pre-requisites, we’re assuming you’re comfortable with progamming basics such as variables, loops, and functions. If you’d like to review some programming basics within the context of JavaScript, you may refer to the material below:

Unit Essential Questions

You should use the questions below to assess your own learning and understanding of course material. These questions are also a good method of organization if you’re taking notes.

JavaScript

  • How can I use JavaScript to modify websites?
  • How can I use JavaScript to make sites interactive?
  • What are event handlers and how are they used?
  • How do I ensure the addition of JavaScript doesn’t negatively impact the accessibility of my site?

jQuery [optional]

  • What’s the difference between JavaScript (JS) and jQuery (JQ)?
  • How does the syntax of JQ differ from that of JS?
  • What are JQ pseudo-selectors and how do they work?
  • How do event handlers work in JQ?
  • How do animations work in JQ?

Unit Readings

JavaScript

Check your understanding

This optional exercise will have you practice with JavaScript before you start working on your assignment. Complete the three functions for this fish site JSFiddle.

Make sure you don’t change anything in the HTML or CSS! You only need to add code to the JavaScript box– there are 3 functions you need to complete, each associated with one of the three buttons on the fish site.

Note: JSFiddle is a ‘coding playground’ that automatically links the HTML, CSS, and JS windows together so you don’t have to. It’s great for small code examples and similar to CodePen and many other ‘coding playgrounds’

jQuery [optional]

While not required, you will likely encounter jQuery syntax in the wild (especially on older BootStrap tutorials/videos) so it’s helpful to at least be familiar with its syntax. Additionally, jQuery offers some nice built-in functions that in JavaScript would require your own manual implementation, so it’s really useful for minimizing programming effort.

Check your understanding

This optional exercise will have you practice with jQuery before you start working on your assignment. Complete the three functions for this fish site JSFiddle.

Make sure you don’t change anything in the HTML or CSS! You only need to add code to the JavaScript box– there are 3 functions you need to complete, each associated with one of the three buttons on the fish site. Make sure to use jQuery rather than JavaScript to complete these functions.

Unit Lab

This assignment will have you practice using JavaScript to make your sites interactive. Make sure to refer to the unit readings for helpful reference material as well as additional resources.

Description

Choose 2 interactive features to add to your site. You may come up with your own or choose from some of the options below:

  • Add a Font Size Adjuster that allows users to increase and decrease the size of the font on your site
  • Add a Font Type Adjuster that allows users to change the font on your site (e.g., serif, sans-serif)
  • Add a Theme Switcher that allows users to change the color schemes on your site (e.g., light mode, dark mode, high contrast mode)
  • Add some effects for your images (e.g., enlarging on click, caption on hover)

Of course, it’s imperative that we ensure our site continues to be accessible as we add new/more features and change our code. Perform some basic accessibility testing using your browsers’ built-in dev tools (refer to Unit 2 readings as needed) and any of our posted accessibility testing resources.

At a minimum, your site should:

  • Be keyboard-only navigable including:
    1. All buttons, links, and inputs are can be selected (reached) without a mouse (i.e., via tabbing)
    2. Any element currently selected (in-focus) is perceivably different (e.g., underlined or boxed)
    3. All buttons, links, and inputs are can be activated (clicked) without a mouse
    4. There are no ‘keyboard traps’
  • Be screen-reader friendly including
    1. Headings are used logically and with no skipped heading numbers
    2. All pages have accurate page titles and metadata 1. Code makes appropriate use of semantic HTML including use of <nav> and <main>, and others as applicable 1. <div>s and <span>s are used sparingly and only where semantic HTML wouldn’t make sense
    3. All images have appropriate alt text
  • Have sufficient contrast (applicable to all themes if that’s one of the features you choose)
  • Have an option to enable and disable any automatic animations
  • Is usable with up to 400% magnification
  • Is usable with stylesheets disabled
  • Is usable with images disabled
  • Is usable with JavaScript disabled
  • Is usable across various browsers
  • Is usable across various devices of various sizes

If you have any questions about what the above entail, please first refer to our posted accessibility resources– the General Tips section might be of particular use.

Additionally, you’ll be submitting your code for review this week so please make sure your code is free of errors and that your site is complete.

Recorded Lecture

The lecture below provides additional information on integrating JavaScript and jQuery into a site which you may find particularly useful for completing your assignment. However, if you feel comfortable with the material already, you may choose to skip watching this lecture. Copies of the completed JS and JQ code are available for download (you might have to right-click to save/download): Code using JS | Code using JQ .

What to Submit

Create a short README text document in your site’s root folder describing the interactive features you chose to implement and what their expected behaviour is. Zip/Compress this root folder, ensuring your site works as expeceted from the files in that folder alone, and submit it. Remember all submissions are done through Canvas.

Requirements

Submission

  1. Site runs from files in zipped/compressed folder
  2. All links and images work
  3. Folder includes a README describing the interactive features implemented and their expected behaviour

Design and User Experience

  1. Site has a good, cohesive design
  2. Site is responsive and mobile-friendly including:
    • Is usable across various browsers
    • Is usable across various devices of various sizes
  3. Site is dynamic: at least two interactive features are implemented and behave as expected/described
  4. Site is accessible. At a minimum, site:
    1. Is keyboard-only navigable including:
      1. All buttons, links, and inputs are can be selected (reached) without a mouse (i.e., via tabbing)
      2. Any element currently selected (in-focus) is perceivably different (e.g., underlined or boxed)
      3. All buttons, links, and inputs are can be activated (clicked) without a mouse
      4. There are no ‘keyboard traps’
    2. Is screen-reader friendly including:
      1. Headings are used logically and with no skipped heading numbers
      2. All pages have accurate page titles and metadata 1. Code makes appropriate use of semantic HTML including use of <nav> and <main>, and others as applicable 1. <div>s and <span>s are used sparingly and only where semantic HTML wouldn’t make sense
      3. All images have appropriate alt text
    3. Has sufficient contrast (applicable to all themes if that’s one of the features implemented)
    4. Has an option to enable and disable any automatic animations
    5. Is usable with up to 400% magnification
    6. Is usable with stylesheets disabled
    7. Is usable with images disabled
    8. Is usable with JavaScript disabled

Programming

  1. HTML and CSS are free of syntax errors
  2. JS (and JQ, if used) is free of syntax errors
  3. JS (and JQ, if used) is used appropriately and efficiently
  4. Browser console gives no errors
  5. Browser console gives no warnings

Organization

  1. CSS is in external stylesheet
  2. JS is in external script
  3. JQ, if used, is in external script
  4. Images are in their own folder
  5. Scripts are in their own folder

Additional Resources

JavaScript

Accessible JavaScript

jQuery

results matching ""

    No results matching ""