NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {upg dh|ds}
Creative Commons License Last modified: Sunday, 06-Aug-2017 22:15:48 UTC. Maintained by: Elisa E. Beshero-Bondar (eeb4 at Powered by firebellies.

This exercise will give you experience with:

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.