Building out game schedule HTML and Javascript, small CSS changes

db.js

@@ -12,73 +12,97 @@ const dbData = {
       "opponent": "florida",
       "date": "Sep 3, 2022",
       "utah_score": 26,
-      "opponent_points": 29
+      "opponent_points": 29,
+      "win": false,
+      "gameHappened": true
     },
     {
       "opponent": "southernutah",
       "date": "Sep 10, 2022",
       "utah_score": 73,
-      "opponent_points": 7
+      "opponent_points": 7,
+      "win": true,
+      "gameHappened": true
     },
     {
       "opponent": "sandiegostate",
       "date": "Sep 17, 2022",
       "utah_score": 35,
-      "opponent_points": 7
+      "opponent_points": 7,
+      "win": true,
+      "gameHappened": true
     },
     {
       "opponent": "arizonastate",
       "date": "Sep 24, 2022",
       "utah_score": 34,
-      "opponent_points": 13
+      "opponent_points": 13,
+      "win": true,
+      "gameHappened": true
     },
     {
       "opponent": "oregonstate",
       "date": "Oct 1, 2022",
       "utah_score": 42,
-      "opponent_points": 16
+      "opponent_points": 16,
+      "win": true,
+      "gameHappened": true
     },
     {
       "opponent": "ucla",
       "date": "Oct 8, 2022",
       "utah_score": 0,
-      "opponent_points": 0
+      "opponent_points": 0,
+      "win": false,
+      "gameHappened": false
     },
     {
       "opponent": "usc",
       "date": "Oct 15, 2022",
       "utah_score": 0,
-      "opponent_points": 0
+      "opponent_points": 0,
+      "win": false,
+      "gameHappened": false
     },
     {
       "opponent": "washingtonstate",
       "date": "Oct 27, 2022",
       "utah_score": 0,
-      "opponent_points": 0
+      "opponent_points": 0,
+      "win": false,
+      "gameHappened": false
     },
     {
       "opponent": "arizona",
       "date": "Nov 5, 2022",
       "utah_score": 0,
-      "opponent_points": 0
+      "opponent_points": 0,
+      "win": false,
+      "gameHappened": false
     },
     {
       "opponent": "stanford",
       "date": "Nov 12, 2022",
       "utah_score": 0,
-      "opponent_points": 0
+      "opponent_points": 0,
+      "win": false,
+      "gameHappened": false
     },
     {
       "opponent": "oregon",
       "date": "Nov 19, 2022",
       "utah_score": 0,
-      "opponent_points": 0
+      "opponent_points": 0,
+      "win": false,
+      "gameHappened": false
     },
     {
       "opponent": "colorado",
       "date": "Nov 26, 2022",
       "utah_score": 0,
-      "opponent_points": 0
+      "opponent_points": 0,
+      "win": false,
+      "gameHappened": false
     }
   ]
 }

index.html

@@ -44,20 +44,11 @@
 
       <section class="py-12" aria-label="Team Game Schedule">
         <h2 class="text-2xl font-black text-center mb-12 section-header">Game Schedule</h2>
-        <div class="items-center flex justify-evenly">
+
-          <div class="text-center">
+        <div id="game-panel-container">
-            <h2 id="utahScore" class="text-4xl font-black text-red">36</h2>
+          <!-- This is where the game data comes into play! -->
-            <h3 id="opponent" class="text-xl uppercase font-black">Utah</h3>
-          </div>
-          <div class="text-center">
-            <h2 class="text-4xl uppercase font-black game-versus">VS</h2>
-            <h3 class="text-2xl uppercase font-black">Sep 3, 2022</h3>
-          </div>
-          <div class="text-center">
-            <h2 id="opponentScore" class="text-4xl font-black text-red">29</h2>
-            <h3 id="opponent" class="text-xl uppercase font-black">Florida</h3>
-          </div>
         </div>
+
       </section>
 
     </div>

scraper.js

@@ -103,11 +103,22 @@ puppeteer
       // }
       dates.forEach( (date, index) => {
         let key = opponents[index].textContent.replace( /([([)0-9^\s])/g, '' ).toLowerCase().trim();
+
+        const gameDate = new Date(date.textContent);
+        let currentDate = new Date();
+        var dd = String(currentDate.getDate()).padStart(2, '0');
+        var mm = String(currentDate.getMonth() + 1).padStart(2, '0'); //January is 0!
+        var yyyy = currentDate.getFullYear();
+
+        currentDate = new Date(`${mm} ${dd}, ${yyyy}`);
+
         team.games.push({
             opponent: key,
             date: date.textContent,
             utah_score: utah_score[index].textContent !== '' ? Number(utah_score[index].textContent) : 0,
-            opponent_points: opponent_points[index].textContent !== '' ? Number(opponent_points[index].textContent) : 0
+            opponent_points: opponent_points[index].textContent !== '' ? Number(opponent_points[index].textContent) : 0,
+            win: Number(utah_score[index].textContent) > Number(opponent_points[index].textContent) ? true : false,
+            gameHappened: currentDate.getTime() > gameDate.getTime()
           }
         );
       } );

scripts.js

@@ -62,6 +62,30 @@ const passAttempts = new Chart(document.getElementById('passAttempts'), {
   }
 });
 
+
+
 dbData.games.forEach( game => {
-  console.log( game );
+  const container = document.getElementById('game-panel-container');
+
+  let gamePanelHtml = '<div class="drop-shadow flex game-panel items-center text-white justify-evenly">';
+
+  gamePanelHtml += '<div class="text-center">';
+  gamePanelHtml += `<h2 id="utahScore" class="text-4xl font-black">${game.utah_score !== 0 ? game.utah_score : 'TBA'}</h2>`;
+  gamePanelHtml += '<h3 id="utah" class="text-xl uppercase font-black">Utah</h3>';
+  gamePanelHtml += '</div>';
+
+  gamePanelHtml += '<div class="text-center">';
+  gamePanelHtml += '<h2 class="text-4xl uppercase font-black game-versus">VS</h2>';
+  gamePanelHtml += `<h3 class="text-2xl uppercase font-black">${game.date}</h3>`;
+  gamePanelHtml += `<p class="text-md font-black">${game.win ? 'Win' : (!game.gameHappened ? 'TBA' : 'Loss')}</p>`;
+  gamePanelHtml += '</div>';
+
+  gamePanelHtml += '<div class="text-center">';
+  gamePanelHtml += `<h2 id="opponentScore" class="text-4xl font-black">${game.opponent_points !== 0 ? game.opponent_points : 'TBA'}</h2>`;
+  gamePanelHtml += `<h3 id="opponent" class="text-xl uppercase font-black">${game.opponent}</h3>`;
+  gamePanelHtml += '</div>';
+
+  gamePanelHtml += '</div>';
+
+  container.insertAdjacentHTML('beforeend', gamePanelHtml);
 } );

styles.css

@@ -1,5 +1,6 @@
 html, body {
   background-color: #f8f8f8;
+  color: #18191B;
 }
 
 .hero:before {
@@ -28,12 +29,36 @@ html, body {
   content: '';
   width: 4rem;
   background-color: #c00;
-  height: 1px;
+  height: 4px;
   margin: 1rem auto;
 }
 
-.game-versus {
+.game-panel {
-  color: #c00;
+  border: 1px solid #efefef;
+  background-color: #c00;
+  padding: 1.5rem 0;
+  transform: skew(-45deg);
+  margin: 2rem 0;
+}
+
+#game-panel-container:nth-child(2) .game-panel {
+  margin-top: 0;
+}
+
+#game-panel-container .game-panel:last-child {
+  margin-bottom: 0;
+}
+
+/* #game-panel-container:nth-child(2) .game-panel {
+  margin-top: 0;
+}
+
+#game-panel-container:last-child .game-panel {
+  margin-bottom: 0;
+} */
+
+.game-panel div {
+  transform: skew(45deg);
 }
 
 footer {