set social links, auto update clock, update readme

README.md

@@ -1,3 +1,14 @@
 "Web Browser Homepage" is a custom homepage / new tab page built for web browsers.
 <br><br>
 <img src="img/preview.png"></img>
+
+To access this page, paste the following URL:<br/>
+`https://raw.githack.com/k-capehart/Web-Browser-Homepage/master/index.html`
+
+Alternatively, pull down the repository and set your Homepage URL to the local file path, i.e.<br/>
+`/Users/kcapehart/Documents/Web-Browser-Homepage/index.html`
+
+Learn how to set a startup / homepage in:
+- [Google Chrome](https://support.google.com/chrome/answer/95314?hl=en&co=GENIE.Platform%3DDesktop#zippy=)
+- [Firefox](https://support.mozilla.org/en-US/kb/how-to-set-the-home-page)
+- [Safari](https://support.apple.com/guide/safari/change-your-homepage-ibrw1020/mac)

index.html

@@ -7,7 +7,7 @@
     <link href="styles.css" type="text/css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
-    <link rel="icon" type="image/x-icon" href="/img/favicon.png">
+    <link rel="icon" type="image/x-icon" href="./img/favicon.png">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
 </head>
@@ -24,14 +24,15 @@
         <div id="question">What's on your mind?</div>
         <div class="icons">
             <ul>
-                <li><a href="#"><i class="fa-brands fa-facebook"></i></a></li>
-                <li><a href="#"><i class="fa-brands fa-youtube"></i></a></li>
-                <li><a href="#"><i class="fa-brands fa-github"></i></a></li>
-                <li><a href="#"><i class="fa-brands fa-reddit"></i></a></li>
-                <li><a href="#"><i class="fa-solid fa-video"></i></a></li>
+                <li><a href="https://www.youtube.com/"><i class="fa-brands fa-youtube"></i></a></li>
+                <li><a href="https://github.com"><i class="fa-brands fa-github"></i></a></li>
+                <li><a href="https://www.linkedin.com/"><i class="fa-brands fa-linkedin"></i></a></li>
+                <li><a href="https://reddit.com/"><i class="fa-brands fa-reddit"></i></a></li>
+                <li><a href="https://mail.google.com/"><i class="fa-solid fa-envelope"></i></a></li>
             </ul>
         </div>
     </div>
     <script src="script.js"></script>
+    <script type="text/javascript" src="tiles.json"></script>
 </body>
 </html>

script.js

@@ -1,24 +1,28 @@
-// INITIALIZATIONS
+let timeOfDay;
+let today;
+let hour;
+let minute;
+let second;
+let day;
+let month;
+let year;
 
-// get/initialize time and date values - global variables
-let timeOfDay = "AM";
-let today = new Date();
-let hour = today.getHours();
-let minute = today.getMinutes();
-let second = today.getSeconds();
-let day = today.getDate();
-let month = today.getMonth();
-let year = today.getFullYear();
+function updateClock() {
+    timeOfDay = "AM";
+    today = new Date();
+    hour = today.getHours();
+    minute = today.getMinutes();
+    second = today.getSeconds();
+    day = today.getDate();
+    month = today.getMonth();
+    year = today.getFullYear();
     
-// check the time and adjust the format
-minute = checkTime(minute);
-second = checkTime(second);
-
-// CODE FOR THE SITE BACKGROUND
+    // check the time and adjust the format
+    minute = checkTime(minute);
+    second = checkTime(second);
+}
 
 function setBackgroundGradient() {
-    // Setting background gradients according to the time of the day
-
     if (hour < 5) {
         // early morning gradient
         document.querySelector('body').style.background="linear-gradient(-45deg, #767d92, #2f4562, #152642, #081b33)";
@@ -42,8 +46,6 @@ function setBackgroundGradient() {
     document.querySelector('body').style.animation="gradient 8s ease infinite";
 }
 
-// CODE FOR THE GLASS OVERLAY AND ITS CHILD COMPONENTS
-
 function loadGlassOverlayComponents() {
 
     // set the greeting message according the time of the day
@@ -113,6 +115,7 @@ function convertHour(hourValue) {
     return hourValue;
 }
 
-// jQuery function calls
 $(document).ready(setBackgroundGradient);
 $(document).ready(loadGlassOverlayComponents);
+updateClock();
+setInterval(updateClock, 1000);