Skip to content

Instantly share code, notes, and snippets.

@adregan

adregan/room.html

Created April 6, 2016 23:26
Show Gist options
  • Save adregan/3126e5e85f5e736a37b512e36cea81d8 to your computer and use it in GitHub Desktop.
Save adregan/3126e5e85f5e736a37b512e36cea81d8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
room.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.active {
fill: red;
}
</style>
</head>
<body>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="569px" height="246px" viewBox="0 0 569 246" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>room</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-1" stroke="#222222" stroke-width="3" fill="#FFFFFF" x="0" y="0" width="569" height="246"></rect>
<g id="Group" transform="translate(137.000000, 1.000000)" stroke="#222222" stroke-width="3" fill="#FFFFFF">
<rect id="0" x="0" y="0" width="71" height="71"></rect>
<rect id="1" x="0" y="68" width="71" height="71"></rect>
</g>
<g id="Group-2" transform="translate(249.000000, 0.000000)" stroke="#222222" stroke-width="3" fill="#FFFFFF">
<rect id="2" x="0" y="0" width="71" height="71"></rect>
<rect id="3" x="0" y="68" width="71" height="71"></rect>
</g>
<g id="Group-3" transform="translate(361.000000, 1.000000)" stroke="#222222" stroke-width="3" fill="#FFFFFF">
<rect id="4" x="0" y="0" width="71" height="71"></rect>
<rect id="5" x="0" y="68" width="71" height="71"></rect>
</g>
<text id="A-crudely-drawn-room" font-family="NittiBasic-Light, Nitti Basic" font-size="18" font-weight="300" fill="#333333">
<tspan x="117" y="210">A crudely drawn room with desks</tspan>
</text>
</g>
</svg>
<button data-desk="0">0</button>
<button data-desk="1">1</button>
<button data-desk="2">2</button>
<button data-desk="3">3</button>
<button data-desk="4">4</button>
<button data-desk="5">5</button>
<script>
(function(){
'use strict';
let currentActive = undefined;
const updateDesk = (desk) => {
if (currentActive === desk) return;
if (currentActive) {
document.getElementById(currentActive).classList.remove('active');
}
document.getElementById(desk).classList.add('active');
currentActive = desk;
};
document.body.addEventListener('click', (e) => {
if (e.target.tagName !== 'BUTTON') return;
const desk = e.target.dataset.desk;
updateDesk(desk);
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment