JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<body>
    <h1 id="first">Say what again mother fucker say what one more god damn time!</h1>
    <p id="second">dodge this bitch</p>
    <p><a id="linker" href="http://www.ebay.com/itm/Nexus-5-D820-16GB-Black-Unlocked-Smartphone-with-accessories-included-/181559968522?pt=Cell_Phones&hash=item2a45d1430a">helloooo</a></p>
    <p>
        <input id="input" type="text" />
    </p>
</body>

CSS

#first {
    margin-bottom: 40px;
}

#second {
    margin-bottom: 40px;
}

JavaScript

//grab the DOM element and attach to var

//create event handler, maybe make it anonymous

var MyApp = {
    init: function() {
        var second = document.getElementById('second');
        
        var theInput = document.getElementById('input');
        
        second.onmouseover = MyApp.hoverIt;
        
        theInput.onkeydown = MyApp.keyIt;
    },
    
    hoverIt: function() {
        alert('yo');
    },
    keyIt: function(e) {
        console.log(e.keyCode);
    }
    
}

//NON-object version
/*
var second = document.getElementById('second');

second.onmouseover = function() {
    alert('yo');
}
*/

MyApp.init();