add exercise to turn on/off CSS themes with JS on practice page

[cfarm]

https://cfarm.github.io/gdi-intro-js/js101-downloads/practice.html

class2 event exercise

[cfarm]

exercise solution

// <link href="css/bootstrap.css" rel="stylesheet">

var button = document.getElementsByClassName('btn')[0];

function changeStylesheet(event) {
    var stylesheet = document.getElementsByTagName('link')[0];
    
    if (stylesheet.href == 'file:///path/to/js101-downloads%206/css/bootstrap.css') {
        stylesheet.href = 'css/bootstrap-386.css';
    } else if (stylesheet.href == 'file:///path/to/js101-downloads%206/css/bootstrap-386.css') {
        stylesheet.href = 'css/geo-bootstrap.css'
    } else {
        stylesheet.href = 'css/bootstrap.css';        
    }

    console.log(stylesheet.href);
}

function changeHeadline(event) {
    var headline = document.getElementById('headline');
    var stylesheetPath = document.getElementsByTagName('link')[0].href;
    headline.innerHTML = 'changed stylesheet to ' + stylesheetPath;
    console.log(headline);
}

// button.onclick = changeStylesheet;
// button.onclick = changeHeadline;

button.addEventListener('click', changeStylesheet);
button.addEventListener('click', changeHeadline);

[cfarm]

use in Events lesson and reduce dom style attributes exercises/slides