01. Functions And Function Expressions

01. Create a module for working with DOM. The module
should have the following functionality
– Add DOM element to parent element given by selector
– Remove element from the DOM by given selector
– Attach event to given selector by given event type and event handler
– Add elements to buffer, which appends them to the DOM when their count for some selector becomes 100
– The buffer contains elements for each selector it gets
– Get elements by CSS selector
– The module should reveal only the methods

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="styles/style.css"/>
</head>
<body>
    <div id="container">#container</div>

    <form>
        <label for="parent-id">Add child to: </label>
        <input type="text" id="parent-id" placeholder="Parent ID ..."/>
        <input type="button" id="add-btn" value="Add"/>
        <input type="button" id="add-multiple-elements-btn" value="Add 100"/> <br/>

        <label for="element-id">Remove element: </label>
        <input type="text" id="element-id" placeholder="Element ID ..."/>
        <input type="button" id="remove-btn" value="Remove"/>
    </form>


    <script type="text/javascript" src="scripts/libs/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="scripts/Modules/GlobalVariables.js"></script>
    <script type="text/javascript" src="scripts/Modules/DomModule.js"></script>
    <script type="text/javascript" src="scripts/events.js"></script>
</body>
</html>

scripts/events.js

(function() {
    $('#add-btn').on('click', function() {
        var parentID = $('#parent-id').val();
        DomModule.appendElementToParent(parentID);
    });

    $('#remove-btn').on('click', function() {
        var elementID = $('#element-id').val();
        DomModule.removeElement(elementID);
    });

    $('#add-multiple-elements-btn').on('click', function() {
        var parentID = $('#parent-id').val();
        DomModule.addMultipleElements(100, parentID);
    });
}());

scripts/Modules/GlobalVariables.js

var GlobalVariables = (function() {
    var $container = $('#container'),
        elementsID = [$container.attr('id')];

    return {
        $container: $container,
        elementsID: elementsID,
        childCounter: 1
    };
}());

scripts/Modules/DomModule.js

var DomModule = (function() {
    function appendElementToParent(parentID) {
        if (isIDValid(parentID)) {
            var $child = createElement(parentID);
            $('#' + parentID).append($child);
        }
        else {
            alert('Invalid ID!');
        }
    }

    function removeElement(elementID) {
        if (isIDValid(elementID)) {
            $('html').find('#' + elementID).remove();
            removeIDFromArray(elementID);
        }
        else {
            alert('Invalid ID!');
        }
    }

    function createElement(parentID) {
        var $element = $('&lt;div/&gt;')
            .html('#' + parentID.toString() + ' -&gt; #child-' + GlobalVariables.childCounter.toString())
            .attr('id', 'child-' + GlobalVariables.childCounter.toString())
            .css('background-color', getRandomColor().toString())
            .on('click', function() {
                console.log('Element: ' + $(this).attr('id'));
            });

        GlobalVariables.elementsID.push($element.attr('id'));
        GlobalVariables.childCounter += 1;
        return $element;
    }

    function addMultipleElements(numberOfElements, parentID) {
        if (isIDValid(parentID)) {
            var documentFragment  = document.createDocumentFragment();

            for (var i = 1; i &lt;= numberOfElements; i++) {
                $(documentFragment).append(createElement(parentID));
            }

            $('#' + parentID).append(documentFragment);
        }
        else {
            alert('Invalid ID!');
        }
    }

    function getRandomColor () {
        var SYMBOLS_IN_COLOR = 6,
            symbols = '0123456789ABCDEF'.split(''),
            color = '#',
            i;

        for (i = 1; i &lt;= SYMBOLS_IN_COLOR; i += 1 ) {
            color += symbols[Math.floor(Math.random() * 16)];
        }

        return color;
    }

    function isIDValid(ID) {
        if (GlobalVariables.elementsID.indexOf(ID) !== -1) {
            return true;
        }

        return false;
    }

    function removeIDFromArray(ID) {
         GlobalVariables.elementsID.splice(GlobalVariables.elementsID.indexOf(ID), 1);
    }

    return {
        appendElementToParent: appendElementToParent,
        removeElement: removeElement,
        addMultipleElements: addMultipleElements
    };
}());

02. Create a module that works with moving div nodes.
Implement functionality for:
– Add new moving div element to the DOM
– The module should generate random background, font and
border colors for the div element
– All the div elements are with the same width and height
– The movements of the div nodes can be either circular or
rectangular
– The elements should be moving all the time

<strong>index.html</strong>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #add-div-btn {
            float: right;
            margin-top: 500px;
            margin-right: 350px;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="scripts/libs/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="scripts/Module.js"></script>
    <script type="text/javascript">
        Module.initializeDivElements(10);
    </script>
</body>
</html>

scripts/Module.js

var Module = (function() {
    var $container, animationFrame;

    function initializeDivElements(numberOfElements) {
        $container = $('<div/>')
            .css('position', 'absolute')
            .css('left', 600 + 'px')
            .css('top', 300 + 'px');

        for (var i = 1; i <= numberOfElements; i += 1) {
            $container.append(createElement());
        }

        $('body').append($container);
        moveDivs($container);
    }

    function createElement() {
        var $div = $('<div/>')
            .html('div')
            .css('position', 'absolute')
            .css('width', 50 + 'px')
            .css('height', 50 + 'px')
            .css('border', 5 + 'px solid ' + getRandomColor())
            .css('background-color', getRandomColor())
            .css('border-radius', 30 + 'px')
            .css('text-align', 'center')
            .css('font-family', getRandomFontFamily());

        return $div;
    }

    function moveDivs($container) {
        var angle = 0,
            width = 200,
            height = 200,
            step = 2 * Math.PI / $container.children().length,
            x = null,
            y = null;

        animationFrame = setInterval(function() {
            for (var i = 0; i < $container.children().length; i++) {
                x = Math.cos(angle + (i * step)) * width;
                y = Math.sin(angle + (i * step)) * height;
                $container.children().eq(i).css('left', x + 'px');
                $container.children().eq(i).css('top', y + 'px');
            }
            angle += 0.05;
        }, 20);
    }

    function getRandomColor () {
        var SYMBOLS_IN_COLOR = 6,
            symbols = '0123456789ABCDEF'.split(''),
            color = '#',
            i;

        for (i = 1; i <= SYMBOLS_IN_COLOR; i += 1 ) {
            color += symbols[Math.floor(Math.random() * 16)];
        }

        return color;
    }

    function getRandomFontFamily() {
        var fontFamilies = ['Consolas', 'Tahoma', 'Verdana', 'Times New Roman', 'Arial'];
        return fontFamilies[Math.floor(Math.random() * fontFamilies.length)];
    }

    return {
        initializeDivElements: initializeDivElements
    };
}());
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s