css manipulation

by hannahtaylor

HTML

<div id="changeColor">
	<button onclick="backgroundChange()">Change Color</button>
</div>

<div id="circle">
	<button onclick="shapeChange()">Change Shape</button>
</div>

<div id="font">
	<p>This is some text</p>
	<button onclick="fontChange()">Change Font</button>
</div>

<div id="animate">
	<button onclick="moveBox()">Animate Me</button>
</div>

CSS

#changeColor {
	background-color: #a8e0d6;
	height: 150px;
	width: 150px;
	padding: 10px;
}

#circle {
	background-color: #414073;
	height: 150px;
	width: 150px;
	padding: 10px;
	color: white;
}

#font {
	background-color: #70a37f;
	height: 150px;
	width: 150px;
	padding: 10px;
}

#animate {
	background-color: #41658a;
	height: 150px;
	width: 150px;
	padding: 10px;
}

@keyframes rotation {
	100% { transform: rotate(360deg); }
}
div {
	margin-bottom: 10px;
}

#wrapper:

JavaScript

//Change the background color of the div
function backgroundChange() {
	document.getElementById("changeColor").style.backgroundColor = "#a28f9d";
}

function shapeChange() {
	document.getElementById("circle").style.borderRadius = "50%";
}

function fontChange() {
	document.getElementById("font").style.font = "italic bold 20px arial,serif";
}

function moveBox() {
	document.getElementById("animate").style.animation = "rotation 8s 1";
}