JSFiddle - React, Tailwind, and code Playground

by tankchintan

HTML

<div id="outer-box">
    <div id="inner-box">
	</div>        
</div>

<button type="button" id="animate-btn">Let's Animate!</button>

CSS

#inner-box,	
#outer-box {
    position: relative;
}

#animate-btn {
    width: 400px;
    font-size: 41px;
    line-height: 46px;
}

JavaScript

//Setting up the app & caching elements for repeat use
var PAGE_APP = {
    dom: {
        animateButton: document.getElementById("animate-btn")
    },
    animate: {
        //Providing defaults in case user does not provide or submitted values are invalid
        defaults: {
            duration: 300,
            outerBox: {
                dom: document.getElementById("outer-box"),
                dimension: {
                    width: 400,
                    height: 400
                },
                backgroundColor: "#0F9ECE"
            },
            innerBox: {
                dom: document.getElementById("inner-box"),
                dimension: {
                    width: 150,
                    height: 150
                },
                backgroundColor: "#DFF0D8"
            }
        },
        //Stores the options which will be used in animation
        options: { },
        
        //Stores status info on the curret state of the box that is being animated
        current: {
            timeSpent: 0,
            intervalObj: null,
            position: {
                top: 0.0,
                left: 0.0
            },
            increment: {
                top: 0.0,
                left: 0.0
            }
        }
    },
    
    //Takes care of setting up options including validation of user's input
    init: function(options) {
        var self = PAGE_APP;
        
        for (var key in options) {
            self.animate.options[key] = options[key];
        }
        
        for (var key in self.animate.defaults) {
            
            if (self.animate.options[key] === undefined) {
                self.animate.options[key] = self.animate.defaults[key];
            }
        }
        
        //If optipons provided are not valid then it fallbacks on default for that particular box
        self._validateAndResetOptions();
        
        self._initBox("outerBox");
        self._initBox("innerBox");
       ...