JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="items">
<div id="redKey"><a href="#" onclick="get('redKey')">RED KEY</a></div>
<div id="blueKey"><a href="#" onclick="get('blueKey')">BLUE KEY</a></div>
</div>

<div class="clear"></div>

<div class="items">
<div id="loc1" onclick="lock('loc1')"></div>
<div id="loc2" onclick="lock('loc2')"></div>
</div>

<div class="clear"></div>

<div class="items">
<div id="redLock" onclick="unlock('redLock')">RED LOCKED</div>
<div id="blueLock" onclick="unlock('blueLock')">BLUE LOCKED</div>
</div>

<div class="clear"></div>

<div id="test">

</div>

CSS

.items {margin-bottom:20px;}
.items div {float:left;width:150px;height:50px;margin:0 1px;border:1px solid #999999;text-align:center;line-height:50px;}
#redKey a{color:red;}
#blueKey a{color:blue;}
.clear {clear:both;}

JavaScript

var loc1 = 0;
var loc2 = 0;
var key = "none"

function get(el) {
if (el == "redKey") {var k = "RED KEY";}
if (el == "blueKey") {var k = "BLUE KEY";}

if (loc1 == 0) {document.getElementById('loc1').innerHTML = k;
document.getElementById(el).innerHTML = ""; loc1 = el;}

else if (loc2 == 0) {document.getElementById('loc2').innerHTML = k;
document.getElementById(el).innerHTML = ""; loc2 = el;}
}

function lock(el) {
if (el == "loc1") {key = loc1;}
if (el == "loc2") {key = loc2;}

}

function unlock(el) {
if (key == "redKey" && el == "redLock") {document.getElementById('redLock').innerHTML = "UNLOCKED";}
if (key == "blueKey" && el == "blueLock") {document.getElementById('blueLock').innerHTML = "UNLOCKED";}
}