clhenrick/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Loop over DOM elements</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

        <style type="text/css">

            section#container {
                position: relative;
                top: 200px;
                border: none;
            }

            div {
                width: 200px;
                height: 100px;
                border: 1px solid black;
                margin: 30px auto;
            }

            div p {
                position: relative;
                text-align: center;
                font-weight: 600;
                letter-spacing: 3px;
                top: 25px;
            }

            button {
                display: block;
                margin: 20px auto 10px auto;
                width: 75px;
            }

            .inactive {
                display: none;
                background-color: hsla(0, 0%, 0%, 0.2);
            }

            .active {
                background-color: hsla(0, 50%, 80%, 0.6);
            }

        </style>
    </head>
    <body>

        <section id="container">
            <div id="div1" class="active"><p>Hey</p></div>
            <div id="div2" class="inactive"><p>How's</p></div>
            <div id="div3" class="inactive"><p>it</p></div>
            <div id="div4" class="inactive"><p>going</p></div>
            <div id="div5" class="inactive"><p>?</p></div>
            <div id="div6" class="inactive"><p>!</p></div>

            <!-- using the html5 button element -->
            <button class="iterate">Next One</button>
            <button class="shuffle">Shuffle</button>
        </section>

        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                // DOM ready, run it!

                // create a list of div elements using regular JS
                var divs = document.querySelectorAll('div');

                // our JQuery for the Next One button interaction
                $('.iterate').on('click', function(e){
                    e.preventDefault();

                    // variable to store the index of the active div
                    var activeDiv;

                    // loop over the div elements to find the one with the class active
                    for (var i=0; i<divs.length; i++) {
                        if (divs[i].className==="active") {
                            // assign activDiv the index number
                            activeDiv = i;
                        }
                    }

                    // set our div that was active to inactive
                    divs[activeDiv].className = "inactive";

                    // if the activeDiv count is too big
                    if (activeDiv > divs.length-2) {
                        // make the first one in the list active
                        divs[0].className="active";
                    } else {
                      // else make the next div in the list active
                      divs[activeDiv+1].className = "active";
                    }

                });

                // our JQuery for the Shuffle button interaction
                $('.shuffle').on('click', function(e) {
                    e.preventDefault();
                    // shuffles our list of divs
                    divs=_.shuffle(divs);
                });

            }, false);

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Loop over DOM elements</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

	<style type="text/css">

	section#container {
	position: relative;
	top: 200px;
	border: none;
	}

	div {
	width: 200px;
	height: 100px;
	border: 1px solid black;
	margin: 30px auto;
	}

	div p {
	position: relative;
	text-align: center;
	font-weight: 600;
	letter-spacing: 3px;
	top: 25px;
	}

	button {
	display: block;
	margin: 20px auto 10px auto;
	width: 75px;
	}

	.inactive {
	display: none;
	background-color: hsla(0, 0%, 0%, 0.2);
	}

	.active {
	background-color: hsla(0, 50%, 80%, 0.6);
	}

	</style>
	</head>
	<body>

	<section id="container">
	<div id="div1" class="active"><p>Hey</p></div>
	<div id="div2" class="inactive"><p>How's</p></div>
	<div id="div3" class="inactive"><p>it</p></div>
	<div id="div4" class="inactive"><p>going</p></div>
	<div id="div5" class="inactive"><p>?</p></div>
	<div id="div6" class="inactive"><p>!</p></div>

	<!-- using the html5 button element -->
	<button class="iterate">Next One</button>
	<button class="shuffle">Shuffle</button>
	</section>

	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function() {
	// DOM ready, run it!

	// create a list of div elements using regular JS
	var divs = document.querySelectorAll('div');

	// our JQuery for the Next One button interaction
	$('.iterate').on('click', function(e){
	e.preventDefault();

	// variable to store the index of the active div
	var activeDiv;

	// loop over the div elements to find the one with the class active
	for (var i=0; i<divs.length; i++) {
	if (divs[i].className==="active") {
	// assign activDiv the index number
	activeDiv = i;
	}
	}

	// set our div that was active to inactive
	divs[activeDiv].className = "inactive";

	// if the activeDiv count is too big
	if (activeDiv > divs.length-2) {
	// make the first one in the list active
	divs[0].className="active";
	} else {
	// else make the next div in the list active
	divs[activeDiv+1].className = "active";
	}

	});

	// our JQuery for the Shuffle button interaction
	$('.shuffle').on('click', function(e) {
	e.preventDefault();
	// shuffles our list of divs
	divs=_.shuffle(divs);
	});

	}, false);

	</script>
	</body>
	</html>