diff --git a/index.html b/index.html new file mode 100644 index 0000000..b9a3415 --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + Ballin'Oates Know Baseball + + + + + + + +
+

Ballin' Oates Knowz Baseball

+
+
+
+

+

+

+ +
+ \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5356a27 --- /dev/null +++ b/script.js @@ -0,0 +1,79 @@ + +//variables to html +const parent = document.querySelector('#parent') +const imageDiv = document.querySelector("#currentImg") +const teamNameID = document.querySelector("#teamName") +const battingID = document.querySelector("#batting") +const pitchingID = document.querySelector("#pitching") + +//array of names of teams +const shortNames = ['poop', 'bal', 'bos', 'laa', 'chw', 'cle', 'det', 'kc', 'mil', 'min', 'nyy', 'oak', 'sea', 'tex', 'tor', + 'atl', 'chc', 'cin', 'hou', 'lad', 'wsh', 'nym', 'phi', 'pit', 'stl', 'sd', 'sf', 'col', 'mia', 'ari', 'tb'] + +//loop to create the divs and the images as a child of the div +for (let i = 1; i <= 30; i++) { + const newDiv = document.createElement('div') + const newButt = document.createElement('img') + newDiv.id = 'team'+i + newDiv.className = 'teamdiv' + newButt.setAttribute("src", `https://a.espncdn.com/i/teamlogos/mlb/500/${shortNames[i]}.png`) + newButt.id = i + newButt.className = 'teamPNG' + parent.appendChild(newDiv) + let parentDiv = document.querySelector(`#team${i}`) + parentDiv.appendChild(newButt) +} + +//array of img of teams +let teamDivArray = document.querySelectorAll('.teamPNG') + +//event listener for each team + +$(document).ready(function(){ + //team info + $(".teamPNG").click(async (evt) =>{ + let clicked = evt.target + let currentID = clicked.id + let mlbApi = `http://sports.core.api.espn.com/v2/sports/baseball/leagues/mlb/seasons/2023/teams/${currentID}?lang=en®ion=us` + let response = await axios.get(mlbApi) + + //variables to collect response data + const logoPNG = response.data.logos[2].href + const teamName = response.data.displayName + let teamColor = response.data.color + teamColor = '#' + teamColor + console.log(teamColor) + + //sending info to html + parent.style.display = "none" + imageDiv.innerHTML = `` + teamNameID.innerText = teamName + //change something to team color + + }); + //team stats + $(".teamPNG").click(async (evt) =>{ + let clicked = evt.target + let currentID = clicked.id + let mlbStats = `http://sports.core.api.espn.com/v2/sports/baseball/leagues/mlb/seasons/2023/types/2/teams/${currentID}/statistics?lang=en®ion=us` + let response = await axios.get(mlbStats) + + //variables to collect response data + const batting = response.data.splits.categories[0].summary + const pitching = response.data.splits.categories[1].summary + + //sending info to html + battingID.innerText = batting + pitchingID.innerText = pitching + + }); +}); + + //pick a new team + $("#reset").click( (evt) =>{ + parent.style.display = "grid" + imageDiv.innerHTML = `` + teamNameID.innerText = "" + battingID.innerText = "" + pitchingID.innerText = "" + }); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..19b8071 --- /dev/null +++ b/style.css @@ -0,0 +1,33 @@ +.teamdiv { + height: 100%; + width: 100%; + display: block; +} + +.teamPNG { + height: 100%; + width: 100%; + display: block; +} + +.parent { + width: 100vw; + padding: 8vw; + display: grid; + grid-template-columns: repeat(6, 1fr); + gap: 4vh; + grid-auto-rows: minmax(14vw, auto); +} + +.wrapper{ + width: 100vw; + +} + +.h1 { + text-align: center; +} + +body{ + width: 100vw; +} \ No newline at end of file