Skip to content

Instantly share code, notes, and snippets.

@mwiegant

mwiegant/flippanel.html

Last active October 3, 2015 00:41
Show Gist options
  • Save mwiegant/e1cdb6884a2a417137e1 to your computer and use it in GitHub Desktop.
Save mwiegant/e1cdb6884a2a417137e1 to your computer and use it in GitHub Desktop.
Download ZIP
An html page with responsive containers, built for teaching a friend about web development
Raw
flippanel.html
<html>
<head>
<style>
div.panel {display:inline-block; width:100px; height:100px; border:3px solid black;
margin:20px}
div.on {background-color:blue;}
</style>
</head>
<body>
<div class="panel on" id="panel0"></div>
<div class="panel on" id="panel1"></div>
<div class="panel" id="panel2"></div>
<br>
<div class="panel" id="panel3"></div>
<div class="panel on" id="panel4"></div>
<div class="panel" id="panel5"></div>
<br>
<div class="panel on" id="panel6"></div>
<div class="panel" id="panel7"></div>
<div class="panel on" id="panel8"></div>
</body>
<script>
// setup event listeners
document.getElementById( 'panel0' ).addEventListener( 'click', function(){ toggle(0) });
document.getElementById( 'panel1' ).addEventListener( 'click', function(){ toggle(1) });
document.getElementById( 'panel2' ).addEventListener( 'click', function(){ toggle(2) });
document.getElementById( 'panel3' ).addEventListener( 'click', function(){ toggle(3) });
document.getElementById( 'panel4' ).addEventListener( 'click', function(){ toggle(4) });
document.getElementById( 'panel5' ).addEventListener( 'click', function(){ toggle(5) });
document.getElementById( 'panel6' ).addEventListener( 'click', function(){ toggle(6) });
document.getElementById( 'panel7' ).addEventListener( 'click', function(){ toggle(7) });
document.getElementById( 'panel8' ).addEventListener( 'click', function(){ toggle(8) });
function toggle(panelNum) {
var row = Math.floor( panelNum/3 );
var col = panelNum%3;
// flip this panel
flip(panelNum);
// determine which panels to flip, left and right
if(col==0) {
flip(panelNum+1);
}
else if(col==1) {
flip(panelNum+1);
flip(panelNum-1);
}
else {
flip(panelNum-1);
}
// determine which panels to flip, top and bottom
if(row==0) {
flip(panelNum+3);
}
else if(row==1) {
flip(panelNum+3);
flip(panelNum-3);
}
else {
flip(panelNum-3);
}
}
function flip(panelNum) {
var id = 'panel'+panelNum;
var classList = document.getElementById(id).classList;
// check if the element has the class
if( classList.contains('on') )
classList.remove('on');
else
classList.add('on');
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment