JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<html>
    <body>
        <div id="wow">
            <p id="thisOne">Fuck yea</p>
        </div> <!-- end wow -->
        <div id="wow2">
            <p>again</p>
            <input id="butt" type="button" value="click right here" />
        </div> <!-- end wow2 -->
    </body>
</html>

CSS

input {
    padding: 20px 0px;
    margin: 20px 0px;
}

JavaScript

//var eventDrivenCssChanges; Adding Elements

//grab the div
var firstDiv=document.getElementById('wow');

//create the new div
var secDiv=document.createElement('p');

//create the text node
var textNode=document.createTextNode('Oooh shit yea');

//append the text node to the div
secDiv.appendChild(textNode);

//append the two divs
firstDiv.appendChild(secDiv);

var colorChange=document.getElementById('butt');
var theTag=document.getElementById('thisOne');

function changeIt(){
    theTag.style.color='#941';
}

function changeBack(){
    theTag.style.color='#000';
}

colorChange.onmouseover=changeIt;
colorChange.onmouseout=changeBack;

colorChange.onclick=function(){
    theTag.style.color='#449911';
}