Code Pattern App with JavaScript

4 min readMar 5, 2018

JavaScript is powerful programming language which can be used to add front-end functionality in web pages. As a part of cordova(phonegap), it helps to develop apps for multiple platforms like iOS, Android and web. It is almost supported by every browser.

As JavaScript is one of the popular and easier to learn language, I have tried to develop a coding web app (Code Pattern Game). In this app, user is given with a pattern to build by programming through looping statements. Browse through code or play game.

Benefits of Code Pattern game:

Enhance logical reasoning.
Helps to learn script writing.

Code Pattern app act as a practice exercises for learning JavaScript coding with loops and iterations. User can enhance logical reasoning by structuring such loops and iterations. Such a game can also act as assignment work in introductory courses of JavaScript encouraging students to learn JavaScript with game.

But here comes a question that why JavaScript framework is used to develop such app/game. There are many reasons behind using JavaScript and some of them are as listed below:

It is an easy to learn & one of the popular language.
It helps to add functionality in UI of web pages.
It provides many functions and methods that can be used to complete specified tasks in apps or web pages.

Lets go through this app development

If you are developing any type of coding app with HTML, CSS and JavaScript, then you will find this tutorial beneficial. You can view full code at GitHub. I have generated levels with different patterns to build. For example Level 1 is:

In this UI, user is provided with expected result and user has to write code in left textarea and then run code. Result will be displayed under actual result and if it matches with expected result, level will be completed. Let go through code of this user interface in steps:

1. How expected result div is automatically populated:

The expected result div is populated with table generated by loops and iterations. Here is HTML and JavaScript code running behind expected result div:

HTML:<div>
    <h3>Expected Result:</h3>
    <div id="run1">
      
    </div>
</div>JavaScript:var run1 = document.getElementById('run1');
let y = '<table>';
for(var i = 0;i<=4;i++){
   y += '<tr>'
   for(var j = 0;j<=4;j++){
    if(i==0||i==4){
     y += "<td>*</td>";
    }
    else{
     if(j==0||j==4){
      y += "<td>*</td>";
     }
     else{
      y += "<td></td>";
     }
    }
   }
  y += "</tr>";
}
y += "</table>"
run1.innerHTML = y;

2. How User’s Script written in textarea populate actual result div:

In HTML there is textarea with id patt where user can write script with any type of loop and push the formed table to div with id result.

<textarea rows="15" cols="60" id="patt">
// write code here ...
</textarea><div id="scriptContainer"></div>

The div with id = scriptContainer will change into inline script with following JavaScript code:

var inp = document.getElementById('patt');
var oldScript = document.getElementById('scriptContainer');
var newScript;
var x = "var result = document.getElementById('result');";if (oldScript) {
        oldScript.parentNode.removeChild(oldScript);
     }newScript = document.createElement('script');
newScript.id = 'scriptContainer';
newScript.text = x + ' ' + inp.value;
document.body.appendChild(newScript);

Every time user run code by making changes old script will be deleted and new script will be appended to body. When this script runs, it populate the actual result div with user’s code.

3. Using isEqualNode() to compare user’s result with expected pattern:

This app does not compare code to inspect that whether user has build expected pattern whereas it directly compare the table generated in both divs and thus enable user to write the code any way he/she wants and use any loops and iterations to form table structure. Here is code to compare tables in both divs:

let divList  = document.getElementsByTagName("div");
let d1 = document.getElementById("run1").childNodes;
let d2 = document.getElementById("result").childNodes;if(d1[0].isEqualNode(d2[0]) == true){
    // Print Congratulations! Level Completed.
   }

In this, d1 and d2 are referring to tables in both divs. isEqualNode() is the method which compares both nodes and returns true if both matches or false if don’t.

Thus I have tried to develop this simple app with simply HTML, CSS and JavaScript. Hope so those who are trying to build any type of coding app will found this useful.