JSFiddle - React, Tailwind, and code Playground

by Esther Mun

HTML

<h1 id="title"> Assignment 2 </h1>

<p>By: Esther Mun</p>

<p id = "bttn">What's to celebrate? Click me!</p>
<p id="text">Exported from Google's Doodles - in celebration of Dionisios Solomos's 216th Birthday</p>

<article id="doodle"></article>

CSS

#title {
    -webkit-transition-duration:1s;
}
#doodle {
    -webkit-transition-duration:1s;
    height: 200px;
    width: 430px;
    background: url(http://lh3.ggpht.com/r4Qq0soacA8Lz1gwo81cC5NlsOJE60HCmXOrN7I-pr9dG7ucae83nFY3uBvnFn4G1e5XzcmPRmNUrMIZi-wpSq9e30G9HwQWka8coPc);
}
#bttn {
    text-align: center;
    border: 2px solid #33cccc;
    background: #006666;
    color: #fff;
    width:200px;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 1px 1px 3px ##006666;
   -webkit-transition-duration:1s;
}
#bttn:hover {
    cursor: pointer;
    background: #999;
        -webkit-transition-duration:1s;
}
#text {
    display: none;
    -webkit-transition-duration:1s;
}

JavaScript

var title = document.getElementById("title");
title.addEventListener("mouseover", function (event) {
    event.target.style.color = "#009966";
    setTimeout(function () {
        event.target.style.color = "#ff6666";
    }, 600);
}, false);

var doodles = document.querySelector("#doodle");
doodle.addEventListener("click", function () {
    window.open("http://www.google.com/doodles/dionisios-solomoss-216th-birthday");
});
doodle.addEventListener("mouseover", function () {
    doodle.style.zoom = 1.5;
    doodle.style.opacity = 0.5;
    setTimeout(function () {
        doodle.style.zoom = 1;
        doodle.style.opacity = 1;
    }, 800);
});

var bttn = document.getElementById("bttn");
bttn.addEventListener("click", function () {
   //bttn.style.display = "none";
    document.querySelector("#text").style.display = "inline";
    
});