JSFiddle - React, Tailwind, and code Playground

by Alex Fogarty

HTML

<div id="square"> I am a square. <br> And proud of it!</div>
<button id="buttonchange"> Change Color</button>

CSS

body{
  padding: 50px;
}
#square {
  background-color: black;
  color: white;
  height: 100px;
  width: 100px;
  padding-top: 15px;
  text-align: center;
  font-family: "Arial Black", Arial, Helvetica, sans-serif;
margin-right: auto;
margin-left: auto;
}
button{
  width: 100px;
  padding: 10px;
  display: block;
  margin-right: auto;
margin-left: auto;
margin-top: 10px;
}

JavaScript

//declare what's there
var box = document.getElementById("square");
var button2 = document.getElementById("buttonchange");

//say the way
button2.addEventListener('click', colorChange, false);

//run the fun
function colorChange(){
  box.style.backgroundColor = "red";
}