Add age and death clocks to about page.

views/main/index.css

@@ -61,6 +61,20 @@ body{
         justify-content: center;
     }
 
+.borderLine{
+    border-bottom: 1px solid black;
+    width: 100%;
+    margin: 10px 0;
+}
+
+.center{
+    text-align: center;
+}
+
+.boldy{
+    font-weight: bold;
+}
+
 #menu{
     display: flex;
     flex-direction: column;
@@ -98,6 +112,26 @@ body{
     width: 100%;
 }
 
+#about{
+    height: 100%;
+}
+
+    #about h2{
+        text-decoration: underline;
+        margin-bottom: 15px;
+    }
+
+    .aboutLeft{
+        width: 25%;
+        padding: 10px;
+        border-right: 1px solid black;
+        height: 100%;
+    }
+
+    #ageDiv > p, #deathDiv > p{
+        margin-top: 5px;
+    }
+
 #blog{
     display: flex;
     flex-direction: column;

views/main/index.html

@@ -69,6 +69,43 @@
 
         <div id="main">
             <div id="about">
+                <div class="aboutLeft">
+                    <h2 class="center">Critical Statistics</h2>
+
+                    <h3>Name: Lee Morgan</h3>
+
+                    <p>Gender: Male</p>
+
+                    <p>Born: March 9, 1990</p>
+
+                    <p>SSA Life Expectancy: 81.2 years</p>
+
+                    <p>Likely Death: May 1, 2071</p>
+
+                    <div class="borderLine"></div>
+
+                    <div id=ageDiv>
+                        <h3 class="center">Age</h3>
+                        <p id="age"></p>
+                        <p><span class="boldy">Years: </span><span id="ageYears"></span></p>
+                        <p><span class="boldy">Days: </span><span id="ageDays"></span></p>
+                        <p><span class="boldy">Hours: </span><span id="ageHours"></span></p>
+                        <p><span class="boldy">Minutes: </span><span id="ageMinutes"></span></p>
+                        <p><span class="boldy">Seconds: </span><span id="ageSeconds"></span></p>
+                    </div>
+
+                    <div class="borderLine"></div>
+
+                    <div id=deathDiv>
+                        <h3 class="center">Time to Likely Death</h3>
+                        <p id="death"></p>
+                        <p><span class="boldy">Years: </span><span id="deathYears"></span></p>
+                        <p><span class="boldy">Days: </span><span id="deathDays"></span></p>
+                        <p><span class="boldy">Hours: </span><span id="deathHours"></span></p>
+                        <p><span class="boldy">Minutes: </span><span id="deathMinutes"></span></p>
+                        <p><span class="boldy">Seconds: </span><span id="deathSeconds"></span></p>
+                    </div>
+                </div>
                 <a href="/resume">Resume</a>
             </div>
 
@@ -233,6 +270,71 @@
                 return galleryList;
             }
 
+            //Age display
+            let ageYears = document.getElementById("ageYears");
+            let ageDays = document.getElementById("ageDays");
+            let ageHours = document.getElementById("ageHours");
+            let ageMinutes = document.getElementById("ageMinutes");
+            let ageSeconds = document.getElementById("ageSeconds");
+
+            let dYears = document.getElementById("deathYears");
+            let dDays = document.getElementById("deathDays");
+            let dHours = document.getElementById("deathHours");
+            let dMinutes = document.getElementById("deathMinutes");
+            let dSeconds = document.getElementById("deathSeconds");
+
+            let msYear = 1000 * 60 * 60 * 24 * 365;
+            let birth = new Date(Date.UTC(90, 2, 9, 10, 5));
+            let death = new Date(birth.getTime() + (msYear * 81.2));
+            
+            let displayAge = ()=>{
+                let now = new Date();
+                let msDiff = now - birth;
+                let deathDiff = death - now;
+                let msDay = 1000 * 60 * 60 * 24;
+                let msHour = 1000 * 60 * 60;
+                let msMinute = 1000 * 60;
+                let msSecond = 1000;
+
+                ageYears.innerText = msDiff / msYear;
+                ageDays.innerText = msDiff / msDay;
+                ageHours.innerText = msDiff / msHour;
+                ageMinutes.innerText = msDiff / msMinute;
+                ageSeconds.innerText = parseInt(msDiff / msSecond);
+
+                dYears.innerText = deathDiff / msYear;
+                dDays.innerText = deathDiff / msDay;
+                dHours.innerText = deathDiff / msHour;
+                dMinutes.innerText = deathDiff / msMinute;
+                dSeconds.innerText = parseInt(deathDiff / msSecond);
+
+                let years = Math.floor(msDiff / msYear);
+                msDiff -= msYear * years;
+                let days = Math.floor(msDiff / msDay);
+                msDiff -= msDay * days;
+                let hours = Math.floor(msDiff / msHour);
+                msDiff -= msHour * hours;
+                let minutes = Math.floor(msDiff / msMinute);
+                msDiff -= msMinute * minutes;
+                let seconds = Math.floor(msDiff / msSecond);
+
+                let deathYears = Math.floor(deathDiff / msYear);
+                deathDiff -= msYear * deathYears;
+                let deathDays = Math.floor(deathDiff / msDay);
+                deathDiff -= msDay * deathDays;
+                let deathHours = Math.floor(deathDiff / msHour);
+                deathDiff -= msHour * deathHours;
+                let deathMinutes = Math.floor(deathDiff / msMinute);
+                deathDiff -= msMinute * deathMinutes;
+                let deathSeconds = Math.floor(deathDiff / msSecond);
+
+                document.getElementById("age").innerText = `${years} years, ${days} days, ${hours} hours, ${minutes} minutes and ${seconds} seconds`;
+                document.getElementById("death").innerText = `${deathYears} years, ${deathDays} days, ${deathHours} hours, ${deathMinutes} minutes and ${deathSeconds} seconds`;
+            }
+
+            displayAge();
+            setInterval(displayAge, 1000);
+
             //Get blog content
             let populateBlogs = (blogs)=>{
                 let container = document.getElementById("blogs");