From f898c53b17fe10b5b8fb35ca66dce5396de9d9bf Mon Sep 17 00:00:00 2001
From: lifeadventurer <life0adventurer@gmail.com>
Date: Fri, 24 Nov 2023 20:20:39 +0800
Subject: [PATCH] feat: add last update time info to card footers

Enhance generator gallery by displaying the time difference since the last update in the footer by each card. This information is obtained from the GitHub API for the specified folders.
---
 index.html | 27 ++++++++++++++++----------
 scripts.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 styles.css |  5 +++++
 3 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 scripts.js

diff --git a/index.html b/index.html
index f4052a9..1823ae8 100644
--- a/index.html
+++ b/index.html
@@ -26,24 +26,30 @@
     <div class="container">
       <div class="row">
         <div class="col-md-6">
-          <div class="card mb-3">
-            <img class="card-img-top" src="./images/fortune_generator_example.png">
+          <div class="card mb-3 bg-dark text-white border-0">
+            <img class="card-img-top" src="./images/fortune_generator_example.png" alt="fortune generator example">
             <!-- <video src="#" autoplay></video> -->
             <div class="card-body">
-              <h5 class="card-title">Fortune Generator</h5>
-              <p class="card-text">Get your daily fortune by clicking the check in button</p>
-              <a href="./fortune_generator/" class="btn btn-dark">Check this out</a>
+              <h4 class="card-title">Fortune Generator</h4>
+              <p class="card-text">Get your daily fortune with just a click.</p>
+              <a href="./fortune_generator/" class="btn btn-secondary">Check this out</a>
+            </div>
+            <div class="card-footer">
+              <div id="last-update-1"></div>
             </div>
           </div>
         </div>
         <div class="col-md-6">  
-          <div class="card">
-            <img class="card-img-top" src="./images/quote_generator_example_(2).png">
+          <div class="card mb-3 bg-dark text-white border-0">
+            <img class="card-img-top" src="./images/quote_generator_example_(2).png" alt="quote generator example">
             <!-- <video src="#" autoplay></video> -->
             <div class="card-body">
-              <h5 class="card-title">Quote Generator</h5>
-              <p class="card-text">Get your daily quote by clicking a button</p>
-              <a href="./quote_generator/" class="btn btn-dark">Check this out</a>
+              <h4 class="card-title">Quote Generator</h4>
+              <p class="card-text">Generate inspiring and thought-provoking quotes effortlessly.</p>
+              <a href="./quote_generator/" class="btn btn-secondary">Check this out</a>
+            </div>
+            <div class="card-footer">
+              <div id="last-update-2"></div>
             </div>
           </div>
         </div>
@@ -55,5 +61,6 @@
       <h5>made by <b>LifeAdventurer</b> <img src="./images/lifeadventurer.jpg" alt="footer image" style="width: 4%;"></h5>
     </div>
   </footer>
+  <script src="./scripts.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/scripts.js b/scripts.js
new file mode 100644
index 0000000..449f25c
--- /dev/null
+++ b/scripts.js
@@ -0,0 +1,56 @@
+const repoOwner = 'LifeAdventurer'; 
+const repoName = 'generators'; 
+const folderPath_1 = 'fortune_generator';
+const folderPath_2  = 'quote_generator';
+const apiUrl_1 = `https://api.github.com/repos/${repoOwner}/${repoName}/commits?path=${folderPath_1}`;
+const apiUrl_2 = `https://api.github.com/repos/${repoOwner}/${repoName}/commits?path=${folderPath_2}`;
+
+let timeSinceLastUpdate_1;
+fetch(apiUrl_1)
+.then(response => response.json())
+.then(data => {
+  let lastCommit = data[0].commit.author.date; 
+  const commitTimeStamp = new Date(lastCommit).getTime() / 1000;
+  const currentTimeStamp = Math.floor(new Date().getTime() / 1000);
+  const timeDifference = currentTimeStamp - commitTimeStamp;
+  
+  timeSinceLastUpdate_1 = formatTimeDifference(timeDifference);
+  $('#last-update-1').html(`Last updated ${timeSinceLastUpdate_1} ago`)
+})
+.catch(error => console.error('Error fetching data:', error));
+
+
+let timeSinceLastUpdate_2;
+fetch(apiUrl_2)
+.then(response => response.json())
+.then(data => {
+  let lastCommit = data[0].commit.author.date; 
+  const commitTimeStamp = new Date(lastCommit).getTime() / 1000;
+  const currentTimeStamp = Math.floor(new Date().getTime() / 1000);
+  const timeDifference = currentTimeStamp - commitTimeStamp;
+  
+  timeSinceLastUpdate_2 = formatTimeDifference(timeDifference);
+  $('#last-update-2').html(`Last updated ${timeSinceLastUpdate_2} ago`)
+})
+.catch(error => console.error('Error fetching data:', error));
+
+function formatTimeDifference(seconds){
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if(days > 0){
+    return `${days} day${days > 1 ? 's' : ''}`;
+  }
+  else if(hours > 0){
+    return `${hours} hour${hours > 1 ? 's' : ''}`;    
+  }
+  else if(minutes > 0){
+    return `${minutes} minute${minutes > 1 ? 's' : ''}`;
+  }
+  else{
+    return `${seconds} second${seconds > 1 ? 's' : ''}`;
+  }
+}
+
+// $('#last-update-2').html(`Last updated ${timeSinceLastUpdate} ago`)
\ No newline at end of file
diff --git a/styles.css b/styles.css
index df92442..d2b4973 100644
--- a/styles.css
+++ b/styles.css
@@ -10,4 +10,9 @@ h1 {
 
 .container {
   margin-top: 30px;
+}
+
+.card-footer {
+  background-color: #343a40;
+  color: #adb5bd; 
 }
\ No newline at end of file