Skip to content

Instantly share code, notes, and snippets.

@stammy

stammy/5by5.html

Created November 9, 2012 23:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save stammy/4049017 to your computer and use it in GitHub Desktop.
Save stammy/4049017 to your computer and use it in GitHub Desktop.
Download ZIP
Front-end Challenge: 5x5 grid of blocks that change color when ... (click download and run this in your browser)
Raw
5by5.html
<!--
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