Number Swapper using vanilla JS(OOJS)
As a part of my routine problem solving exercise, I came across this simple yet peculiar problem of a number swapper. So here goes the problem statement:
We have a big square divided into 9 small squares and are numbered from 1 to 8 and the 9th square is left blank or for that matter let's name it a fancy square "boom." Now when I click on any of the squares adjacent to the "boom" square the number of the adjacent square gets swapped with "BOOM" and the the "boom" square updates with the clicked number and this process is valid for any square that's "boomed" i.e. irrespective of the position of the "boom" square the logic should hold true.
We got this problem, which seems quite simple at first glance, but make no mistake it is definitely going to test your problem solving skills to the core and yes meanwhile your DOM knowledge and OOJS skills too.
So let's get started by laying out the basic template structure to it, we will have index.html file which will house our view with appropriate class and styles:
<body>
<h1>Welcome to Number swapper</h1>
<div class="matrix" id="mat">
<div class="boxes" id="1">
1
</div>
<div class="boxes" id="2">
2
</div>
<div class="boxes" id="3">
3
</div>
<div class="boxes" id="4">
4
</div>
<div class="boxes" id="5">
5
</div>
<div class="boxes" id="6">
6
</div>
<div class="boxes" id="7">
7
</div>
<div class="boxes" id="8">
8
</div>
<div class="boxes" id="9">
boom!!
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<script src="./script.js"></script>
</body>
Here is how it unfolds, we have our parent square as <div> with class "matrix" and id "mat" & we have our child squares as <div> with class "boxes" and id ranging from "1 to 9".
Moving on to the styling part we have styles.css which does the basic styling of the view:
body{
text-align: center;
}
.matrix{
width: 310px;
height: 310px;
border: 4px solid indigo;
margin: 10px auto;
box-sizing: border-box;
box-shadow: 10px 10px 10px grey;
}
.boxes{
width: 32.5%;
height: 32.5%;
border: 4px solid gold;
text-align: center;
float: left;
box-shadow: 4px 4px 4px grey;
}
Finally, let's move on to the core problem solving part i.e. the JS part, we have a basic mechanism to approach solving any problem, Break It Down!. Here our main requirement is to swap the content of the clicked box(with number values) to "BOOM" which should be adjacent to our "boom!!" box and this should happen irrespective of "boom!!" box position.
Hmmm, how do we approach this peculiar problem, Okay lets divide n conquer, first lets check for the clicked box index with a simple arrow function checkIndex:
var checkIndex = (element) => {
let box = document.getElementById(element.id);
console.log("Clicked Id....." + box.id);
return box;
}
Next we shall check for the the "boom!!" box, which can be figured out using the function checkBoom:
var checkBoom = () => {
let boomed;
[...document.getElementsByClassName("boxes")].forEach(element => {
if (element.innerText === "boom!!" || element.innerText === "Boomed") {
console.log("boomed...." + element.id);
boomed = element;
}
})
return boomed;
};
Finally, we shall swap the "boom!!" out of boom box to the adjacent number valued box which will be done by the swapBoom function:
let swapBoom = (clicked, Boomed) => {
let clickedId = clicked.id;
let boomId = Boomed.id;
for (key in matrix) {
if (matrix.hasOwnProperty(key)) {
// console.log(key + "------>" + matrix[key]);
if (key === boomId) {
matrix[key].forEach(item => {
if (clickedId == item) {
console.log(true);
Boomed.innerText = clicked.innerText;
clicked.innerText = "Boomed";
}
})
}
}
}
}
But we need to find a way to trigger all these functions, we need an event to be triggered which should execute our functions and validate the above mentioned steps. So we are going to trigger an onclick handler on the parent larger square which would give us the element on which the click has happened using event.target and will execute the functions to achieve the desired result:
mat.onclick = (event) => {
var element = event.target;
swapBoom(checkIndex(element), checkBoom());
}
And BOOM our implementation is done, we will get our expected result. Here is the screenshot of our actual JS file.
Surprised, well yeah I forgot, we have to store the adjacent box values for each box in for of an object i.e. matrix to enable us to easily track the probabilities of a click.
Here is the final clip of the completed application:
Hope you found this article intriguing, please share your feedback and comments as a token of appreciation to my effort and contribution.
nice article
Good initiative !