fdel/puppeteer-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Building out game schedule HTML and Javascript, small CSS changes

Browse Source
This commit is contained in:
Frank Delaguila
2022-10-05 00:23:51 -06:00
parent 35db237c6f
commit ee2beb2769
5 changed files with 105 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
db.js
View File

@@ -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
}
]
}

17
index.html
View File

@@ -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">
<h2 id="utahScore" class="text-4xl font-black text-red">36</h2>
<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 id="game-panel-container">
<!-- This is where the game data comes into play! -->
</div>
</section>
</div>

13
scraper.js
View File

@@ -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()
}
);
} );

26
scripts.js
View File

@@ -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);
} );

31
styles.css
View File

@@ -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 {
color: #c00;
.game-panel {
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 {