JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<div id="box" class="" data-public-date="2014-04-10" alt="some interesting stuff" data-price="400" data-camel-cased-name="This is some data" style="color:#0ff"></div>
<p class="btn">Rotate</p>
<p class="btn1">Double Click</p>
<form id="form">
    <p>Username:
        <input type="text">
    </p>
    <p>Password:
        <input type="password">
    </p>
</form>

CSS

div {
    font-size:42px;
    -webkit-transition-duration:2s;
    transition-duration:2s;
    height:200px;
    width:200px;
}
.img {
    background:url(http://cordeliafong.com/images/3dots.gif);
    border: 5px solid red;
}
.rotate {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    border-color: red;
}
p.btn {
    display:inline-block;
    border:2px solid #888;
}
p.btn:hover {
    color:#666;
    cursor:pointer;
}
p.btn1 {
    display:inline-block;
    border:2px solid #888;
}
p.btn1:hover {
    color:#666;
    cursor:pointer;
}
.corner {
    /*-webkit-transform:rotate(180deg);
    transform:rotate(180deg) ; */
    border-radius: 25px;
    border-color:#000;
}
/*.corner {border:10px solid; border-radius:25px; color: red;}*/

JavaScript

/* 
use 5 different event listeners to trigger functions that update your page. Use classList to change the classes, style to update the style, and dataset to get/add some data.
*/


var box = document.getElementById("box");
var boxClasses = box.classList;
boxClasses.add("img");

box.dataset.publicDate = "2012-01-14";

//click event
document.querySelector(".btn").addEventListener("click", function () {
    boxClasses.toggle("rotate");
});

//double click
document.querySelector(".btn1").addEventListener("dblclick", function () {
    boxClasses.toggle("corner");
});

//mouseover
box.addEventListener("mouseover", function () {
    box.classList.toggle("corner");
});

//focus
var form = document.getElementById("form");
form.addEventListener("focus", function (event) {
    event.target.style.outline = "1px solid pink";
}, true);

//blur
form.addEventListener("blur", function (event) {
    event.target.style.outline = "";
}, true);