CSE 134B: Client-Side Web Languages

Summer 2017 | University of California, San Diego CSE Department

Homework #3 - SoundBoard with Basic JavaScript

It’s time to bring our Soundboard to life with JavaScript. This assignment is step one of a two part effort of building a very basic JavaScript app with best practices and mobility in-mind.

For Homework #3 we plan to implement JavaScript code to perform the following tasks:

  • Use DOM manipulation to generate the soundboard (images and buttons) from code as opposed to being hardcoded directly in HTML.
  • Generate the soundboard's HTML and potentially CSS using a template string, <template> tag or easily modifiable structure to avoid maintenance concerns. Do not generate the whole page dynamically that isn't required.
  • Have a pulldown menu to change the theme of the soundboard so the buttons, background, etc. visually change. Simple themes might be light / dark or high resolution / low resolution, and so on. You must have at least two themes for testing purposes that are significantly visually distinctive from each other. Note: The actual content does not need to change in that the sounds are the same.
  • Have a pulldown menu to change the content of the soundboard so the sounds and images are different. This means you will need at least one other set of sounds and images to test with.
  • Make a simple toggle button to display a compact form of the SoundBoard and a rich form of the application. Consider how a filesystem might have e list or icon view as an example of this.
  • Load the configuration of each version of the SoundBoard from a JSON packet. The JSON packet design will be yours but should contain the name of the soundboard, the list of sounds and images and any meta data you need to manage the board.
  • The JSON packet(s) must be fetched from a URL. You must use Ajax (XMLHttpRequest) object to do the communication in your vanilla version. If you like you can experiment with the Fetch API in other versions.
  • Provide reasonable error messages and other corrective measures and affordances like loader images in case network problems occur. You may need to use your throttle mechanism or even make purposeful mistakes to test this.
  • Address script not supported using a <noscript> tag with appropriate content so the page fails gracefully.
  • Use an error tracking service such as TrackJS to see how you might log errors that happen at run-time

Note: We will not be making a CRUD application at this point, so if you have login or related elements mocked up you may remove them now and replace them with the theme and format change controls.

The amount of code we need to write for this is fairly minimal and because of that what you write should not be sloppily written. Furthermore, we will perform the task twice to understand the pros and cons of various approaches we might take.

The example must be written two ways:

  1. Plain Vanilla JavaScript (ES5 or ES6 your choice) with no libraries
  2. Using one of the following libraries jQuery, Polymer or VueJS

Back to CSE134B


  • 25pts Vanilla JavaScript Version
  • 25pts Library Version
  • 10pts Write-up (readme.md) discussing your experiences with both version including time, file size and performance data you collect

Total: 60pts You may do more than one library version and receive 5pts per extra versopm. However, if you do this understand that we need to know what you consider your primary version to grade and what your extra credit versions are.

The assignment is due Sunday 7/30 @ noon. The TAs will provide grading logistics as necessary.