Added reading from config.

config.json

@@ -0,0 +1,25 @@
+{
+  "squares": [
+    { "name": "reddit", "links": [
+        { "name": "SkincareAddiction", "url": "https://www.reddit.com/r/SkincareAddiction/" },
+        { "name": "MakeupAddiction", "url": "https://www.reddit.com/r/MakeupAddiction/" },
+        { "name": "dwarffortress", "url": "https://www.reddit.com/r/dwarffortress/" },
+        { "name": "unixporn", "url": "https://www.reddit.com/r/unixporn/" }
+      ]
+    },
+    { "name": "media", "links": [
+        { "name": "Netflix", "url": "https://www.netflix.com/" },
+        { "name": "goodreads", "url": "https://www.goodreads.com/" },
+        { "name": "imgur", "url": "http://imgur.com/" }
+      ]
+    },
+    { "name": "programming", "links": [
+        { "name": "GitHub", "url": "https://github.com/" },
+        { "name": "stackoverflow", "url": "https://stackoverflow.com/" },
+        { "name": "MDN Web Docs", "url": "https://developer.mozilla.org/bm/" },
+        { "name": "cppreference", "url": "http://en.cppreference.com/w/" }
+      ]
+    }
+  ],
+  "user": "Deepjyoti"
+}

css/main.css

@@ -38,11 +38,13 @@ body {
       .main #search-bar {
         width: 65%; } }
   .main #other-content {
-    margin: 20px auto;
+    margin: 40px auto;
     padding: 10px 0; }
     .main #other-content .sqr {
+      vertical-align: top;
       display: inline-block;
-      margin: 20px 5px 0 5px;
+      margin-left: 5px;
+      margin-right: 5px;
       width: 170px;
       background: #2e2e2e;
       padding: 15px 15px;

index.html

@@ -16,13 +16,13 @@
             <input id="search-bar-input" placeholder="Search something on Google"></input>
         </div>
         <div id="other-content">
-            <div class="sqr media">
+            <!--div class="sqr media">
                 <h4>Media</h4>
                 <a href="https://open.spotify.com/">Spotify</a>
                 <a href="https://music.youtube.com/">Youtube Music</a>
                 <a href="https://netflix.com">Netflix</a>
                 <a href="https://youtube.com">Youtube</a>
-            </div>
+            </!--div>
             <div class="sqr work">
                 <h4>Work</h4>
                 <a href="https://github.com">Github</a>
@@ -37,13 +37,13 @@
                 <a href="https://www.reddit.com/r/unixporn/">r/unixporn</a>
                 <a href="https://www.reddit.com/r/MechanicalKeyboards/">r/mk</a>
             </div>
-            <div class="sqr others">
+            <div-- class="sqr others">
                 <h4>Others</h4>
                 <a href="http://localhost:7474/">neo4j local</a>
                 <a href="http://rarbg.to">rarbg</a>
                 <a href="http://materialuicolors.co/">materialui colors</a>
                 <a href="http://gmail.com/">Gmail</a>
-            </div>
+            </div-->
         </div>
     </div>
     <!--Custom JS-->

js/main.js

@@ -4,7 +4,14 @@ window.onload = function() {
 
 searchBarId = "search-bar-input"
 messageId = "message-text"
+otherContentId = "other-content"
 userName = "Deepjyoti"
+bgClassContainer = [
+    "media",
+    "work",
+    "social",
+    "others"
+]
 
 function initBody() {
     /**
@@ -29,6 +36,9 @@ function initBody() {
     builtMsg == "" ? 
         builtMsg = `Hello ${userName}` : builtMsg = `Hey ${userName}, ${builtMsg}!`
     document.getElementById(messageId).textContent = builtMsg
+
+    // Read the json file
+    json = readJSON("config.json")
 }
 
 function buildMsg() {
@@ -66,4 +76,64 @@ function buildMsg() {
 
 function inRange(number, min, max) {
     return (number >= min && number <= max)
+}
+
+function readJSON(fileName) {
+    // Load the data of the passed file.
+    fetch(fileName)
+        .then(response => {return response.json()})
+        .then(jsonData => {
+            parseAndCreate(jsonData)
+        })
+}
+
+function parseAndCreate(jsonData) {
+    /**
+     * Parse the passed jsonData and create div's accordingly.
+     */
+    this.userName = jsonData["user"]
+    sqrs = jsonData["squares"]
+
+    sqrs.forEach((element, index) => {
+        sqr = createSqr(element, index)
+        document.getElementById(otherContentId).appendChild(sqr)
+    })
+}
+
+function createSqr(sqrData, index) {
+    // Create a new square division with the passed element
+    name = sqrData["name"]
+    links = sqrData["links"]
+
+    div = document.createElement("div")
+    cls = document.createAttribute("class")
+    div.setAttributeNode(cls)
+    div.classList.add("sqr")
+
+    if (index > bgClassContainer.length - 1)
+        customClass = "media"
+    else
+        customClass = bgClassContainer[index]
+    div.classList.add(customClass)
+
+    h4 = document.createElement("h4")
+    h4.textContent = name
+
+    div.appendChild(h4)
+
+    links.forEach(element => {
+        aName = element["name"]
+        aHref = element["url"]
+        
+        a = document.createElement("a")
+        attrHref = document.createAttribute("href")
+        attrHref.value = aHref
+        a.setAttributeNode(attrHref)
+
+        a.textContent = aName
+
+        div.appendChild(a)
+    })
+
+    return div
 }

scss/main.scss

@@ -59,12 +59,14 @@ body {
     }
 
     #other-content {
-        margin: 20px auto;
+        margin: 40px auto;
         padding: 10px 0;
 
         .sqr {
+            vertical-align: top;
             display: inline-block;
-            margin: 20px 5px 0 5px;
+            margin-left: 5px;
+            margin-right: 5px;
             width: 170px;
             background: lighten($background, 5);
             padding: 15px 15px;
@@ -74,7 +76,7 @@ body {
             h4 {
                 font-size: 18px;
                 margin: 15px;
-            }
+          }
 
             &:hover {
                 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);