Simple Toggle

by Alex Fogarty

HTML

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

CSS

body{
	padding: 50px;
	}
.red{
		background-color: red;
		}	
.black { background-color: black;

}
#square{
	color: white;
	height: 200px;
	width: 200px;	
	padding-top: 25px;
	text-align:center;
	font-family: "Arial Black", sans-serif;
	margin-right:auto;
	margin-left: auto;
	}
button{
	width: 200px;
	padding: 20px;
	display: block;
	margin-right:auto;
	margin-left: auto;
	margin-top: 10px;
	}

JavaScript

//declare what's there

var theBox = document.getElementById("square");
var myButton = document.getElementById("button");


//say the way

myButton.addEventListener('click', changeColor, false);


//run the fun

function changeColor(){
var theBox = document.getElementById("square");
theBox.classList.toggle('black'); 

	}