JSFiddle - React, Tailwind, and code Playground

by adamgrossman

HTML

<div id="square"></div>
<div id="btnContainer"></div>

CSS

#square {
    width: 100px;
    height: 100px;
    border: 1px black solid;
    background-color: blue;
}

JavaScript

'use strict';
var myDiv = document.querySelector('#square');
var container = document.querySelector('#btnContainer');
var isHovered = false;

myDiv.addEventListener('mouseover', function () {
    myDiv.style.backgroundColor = 'red';
    myDiv.textContent = 'Press any key';
    isHovered = true;
});

myDiv.addEventListener('mouseout', function () {
    myDiv.style['background-color'] = 'blue';
    myDiv.textContent = '';
    isHovered = false;
});

addEventListener('keydown', function (e) {
    if (isHovered) {
        alert('no, click the button now');
        var myBtn = document.createElement('button');
        myBtn.textContent = 'CLIIIIICK MEEE!!';
        container.appendChild(myBtn);
        myBtn.addEventListener('click', function() {
            console.log('a secret message');
            var message = document.createElement('div');
            message.textContent = 'Open console';
            container.appendChild(message);
        });
    }
});