Added date to the startpage and option to disable it.

config.json

@@ -30,5 +30,6 @@
     }
   ],
   "user": "Deepjyoti",
-  "disableMessage": true
+  "disableMessage": false,
+  "disableDate": false
 }

css/main.css

@@ -1,7 +1,14 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
-.roboto, body {
+.roboto {
   font-family: 'Roboto', sans-serif; }
 
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("../fonts/woff/JetBrainsMono-Regular.woff") format("woff"), url("../fonts/woff2/JetBrainsMono-Regular.woff2") format("woff2"); }
+
+.jetbrains-mono, body {
+  font-family: 'JetBrains Mono'; }
+
 body {
   height: 97.5vh;
   display: flex;
@@ -13,12 +20,14 @@ body {
 .main {
   width: 100%;
   text-align: center; }
-  .main #message {
-    padding-bottom: 35px; }
+  .main #date-text {
+    padding-top: 15px;
+    color: #d9d9d9; }
   .main #search-bar {
     width: 50%;
     margin: 0 auto 50px auto;
-    height: 45px; }
+    height: 45px;
+    padding-top: 35px; }
     .main #search-bar input {
       height: inherit;
       width: 100%;

index.html

@@ -12,6 +12,9 @@
         <div id="message">
             <h1 id="message-text">Hey Deepjyoti, Good Morning!</h1>
         </div>
+        <div id="date">
+            <h2 id="date-text">13 May, 11:30</h2>
+        </div>
         <div id="search-bar">
             <input id="search-bar-input" placeholder="Search something on Google"></input>
         </div>

js/main.js

@@ -4,6 +4,8 @@ window.onload = function() {
 
 searchBarId = "search-bar-input"
 messageDivId = "message"
+dateDivId = "date"
+dateId = "date-text"
 messageId = "message-text"
 otherContentId = "other-content"
 userName = "Deepjyoti"
@@ -13,6 +15,20 @@ bgClassContainer = [
     "social",
     "others"
 ]
+dateMap = {
+    0: "Jan",
+    1: "Feb",
+    2: "Mar",
+    3: "Apr",
+    4: "May",
+    5: "Jun",
+    6: "Jul",
+    7: "Aug",
+    8: "Sep",
+    9: "Oct",
+    10: "Nov",
+    11: "Dec"
+}
 
 function initBody() {
     /**
@@ -70,6 +86,25 @@ function buildMsg() {
         return ""
 }
 
+function updateTime() {
+    /**
+     * Get the current time and date and return it.
+     */
+    currentDate = new Date()
+    date = currentDate.getDate()
+    month = dateMap[currentDate.getMonth()]
+    time = currentDate.getHours() + ":" + currentDate.getMinutes()
+    finalDate = date + " " + month + ", " + time
+    document.getElementById(dateId).textContent = finalDate
+}
+
+function updateTimeHook() {
+    updateTime()
+    interval = setInterval(() => {
+        updateTime()
+    }, 30 * 1000)
+}
+
 function inRange(number, min, max) {
     return (number >= min && number <= max)
 }
@@ -96,9 +131,12 @@ function parseAndCreate(jsonData) {
     document.getElementById(messageId).textContent = builtMsg
 
     // Check if welcome message is supposed to be disabled
-    disableMsg = jsonData["disableMessage"]
-    if (disableMsg)
+    if (jsonData["disableMessage"])
         document.getElementById(messageDivId).style.display = "none"
+    if (jsonData["disableDate"])
+        document.getElementById(dateDivId).style.display = "none"
+    else
+        updateTimeHook()
 
 
     sqrs = jsonData["squares"]

scss/main.scss

@@ -10,6 +10,17 @@ $others: #81C784;
     font-family: 'Roboto', sans-serif;
 }
 
+// JetBrains Mono
+@font-face {
+    font-family: "JetBrains Mono";
+    src: url("../fonts/woff/JetBrainsMono-Regular.woff") format("woff"),
+         url("../fonts/woff2/JetBrainsMono-Regular.woff2") format("woff2");
+}
+
+.jetbrains-mono {
+    font-family: 'JetBrains Mono';
+}
+
 body {
     height: 97.5vh;
     display: flex;
@@ -17,21 +28,23 @@ body {
     justify-content: center;
     background: $background;
     color: $foreground;
-    @extend .roboto;
+    @extend .jetbrains-mono;
 }
 
 .main {
     width: 100%;
     text-align: center;
 
-    #message {
-        padding-bottom: 35px;
+    #date-text {
+        padding-top: 15px;
+        color: darken($foreground, 15);
     }
 
     #search-bar {
         width: 50%;
         margin: 0 auto 50px auto;
         height: 45px;
+        padding-top: 35px;
 
         input {
             height: inherit;