Last modified: Sunday, 06-Aug-2017 22:15:48 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at psu.edu). Powered by firebellies.

JavaScript Exercise 2

This exercise will give you experience with:

coordinating JavaScript with HTML and CSS,
writing a separate JavaScript file (as well as a separate CSS file) that you associate with your HTML in its <head> element,
and working with an adaptable JavaScript function called classList(), in conjunction with the adaptable HTML <span class=""> code and CSS styling of span.whateverClassNameYouLike.

For this assignment, we would like you to write JavaScript that you adapt to an HTML file that is either part of your project or related in some way to your project development. Prepare an HTML file that uses <span class=""> code in some way useful to you, and work with styling it for toggling in some way. You may wish to create buttons to press in your HTML, or a series of checkboxes, or some other way that makes sense to you to invite users to do something on click, or on some mouse event. (In our work, we have typically used the HTML <fieldset> with checkboxes, which is what is featured in the tutorial connected with this assignment.) Read more about HTML input elements at w3schools here.

Before you begin (and as you are coding), read and apply Elisa's tutorial, "JavaScript toggling with classList and switch," which walks you through how to integrate the three kinds of code for users to toggle effects on code you have tagged with <span class="whateverClassNameYouLikeHere">. Elisa prepared this tutorial for Obdurodon based on her work on JavaScript for the Pacific Project, and we would like you to try your hand at applying and adapting it to your own projects, since classList() can coordinate effectively with many JavaScript events (changing colors, showing or hiding content, etc).

Your assignment is to apply the guidance in the tutorial: Write a separate JavaScript file that activates toggling on some kind of mouse event in your HTML <span class=""> elements, by adding (and removing) a CSS class (usually "on"). Your CSS code should accommodate spans with the additional class and spans without that class so it is clear what display you want to see when an effect is toggled on or off.

What to submit on Courseweb: your HTML file, your JavaScript file, and your CSS file.