-
-
Save clindsey/4062053 to your computer and use it in GitHub Desktop.
Front-end Challenge: 5x5 grid of blocks that change color when ... (click download and run this in your browser)
This file contains 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
<!-- | |
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
this article explains it