JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<body class="main">
    <a href="index.html"><header><h1>Peter Bernardi</h1><img src="#" /></header></a>
    <nav>
        <ul>
            <a href="about.html">
                <li>About</li>
            </a>
            <a href="portfolio.html">
                <li>Portfolio</li>
            </a>
            <a href="skills.html">
                <li>Skills</li>
            </a>
            <a href="resume.html">
                <li>R&eacute;sum&eacute;</li>
            </a>
            <a href="contact.html">
                <li>Contact</li>
            </a>
        </ul>
    </nav>
    <section>
    <h2>Welcome!</h2>
    <p>Hello! I am Peter Bernardi, freelance web developer and student at Indiana University. Please see the sidebar for the appropriate pages.</p>
    <p>Take a look around.</p>
    </section>   
    <footer>
        &copy; Peter Bernardi
        <button id="blue">Blue</button>
        <button id="red">Red</button>
        <button id="green">Green</button>
    </footer>
    <div id="testing"></div>
</body>

CSS

.li-blue {
    background:#0000FF;
}
.li-red {
    background:#FF0000;
}
.li-green {
    background:#00FF00;
}
.header-blue {
    background:#0000FF;
}
.header-red {
    background:#FF0000;
}
.header-green {
    background:#00FF00;
}
.footer-blue {
    background:#0000FF;
}
.footer-red {
    background:#FF0000;
}
.footer-green {
    background:#00FF00;
}

JavaScript

var elements = ['li', 'header', 'footer'];
for (i=0; i<elements.length; i++) {
    $(elements[i]).attr('class', ''+elements[i]+'-blue');
}
$('button').click(function() {
    var colour = $(this).attr('id');
    for (i=0; i<elements.length; i++) {
        $(elements[i]).attr('class', ''+elements[i]+'-'+colour+'');
    }
});