I was given the following instructions
Using the below HTML, using ONLY CSS, JavaScript or jQuery create the following (see attached gif animation):
<div>This is a cube</div> <div>This is a triangle</div> <div>This is a big, green circle</div>
Rules:
The HTML cannot be modified in any way
For the animation portion, please use JavaScript; however, no 3-rd party jQuery or JavaScript plugins allowed
Compatibility: IE 9+, FF 4+, Chrome 10+, Safari 5.1+
I fudged the HTML some, especially when it came to making the Circle's text wrap to a second line and stay in the middle of the Circle.
$(document).ready(function() {
downUp();
upDown();
spin();
});
function downUp() {
$('.downUp').animate({'top': 500}, {
duration: 1500,
complete: function() {
$('.downUp').animate({'top': 0}, {
duration: 1500,
complete: downUp
});
}
});
}
function upDown() {
$('.upDown').animate({'top': 0}, {
duration: 1500,
complete: function() {
$('.upDown').animate({'top': 500}, {
duration: 1500,
complete: upDown
});
}
});
}
function spin() {
var degree = 0, timer;
rotate();
function rotate() {
timer = setTimeout(function() {
$('.spin').css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$('.spin').css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
$('.spin').css({ '-ms-transform' : 'rotate(' + degree + 'deg)'});
++degree; rotate();
},5);
}
}
#square {
position: absolute;
height: 200px;
width: 200px;
background: black;
/* For browsers that do not support gradients */
background: -webkit-linear-gradient(black, gray, black);
/* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(black, gray, black);
/* For Firefox 3.6 to 15 */
background: linear-gradient(black, gray, black);
text-align: center;
line-height: 200px;
color: white;
}
#triangle {
position: absolute;
left: 250px;
top: 500px;
width: 0px;
height: 50px;
border-style: solid;
border-width: 0 100px 160px 100px;
border-color: transparent transparent red transparent;
white-space: nowrap;
box-sizing: border-box;
text-indent: -50px;
line-height: 250px;
color: white;
}
#circle {
position: relative;
top: 250px;
left: 500px;
height: 200px;
width: 200px;
background-color: green;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
text-align: center;
color: white;
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='square' class='downUp'>This is a square</div>
<div id='triangle' class='upDown'>This is a triangle</div>
<div id='circle' class='spin'>
<p>This is a big,
<br/>green circle</p>
</div>
I borrowed some code from a StackOverflow answer to make the circle spin, it can be found here
I am sure that the up down code can be found places on the internet as it is super simple.
I am sure that there is something that I could be doing better on the JavaScript side of things within the restrictions I have been given.