Front-end Challenge: 5x5 grid of blocks that change color when ... (click download and run this in your browser)
| <!-- | |
| Create a 5 x 5 grid of blue blocks. When a block is clicked it turns red. Its adjacent block turns green. | |
| If a red block is on the end of a row, the adjacent green block is on the line below on the first column, | |
| et cetera. When another block is clicked, the previous red/green blocks go back to blue. There will only | |
| ever be one red and one green block on the screen, the rest are always blue. | |
| Only worry about Chrome. | |
| ------ | |
| I solved this without javascript by making use of infinite transitions to preserve state. Kind of a fun hack | |
| :) The only edge case is the bottom right block and getting the adjacent green block to appear on the top | |
| left block. Right now it only shows up temporarily (on :active). I think there may be a way to register a | |
| keyframe to get it to stay. | |
| --> | |
| <html> | |
| <head> | |
| <style type="text/css"> | |
| #wrapper { width: 555px; } | |
| #wrapper:active a:not(:active) { | |
| -webkit-transition: background 0s; | |
| background: blue; | |
| } | |
| a { | |
| background: rgb(0,0,254); /* 254 on purpose, cant be exact same color as above */ | |
| margin: 0 10px 10px 0; | |
| float: left; | |
| width: 100px; | |
| height: 100px; | |
| -webkit-transition: background 0s 99999999s; | |
| } | |
| a:active { -webkit-transition: background 0s; background: red; } | |
| a:active + a { background: green !important; } | |
| a:last-child:after { | |
| width: 100px; | |
| height: 100px; | |
| content: ""; | |
| position: absolute; | |
| top: 8px; | |
| left: 8px; | |
| background: green; | |
| opacity: 0; | |
| display: none; | |
| -webkit-transition: all 0s 99999999s; | |
| } | |
| a:last-child:active:after { | |
| -webkit-transition: all 0s; | |
| opacity: 1; | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| <a href="#"></a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment