Basic JavaScript DOM Manipulation Quiz

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/base/base-min.css">
<h1>Basic JavaScript DOM Manipulation Quiz</h1>
	<p>For this part of the test:</p>
	<ul>
		<li>Fork and then Code in the Javascript Panel</li>
		<li>Do your first iteration without the use of a library.</li>
        <li>Fork again and load jquery and repeast the exercise.</li>
		<li>Do not worry about usability/user experience.</li>
		<li>Your example will only be tested in Chrome.</li>
	</ul>
	<hr /><br />
	<p>The button below should toggle the color of the green and yellow boxes while not changing the orange ones.  Try to accomplish this in under 10 lines of code.</p>
	<input type="button" id="toggle_green_yellow" value="Toggle Yellow / Green" />
	<div id="top_row">
		<div class="box yellow">top1</div>
		<div class="box yellow">top2</div>
		<div class="box orange">top3</div>
		<div class="box yellow">top4</div>
		<div class="box yellow">top5</div>
		<div class="box yellow">top6</div>
		<div class="box yellow">top7</div>
		<div class="box yellow">top8</div>
		<div style="clear: both"></div>
	</div>
	<div id="bottom_row">
		<div class="box green">bottom1</div>
		<div class="box green">bottom2</div>
		<div class="box green">bottom3</div>
		<div class="box green">bottom4</div>
		<div class="box green">bottom5</div>
		<div class="box green">bottom6</div>
		<div class="box orange">bottom7</div>
		<div class="box green">bottom8</div>
		<div style="clear: both"></div>
	</div>
	<br /><hr /><br />
	<p>The form below needs to submit N number of IP addresses.  Use JavaScript to allow an infinite number of addresses to be added to the form; also allow for an address to be removed.  Do not worry about input validation.</p>
	<form action="" method="post">
		IP Address: <input type="text" name="addresses[]" /><br />
		IP Address: <input type="text" name="addresses[]" /> <a...

CSS

body { text-align: left; }
div.box {
		width: 75px;
		float: left;
		margin: 10px;
		text-align: center;
		padding: 20px;
	}
	div.yellow {
		background: yellow;
	}
	div.green {
		background: green;
	}
	div.orange {
		background: orange;
	}

JavaScript

document.getElementById('toggle_green_yellow').addEventListener('click', function() {
alert('yo');
	const yellows = document.querySelectorAll('.box.yellow');
  const greens = document.querySelectorAll('.box.green');
	yellows.forEach(item => {
  	item.classList.remove('yellow');
    item.classList.add('green');
    });
  greens.forEach(item => {
  	item.classList.remove('green');
    item.classList.add('yellow');
  });
});