Purwadhika Coding Challenge
It not just a game, but a solution.
Purwadhika is one of the most popular digital schools in Indonesia. There many programs here, one of them is Web and Mobile Development. In Web and Mobile development program, we can learn about developing web and mobile app from scratch to ready use app. Also, at the end of each module there is an event called “Coding Challenge” (The name is different according to each program). It’s a break after doing test-day for each module.
#So what are we doing at coding challenge? Basically, we’re just playing a game and having fun. However, it’s not an ordinary game, we’re playing a relay code game. Firstly, we’re divided into a small group. Then, we will be given one same problem that we must solve together as a group. However, the difficult part is not just about the problem. The rule itself somehow makes it more challenging, which is that we are limited to only using one laptop for each group. So, we will code one by one for a certain given time then we swap with the other members to build further upon the code until the problem is solved. It’s like doing a relay sport, but we are not doing it (coding) while we run, we are just coding in the front of the laptop.
With many different perspectives and code style of each individual, it makes the game more difficult. Each person has their own solution and idea to solve the problem. However, we must do it as a team because it’s a team competition, not an individual one. So here we learn a special lesson on how we collaborate, make a decision, read another person’s code style, search and merge ideas together, build a solid team to solve problems together, and so on. In my perspective, I think it’s much more fun and challenging.
#Are you curious about the given problem? Here it is.
So, we are given a box with different value in it. Our task is to make a change for its position (horizontal or vertically, and even rotate it clockwise or counter-clockwise) according to its button function. In this case, we use the sort button. In this article, I will not only provide a solution but also the next application or challenge.
#How do we solve it? Simple.
Firstly, we must make its HTML structure. In <body> we will place a <table> with 4 elements of <tr> (rows) and we will assign a value to each element of it <tr> using JavaScript function.
In JavaScript function, we create an NxN multiple array (for this case we will create 3x3 array with provided value from 1 to 9) to resemble the box with the value in it. So, when we want to make a change, we just need to change of each array element. Here, we will be using for loop to iterate and print it to HTML.
Note that we iterate or access the array’s value over its row and column using two for loop. At the end of each loop of column(i) <td> and each end of row(j) <tr>, we will insert a button then assign it with a function to make a change of my array’s element.
# So, how do we make a change for each element in Array ? Just sort it.
We will use sort function and make it reversible in every click. It sounds simple, but how do we do that? See the code below.
In the code you will see that to change the horizontal element, we just need to access the element of array and each element is also an array (multidimensional array). Then we will sort it using built-in function sort(). To make reversible, we give a conditional statement, to compare it first and end of array’s element inside array (row).
To change element in vertically, we must take each element for each column and assign it a value to the new array. Then we sort and push its value back to the original array.
#How we make it rotate? Huft 🤔.
To make it rotate is quite difficult, but the idea behind it is so simple. We just need to change the row element to become column element and so on. Here is my simple diagram solution for clockwise rotation for 90 degree (I wrote and compared my solution with another in other references to validate it).
Before we make a change, I created a new 3x3 array with zero value so it does not affect my original array. Then, I assign value of it with rotated value of my array and push the value back to my original array. Here’s my code.
Note that I reverse the array before the iteration. It is because, when I assign value to my new array [row][column] with my original array [column][row], the first index is still the same. That means the first element of array will not move. So, the trick is to reverse it before the iteration and make my original array look like this
For counter-clockwise rotation, the solution is relatively the same but with some little trick. Here is my code.
#Finally, we did it. Here’s my final result.
And this is it, with my little touch to make it more beautiful and fun. Next challenge, you can make a simple game using it such as making a simple puzzle game, a hidden number in the box, or a rotating cube if you want.
Don’t hesitate to contact me if you have any questions and don’t forget to visit my GitHub to access the full code. Thank you.
References :
https://medium.com/front-end-weekly/matrix-rotation-%EF%B8%8F-6550397f16ab
