Created
September 9, 2015 19:50
-
-
Save chrishoage/1ef6de27822c781309a7 to your computer and use it in GitHub Desktop.
CE Code Challenge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> | |
| <title>Creative Engineering Code Challenge - July 2015</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <script src="scripts.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| var $body = document.body; | |
| var animationLength = 10 | |
| var boxData = {}; | |
| function randomColor() { | |
| var letters = '0123456789ABCDEF'.split(''); | |
| var color = '#'; | |
| for (var i = 0; i < 6; i++ ) { | |
| color += letters[Math.floor(Math.random() * 16)]; | |
| } | |
| return color; | |
| } | |
| function createBox (i) { | |
| var $box = document.createElement('div'); | |
| var duration = Math.random() * 10; | |
| var iteration = animationLength / duration; | |
| var background = randomColor(); | |
| $box.className = 'box'; | |
| $box.id = 'box_' + i; | |
| $box.style.background = background; | |
| $box.style.animationIterationCount = iteration; | |
| $box.style.animationDuration = duration + 's'; | |
| boxData[i] = { | |
| background: background, | |
| duration: duration, | |
| iteration: iteration | |
| }; | |
| return $box; | |
| } | |
| for (var i = 0; i < 200; i++) { | |
| $body.appendChild(createBox(i)); | |
| }; | |
| var boxDataKeys = Object.keys(boxData); | |
| var durations = boxDataKeys.map(function (box) { | |
| return boxData[box].duration; | |
| }).sort(); | |
| var fastestDuration = durations[0]; | |
| var fastestBox = boxDataKeys.filter(function (box) { | |
| return boxData[box].duration === fastestDuration; | |
| })[0]; | |
| var fastestBoxColor = boxData[fastestBox].background; | |
| var fastestBoxBounceCount = boxData[fastestBox].iteration; | |
| var fastestBoxDistince = window.innerHeight * fastestBoxBounceCount; | |
| var resultData = []; | |
| resultData.push('Box #' + fastestBox + ' travled the furthest'); | |
| resultData.push('Box was the color ' + fastestBoxColor); | |
| resultData.push('Box bounced ' + fastestBoxBounceCount + ' times'); | |
| resultData.push('Box travled ' + fastestBoxDistince + ' pixels' ); | |
| setTimeout(function () { | |
| $body.innerText = resultData.join(', '); | |
| }, animationLength * 1000); | |
| console.log(durations, fastestBox, resultData) | |
| })() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .box { | |
| width: 3px; | |
| height: 3px; | |
| margin: 1px; | |
| float: left; | |
| position: relative; | |
| animation-name: animateBoxes; | |
| animation-timing-function: lineair; | |
| animation-direction: alternate; | |
| } | |
| @keyframes animateBoxes { | |
| 0% { top: 0; } | |
| 100% { top: calc(100% - 5px);} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment