Build Random Name or Choice Giveaway Winner Picker From List Tool in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

index.html

 

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="reminder">Bookmark <a href="https://bit.ly/random-picker">bit.ly/random-picker</a> for quick access</div>
<div class="container">
        <div class="page-header">
            <h1>Random Picker</h1>
        </div>
        <p class="lead">Enter random choices.  Get your winner.</p>
        <main>
            <div class="row">
                <div class="col-xs-12 col-md-5">
                    <h2>Enter choices</h2>
                    <p>Enter each value on a new line.  Blank lines will be ignored.</p>
                    <textarea id="values" class="form-control" rows="15"></textarea>
                </div>
                <div class="col-xs-12 col-md-5 col-md-offset-2">
                    <h2>Your Winner:</h2>
                    <p id="instructions"><span class="label label-warning">You have to enter some values first!</span></p>
                    <div id="results"></div>
                    <div id="chooser" class="text-center">
                        <hr>
                        <button type="button" class="btn btn-success btn-lg">Pick Winner</button>
                    </div>
                </div>
            </div>
            <br>
            <p class="text-center text-muted">Drawing, giveaway, random generation - nothing can be easier than just pressing the button!</p>
        </main>
    </div>
    <footer>
        <div class="container">
            <p class="text-center"><a href="http://aaronsaray.com" title="A Milwaukee-based PHP Programmer">Aaron Saray</a> created this project - especially for <a href="http://mkepug.org">Milwaukee PHP Users Group</a>.</p>
        </div>
    </footer>

 

 

style.css

 

 

html {
    position: relative;
    min-height: 100%;
}
body {
    margin-bottom: 28px;
}
footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 28px;
    background-color: #444444;
    color: #eeeeee;
    font-size: 12px;
}
footer p {
    line-height: 28px;
    margin: 0;
}
footer a {
    color: #ffffff;
    border-bottom: 1px dotted #aaaaaa;
}
footer a:hover {
    text-decoration: none;
    border-bottom-color: #ffffff;
    color: #afd9ff;
}

#results {
    border: 1px solid #cccccc;
    border-radius: 5px;
    height: 80px;
    padding: 20px;
    display: none;
    text-align: center;
    font-size: 30px;
    overflow: hidden;
}
#results ul {
    margin: 50px 0 0 0;
    padding: 0;
    list-style: none;
}
#results li {
    margin-top: 20px;
}

#chooser {
    margin-top: 20px;
    display: none;
}
#reminder {
  float: right;
  padding: 0.2rem 0.5rem;
  font-weight: bold
}

 

 

script.js

 

 

(function(){

    /**
     * The class to manage the random generator
     * @constructor
     */
    var RandomManager = function() {
        /**
         * Initialize the values box
         * @type {*|jQuery|HTMLElement}
         */
        var $valuesBox = $('#values');

        /**
         * The instructions for the tool
         * @type {*|jQuery|HTMLElement}
         */
        var $instructions = $('#instructions');

        /**
         * The chooser box
         * @type {*|jQuery|HTMLElement}
         */
        var $chooserBox = $('#chooser');

        /**
         * The results box
         * @type {*|jQuery|HTMLElement}
         */
        var $resultBox = $('#results');

        /**
         * The initialization function sort of
         *
         * This handles adding all the handlers the DOM items
         */
        function addHandlers()
        {
            $valuesBox.on('change keyup blur', handleBoxChange);
            $chooserBox.on('click', 'button', chooseWinner);
        }

        /**
         * When the textarea changes, handle it
         */
        function handleBoxChange()
        {
            if ($valuesBox.val().trim() === '') {
                $resultBox.fadeOut(200).empty();
                $chooserBox.fadeOut(200, function() {
                    $instructions.fadeIn(200);
                });
            }
            else {
                $instructions.fadeOut(200, function() {
                    $chooserBox.fadeIn(200);
                });
            }
        }

        /**
         * Iterates through the winner and chooses
         */
        function chooseWinner()
        {
            var values = $valuesBox.val().trim().split("\n");
            if (values.length == 1) {
                handleOneWinner(values);
            }
            else {
                var chopIt = false;
                // if it's too small, let's add some more to it for a cool look
                if (values.length < 20) {
                    values.push.apply(values, values);
                }
                else if (values.length > 50) {
                    chopIt = true;
                }
                shuffleValues(values);
                if (chopIt) {
                    // if it's too long, the animation will suck!
                    values = values.slice(0, 50);
                }

                animateResults(values);
            }
        }

        /**
         * Show the results in an animated fashion
         * @param values
         */
        function animateResults(values)
        {
            $resultBox.show();
            $resultBox[0].scrollTop = 0;
            $resultBox.empty();

            var resultList = $('<ul />');
            $.each(values, function(i, value) {
                var li = document.createElement('li');
                li.appendChild(document.createTextNode(value));
                resultList.append(li);
            });

            $resultBox.append(resultList);

            $resultBox.animate({
                scrollTop: $resultBox[0].scrollHeight
            });
        }

        /**
         * Shuffle the values
         * @param values
         */
        function shuffleValues(values)
        {
            for (var i = values.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = values[i];
                values[i] = values[j];
                values[j] = temp;
            }
        }

        /**
         * When people are being silly and choose only one entry
         */
        function handleOneWinner(values)
        {
            var winner = values[0];
            $('main').html('<div class="jumbotron"><h1>Congratulations!</h1><h2>There is only one winner!</h2><p>You know exactly who it was!!</p>');
        }

        // init the logic
        addHandlers();
    };

    // create the object - it's self managed
    new RandomManager();
})();

Leave a Reply