JSFiddle - React, Tailwind, and code Playground

by Esther Mun

HTML

<article id="intro" class="english" data-id = "1235468" data-publicDate="2014-04-03" alt="some interesting stuff" style>Hi this is a small article. Enjoy.</article>
<!-- entry written after data- becomes special. in this case we made publicDate-->
<p class = "btn">Let's spin!</p>

CSS

#intro[class^=eng] {
}
.spin {
    -webkit-transform:rotate(360deg);
}
#intro[alt^=some] {
}
.public {
    background: #ccc;
}
article {
    font-size: 42px;
    -webkit-transition-duration:2s;
}
p.btn {
    background: blue;
    color: #fff;
    width: 70px;
    text-align: center;
    padding: 10px;
    
}
.pulse {
    zoom:1.2;
}

JavaScript

//element.getAttribute();

//if(document.getElementById("intro").getAttribute("data-publicDate")){
//    alert("the expression is true");
//}

var intro = document.getElementById("intro");
//if(intro.getAttribute("alt")){
//    intro.innerHTML = intro.getAttribute("id");
//}

//element.classList;
//intro.innerHTML = intro.classList;

var introClasses = intro.classList;
introClasses.add("public");
//introClasses.remove("english");
//if ('spin' == prompt("what do you want to do?")) {
//    introClasses.toggle("spin");
//}
document.querySelector(".btn").addEventListener("click",function(){
 introClasses.toggle("spin");
});    
intro.addEventListener("mouseover", function() { 
        intro.classList.toggle("pulse")
});
//element.classList.toggle('classToBeRemoved', false);
//element.classList.toggle('classToBeAdded', true);
//classList.toggle("myClass", one == two);

//element.style - don't rely too much on this to style your content

intro.style.border = "2px solid green";

//element.dataset
//alert(intro.dataset.id);
//alert(intro.dataset.publicDate);