CSSTransitionsAnimations - 07 - Exercise

csstransitionsanimations-07-exercise.markdown

CSSTransitionsAnimations - 07 - Exercise

A Pen by Abdoul Aziz BA on CodePen.

License.

index.html

<h1>Exercise</h1>
Add a script to the previous exercise so that the color of each square changes after each loop. The color should be chosen randomly (use the provided function, and existing code).
<div id="loader" class="loading">
	<div class="red"></div>
	<div class="green"></div>
	<div class="blue"></div>
</div>

<input type="button" id="button" value="load">

script.js

var red = document.querySelector("div#loader .red");
var blue = document.querySelector("div#loader .blue");
var green = document.querySelector("div#loader .green");

function randomColor() {
	return "#" + Math.random().toString(16).substr(-6);
}

// Toggle button code. Don't edit.
var loader = document.getElementById("loader");
var button = document.getElementById("button");
button.addEventListener("click", function () {
	if (loader.className === "loading") {
		loader.className = "";
	} else {
		loader.className = "loading";
		red.style.background = randomColor();
		blue.style.background = randomColor();
		green.style.background = randomColor();
	}
});

//loader.className ="";

style.css

html,
body {
	width: 100%;
	height: 100%;
}

div#loader {
	position: relative;
	height: 200px;
	width: 200px;
	margin: auto;
}

div#loader .red {
	display: inline-block;
	position: absolute;
	width: 100px;
	height: 100px;
	background: red;
	opacity: 0.75;
	transform-origin: 50% 50%;
}

div#loader.loading .red {
	animation: rotating 7s linear infinite;
}

div#loader .green {
	display: inline-block;
	position: absolute;
	width: 75px;
	height: 75px;
	top: 12.5px;
	left: 12.5px;
	background: green;
	opacity: 0.75;
	transform-origin: 50% 50%;
}

div#loader.loading .green {
	animation: rotating 5s linear infinite;
}

div#loader .blue {
	display: inline-block;
	position: absolute;
	width: 50px;
	height: 50px;
	top: 25px;
	left: 25px;
	background: blue;
	transform-origin: 50% 50%;
}

div#loader.loading .blue {
	animation: rotating 3s linear infinite;
}

#button {
	transition: all 2s ease-in;
}

@keyframes rotating {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}