{"id":90350,"date":"2021-04-01T11:10:20","date_gmt":"2021-04-01T05:40:20","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=90350"},"modified":"2026-06-01T14:42:49","modified_gmt":"2026-06-01T09:12:49","slug":"create-a-magic-square-in-javascript","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/","title":{"rendered":"Create a Magic Square in Javascript"},"content":{"rendered":"

A magic square is a 2D square matrix of distinct positive integers from 1 to n^2. It has a constant sum in every row, column, diagonal, which is known as magic sum.<\/p>\n

Algorithm to solve a n*n magic square:<\/h3>\n

It follows the following conditions:<\/p>\n

1. Place 1 anywhere except the middle position.<\/p>\n

2. The position of the next number is calculated by incrementing the column number of the previous number by 1 and decrementing the row number of previous number by 1.<\/p>\n

3. At any time, if the calculated row position becomes -1, it will wrap around to n-1. Similarly, if the calculated column position becomes n, it will wrap around to 0.<\/p>\n

4. If the calculated position is preoccupation, calculated column position will be decremented by 2, and calculated row position will be incremented by 1.<\/p>\n

5. If the calculated row position is -1 & calculated column position is n, the new position would be: (0, n-2).C:\\Users\\welcome\\Desktop\\Games\\JsGames\\Magic Square\\index.html<\/p>\n

Project Prerequisites<\/h3>\n

To implement this project we need to know the following :<\/p>\n

1. Basic concepts of JavaScript
\n2. HTML
\n3. CSS<\/p>\n

Download Magic Square Source Code<\/h3>\n

Please download the source code of magic square in javascript: Magic Square Code<\/strong><\/a><\/p>\n

Steps to Build Magic Square in JavaScript<\/h3>\n

1. Creating html file<\/h4>\n

HTML provides the basic structure. So it is the very first step of the project. Our code will contain some basic HTML tags like div, h1, title etc. And also we\u2019ve used bootstrap buttons and classes to make our life simpler.<\/p>\n

index.html code:<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\" crossorigin=\"anonymous\" 0=\"\">\r\n    <title>DataFlair Magic Square<\/title> \r\n    <style>\r\n        .board{\r\n\r\n            border:3px solid black;\r\n            margin:0 auto;\r\n            width: fit-content;\r\n            padding: 10px;\r\n            border-collapse:collapse;\r\n        }\r\n        td{\r\n            width:10px;\r\n            height: 10px;\r\n            padding: 0px;\r\n            border-collapse:collapse;\r\n        }\r\n        table,td{\r\n            border: 2px solid black;\r\n            border-collapse: collapse;\r\n        }\r\n        .lost{\r\n            color: red;\r\n        }\r\n        .won{\r\n            color: green;\r\n        }\r\n        .NoDeco{\r\n            text-decoration: none;\r\n            color: white;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        <h1 class =\"jumbotron\">DataFlair Magic Square<\/h1>\r\n        <h3 id= \"score\">Let's play!<\/h3> \r\n        <br><br>\r\n        <div class=\"board\">\r\n            <h2>Enter values<\/h2>\r\n            <table>\r\n                <tr>\r\n                    <td><input id=\"one\" type=\"text\" class=\"enter\" ><\/td>\r\n                    <td><input id=\"two\" type=\"text\" class=\"enter\" ><\/td>\r\n                    <td><input id=\"three\" type=\"text\" class=\"enter\" ><\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td><input id=\"four\" type=\"text\" class=\"enter\" ><\/td>\r\n                    <td><input id=\"five\" type=\"text\" class=\"enter\" ><\/td>\r\n                    <td><input id=\"six\" type=\"text\" class=\"enter\" ><\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td><input id=\"seven\" type=\"text\" class=\"enter\" ><\/td>\r\n                    <td><input id=\"eight\" type=\"text\" class=\"enter\" ><\/td>\r\n                    <td><input id=\"nine\" type=\"text\" class=\"enter\" ><\/td>\r\n                <\/tr>\r\n            <\/table><br>\r\n            <button class=\"btn btn-success\" onclick=\"start()\"> Submit<\/button><br><br>\r\n            <p>Re-enter values and submit to play again<\/p>\r\n        <\/div>  \r\n        <br>   \r\n        <p>Stuck here! Let's look at the solution <\/p>   \r\n        <button class=\"btn btn-info\"> <a class=\"NoDeco\" href='.\/magicsq.html'>Solution<\/a> <\/button><br><br>\r\n            \r\n    <\/div> \r\n    \r\n\r\n    <script src=\"static\/script.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
We have used very simple HTML tags and for styling we have used very basic CSS and some bootstrap classes.<\/p>\n
Here the most important tag is <input> which takes values from the user so that we can further process them in our JS file. And we have used a table tag to make a real three by three magic square.<\/p>\n
2. Creating Solution Page-magicsq.html<\/h4>\n
Code:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset='utf-8'>\r\n    <meta http-equiv='X-UA-Compatible' content='IE=edge'>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\" integrity=\"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk\" crossorigin=\"anonymous\" 0=\"\">\r\n    <title>DataFlair Magic Square<\/title>\r\n<\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        <h1 class =\"jumbotron\">DataFlair Magic Square<\/h1>\r\n        <h3 id= \"score\">3X3 Magic Square-<\/h3> \r\n        <br><br>\r\n        <div class=\"board\">\r\n            <table>\r\n                <tr>\r\n                    <td><input id=\"one\" type=\"text\"  ><\/td>\r\n                    <td><input id=\"two\" type=\"text\"  ><\/td>\r\n                    <td><input id=\"three\" type=\"text\"  ><\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td><input id=\"four\" type=\"text\"  ><\/td>\r\n                    <td><input id=\"five\" type=\"text\"  ><\/td>\r\n                    <td><input id=\"six\" type=\"text\"  ><\/td>\r\n                <\/tr>\r\n                <tr>\r\n                    <td><input id=\"seven\" type=\"text\"  ><\/td>\r\n                    <td><input id=\"eight\" type=\"text\"  ><\/td>\r\n                    <td><input id=\"nine\" type=\"text\"  ><\/td>\r\n                <\/tr>\r\n            <\/table><br>\r\n            <button class=\"btn btn-success\" onclick=\"gen()\"> Generate<\/button><br><br>\r\n        <\/div>        \r\n    <\/div> \r\n    <script >\r\n    function gen(){\r\n\r\n    let n=3;\r\n    var vals = new Array();;\r\n\r\n    for(var i=0;i<3;i++)\r\n    {\r\n        vals.splice(i,0,new Array());\r\n        for(var j=0;j<3;j++)\r\n        vals[i].splice(i,0,0);\r\n    }\r\n\r\n    i=Math.floor(Math.random() * 10)%3;\r\n    j=(i+1)%3;\r\n\r\n    let cnt=1;\r\n    while(cnt<=9)\r\n    {       \r\n        if(i==-1 && j==n)\r\n        {\r\n            j=n-2;\r\n            i=0;\r\n        }else\r\n        {\r\n            if(i<0)\r\n            i=n-1;\r\n\r\n            if(j==n)\r\n            j=0;\r\n        }\r\n        if(vals[i][j]!=0)\r\n        {\r\n            i++;\r\n            j-=2;\r\n            continue;\r\n        }\r\n        \/\/ console.log(i,j);\r\n        \/\/ console.log(j);\r\n        vals[i][j]=cnt++;\r\n        \/\/ console.log(vals[i][j]);\r\n        \r\n        j++;\r\n        i--;\r\n    }\r\n    document.getElementById('one').value=vals[0][0];\r\n    document.getElementById('two').value=vals[0][1];\r\n    document.getElementById('three').value=vals[0][2];\r\n    document.getElementById('four').value=vals[1][0];\r\n    document.getElementById('five').value=vals[1][1];\r\n    document.getElementById('six').value=vals[1][2];\r\n    document.getElementById('seven').value=vals[2][0];\r\n    document.getElementById('eight').value=vals[2][1];\r\n    document.getElementById('nine').value=vals[2][2];\r\n \r\n}<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
We are just implementing the magic square creation algorithm explained above and then we are displaying the calculated magic square by using getElementById and value.<\/p>\n
3. Creating JavaScript file- script.js<\/h4>\n
Let\u2019s understand with the help of code.<\/p>\n
Code:<\/strong><\/p>\n
function\u00a0start(){\r\n\u00a0\u00a0\u00a0\u00a0document.getElementById('score').innerHTML=\"\";\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0n=3;\r\n\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0one\u00a0=\u00a0parseInt(document.getElementById('one').value)\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0two\u00a0=\u00a0parseInt(document.getElementById('two').value)\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0three\u00a0=\u00a0parseInt(document.getElementById('three').value)\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0four\u00a0=\u00a0parseInt(document.getElementById('four').value)\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0five\u00a0=\u00a0parseInt(document.getElementById('five').value)\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0six\u00a0=\u00a0parseInt(document.getElementById('six').value)\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0seven\u00a0=\u00a0parseInt(document.getElementById('seven').value)\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0eight\u00a0=\u00a0parseInt(document.getElementById('eight').value)\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0nine\u00a0=\u00a0parseInt(document.getElementById('nine').value)\r\n\u00a0\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0vals\u00a0=\u00a0[[one,two,three],[four,five,six],[seven,eight,nine]];\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/checking\u00a0row\u00a0sum\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0sum=15; \r\n\u00a0\u00a0\u00a0\u00a0let\u00a0currsum=0;\r\n\u00a0\u00a0\u00a0\u00a0let\u00a0flag=1;\r\n\r\n\u00a0\u00a0\u00a0\u00a0for(let\u00a0i=0;i<3;i++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currsum\u00a0=0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/checking\u00a0row\u00a0sum\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(let\u00a0j=0;j<n;j++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currsum+=vals[i][j];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(currsum!=sum){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flag=0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currsum\u00a0=0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/checking\u00a0row\u00a0sum\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(flag)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for(let\u00a0j=0;j<n;j++){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currsum+=vals[j][i];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(currsum!=sum){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flag=0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0break;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\/\/checking\u00a0diagonals\r\n\u00a0\u00a0\u00a0\u00a0if(flag){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0currsum=0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0let\u00a0dsum\u00a0=\u00a0vals[0][0]\u00a0+\u00a0vals[1][1]\u00a0+\u00a0vals[2][2];\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(dsum!=sum)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flag=0;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(flag)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dsum\u00a0=\u00a0vals[0][2]\u00a0+\u00a0vals[1][1]\u00a0+vals[2][0];\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if(dsum!=sum)\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0flag=0;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0var\u00a0h1\u00a0=\u00a0document.createElement('h1');\r\n\u00a0\u00a0\u00a0\u00a0h1.setAttribute('id','result')\r\n\u00a0\u00a0\u00a0\u00a0if(flag){\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"won\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h1.setAttribute(\"class\",'won')\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0textNode=\u00a0document.createTextNode(\"You\u00a0Won!!!\");\r\n\u00a0\u00a0\u00a0\u00a0}else{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"lost\")\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var\u00a0textNode=\u00a0document.createTextNode(\"You\u00a0Lost!!!\");\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0h1.setAttribute(\"class\",'lost')\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\u00a0\u00a0\u00a0\u00a0h1.appendChild(textNode)\r\n\u00a0\u00a0\u00a0\u00a0document.getElementById('score').appendChild(h1);\r\n\r\n}\r\n<\/pre>\n
In this file, we have first created a 3*3 matrix that stores all the values entered by user, for which we have used simple DOM\u2019s (Document Object Model) getElementById() and to convert this string type input to int type, we have used parseInt(). Now as we have all the elements of magic square, we can simply check each row, column, diagonal sum.<\/p>\n
Magic sum of 3*3 magic square is given by n*(n^2+1)\/2 i.e. 15 in our case.<\/p>\n
We\u2019ll check the sum of every row and if we get a row sum not equal to 15 in any case we won\u2019t check further and thus use the variable flag. Similarly, we check for all columns and both diagonals. When all sums are equal to the magic sum, the flag will be 1 otherwise it will be zero.<\/p>\n
And the last thing is the \u2018game won\u2019 message, the game is won when the flag is 1, therefore we create a new element h1 in h1.score and display the message. Also we have added corresponding classes(\u2018won\u2019, \u2019lost\u2019) that change the color of the text.<\/p>\n
JavaScript Magic Square Output<\/h3>\n
\"javascript<\/a><\/p>\n
\"javascript<\/a><\/p>\n
Summary<\/h3>\n
We have successfully implemented magic square game using javascript in 2 easy steps. Now you can train your brain anytime with this.
A magic square is a 2D square matrix of distinct positive integers from 1 to n^2. It has a constant sum in every row, column, diagonal, which is known as magic sum. Algorithm to...<\/p>\n","protected":false},"author":5,"featured_media":90356,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18979],"tags":[103,20845,23046,23909],"class_list":["post-90350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-data-handling-in-audio-domain","tag-javascript-project","tag-javascript-project-for-beginners","tag-magic-square-game"],"yoast_head":"\nCreate a Magic Square in Javascript - DataFlair<\/title>\n<meta name=\"description\" content=\"Create a Magic Square in Javascript - A magic square is a 2D square matrix of distinct positive integers which has constant sum in every row, column, diagonal, which is known as magic sum.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Magic Square in Javascript - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Create a Magic Square in Javascript - A magic square is a 2D square matrix of distinct positive integers which has constant sum in every row, column, diagonal, which is known as magic sum.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-01T05:40:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-01T09:12:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2021\/04\/create-magic-square-javascript.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Magic Square in Javascript - DataFlair","description":"Create a Magic Square in Javascript - A magic square is a 2D square matrix of distinct positive integers which has constant sum in every row, column, diagonal, which is known as magic sum.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Create a Magic Square in Javascript - DataFlair","og_description":"Create a Magic Square in Javascript - A magic square is a 2D square matrix of distinct positive integers which has constant sum in every row, column, diagonal, which is known as magic sum.","og_url":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2021-04-01T05:40:20+00:00","article_modified_time":"2026-06-01T09:12:49+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2021\/04\/create-magic-square-javascript.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"Create a Magic Square in Javascript","datePublished":"2021-04-01T05:40:20+00:00","dateModified":"2026-06-01T09:12:49+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/"},"wordCount":567,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2021\/04\/create-magic-square-javascript.jpg","keywords":[". Data Handling in Audio Domain","JavaScript Project","javascript project for beginners","magic square game"],"articleSection":["JavaScript Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/","url":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/","name":"Create a Magic Square in Javascript - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2021\/04\/create-magic-square-javascript.jpg","datePublished":"2021-04-01T05:40:20+00:00","dateModified":"2026-06-01T09:12:49+00:00","description":"Create a Magic Square in Javascript - A magic square is a 2D square matrix of distinct positive integers which has constant sum in every row, column, diagonal, which is known as magic sum.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2021\/04\/create-magic-square-javascript.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2021\/04\/create-magic-square-javascript.jpg","width":1200,"height":628,"caption":"create magic square javascript"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/create-a-magic-square-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"JavaScript Tutorial","item":"https:\/\/data-flair.training\/blogs\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Create a Magic Square in Javascript"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/90350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=90350"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/90350\/revisions"}],"predecessor-version":[{"id":148745,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/90350\/revisions\/148745"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/90356"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=90350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=90350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=90350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}