Created
July 13, 2017 19:06
-
-
Save ZMYaro/ab35432e3bfd2043600b0a2875b9638b to your computer and use it in GitHub Desktop.
MCU Movie Compare-O-Matic
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> | |
| <title>MCU Movie Compare-O-Matic</title> | |
| <style type="text/css"> | |
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| Array.prototype.shuffle = function () { | |
| this.sort(function () { | |
| return Math.random() - 0.5; | |
| }); | |
| return this; | |
| }; | |
| var movies = [ | |
| 'Iron Man 1', | |
| 'The Incredible Hulk', | |
| 'Iron Man 2', | |
| 'Thor', | |
| 'Captain America: The First Avenger', | |
| 'The Avengers', | |
| 'Iron Man 3', | |
| 'Thor: The Dark World', | |
| 'Captain America: The Winter Soldier', | |
| 'Guardians Of The Galaxy', | |
| 'Avengers: Age Of Ultron', | |
| 'Ant-Man', | |
| 'Captain America: Civil War', | |
| 'Doctor Strange', | |
| 'Guardians Of The Galaxy Vol. 2', | |
| 'Spider-Man: Homecoming' | |
| ]; | |
| var i = 0, | |
| button0, | |
| button1 | |
| currentIndices = []; | |
| function init() { | |
| button0 = document.getElementById('movie0'); | |
| button0.onclick = function () { | |
| cut(1); | |
| }; | |
| button1 = document.getElementById('movie1'); | |
| button1.onclick = function () { | |
| cut(0); | |
| }; | |
| movies.shuffle(); | |
| setUpNextPair(); | |
| } | |
| function setUpNextPair() { | |
| if (movies.length === 1) { | |
| showWinner(); | |
| return; | |
| } | |
| i += 2; | |
| if (i > movies.length - 2) { | |
| i = 0; | |
| movies.shuffle(); | |
| } | |
| currentIndices = [ | |
| i, | |
| i + 1 | |
| ]; | |
| button0.innerHTML = '<em>' + movies[i] + '</em>'; | |
| button1.innerHTML = '<em>' + movies[i + 1] + '</em>'; | |
| } | |
| function cut(n) { | |
| movies.splice(currentIndices[n], 1); | |
| setUpNextPair(); | |
| } | |
| function showWinner() { | |
| button0.style.display = | |
| button1.style.display = 'none'; | |
| document.getElementsByTagName('div')[0].innerHTML = | |
| '<em>' + movies[0] + '</em> seems to be your favorite MCU movie.' ; | |
| } | |
| window.onload = init; | |
| </script> | |
| </head> | |
| <body> | |
| <button id="movie0"></button> | |
| <div> OR </div> | |
| <button id="movie1"></button> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment