JSFiddle - React, Tailwind, and code Playground

by KELO PROGRAMCI

HTML

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

CSS

#Logo {
    color: blue;
    text-decoration: none;
    }
.blueLetters {
  color: blue;
  text-decoration: none;
}
#mainLogo:hover a{
  color: black;
}
body{
	padding: 50px;
	}
#square{
	background-color: black;
	color: white;
	height: 100px;
	width: 100px;	
	padding-top: 15px;
	text-align:center;
	font-family: "Arial Black", 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

var BenimKitabım = ("BenimKitabım")
alert ("Örneğin")
alert (":D")
<div id="square">
I am a square. <br>And proud of it!
</div>
<button id="button" >Change Color</button>
//declare what's there 

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

//say the way

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

//run the fun

	function colorChange(){
	theBox.style.backgroundColor = "red";
	
	}