mfa dt bootcamp web: iterate over divs example 2 with _.shuffle

<!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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://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>
            
            
            <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>

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js