From a5b26a6a9ce5b6f841414d644bf8fa051a1668b2 Mon Sep 17 00:00:00 2001 From: larryursini <39272661+larryursini@users.noreply.github.com> Date: Fri, 21 Apr 2023 16:45:40 -0400 Subject: [PATCH 1/2] working not styled --- index.html | 20 ++++++++++++++ script.js | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 33 +++++++++++++++++++++++ 3 files changed, 132 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css 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..ee724d6 --- /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 = 'teambutt' + parent.appendChild(newDiv) + let parentDiv = document.querySelector(`#team${i}`) + parentDiv.appendChild(newButt) +} + +//array of img of teams +let teamDivArray = document.querySelectorAll('.teambutt') + +//event listener for each team + +$(document).ready(function(){ + //team info + $(".teambutt").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 + $(".teambutt").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..939226e --- /dev/null +++ b/style.css @@ -0,0 +1,33 @@ +.teamdiv { + height: 100%; + width: 100%; + display: block; +} + +.teambutt { + 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 From 2f0380c6f86a8159ded227870e8182fa3d1a8702 Mon Sep 17 00:00:00 2001 From: larryursini <39272661+larryursini@users.noreply.github.com> Date: Fri, 21 Apr 2023 16:53:59 -0400 Subject: [PATCH 2/2] changed variable name --- script.js | 8 ++++---- style.css | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index ee724d6..5356a27 100644 --- a/script.js +++ b/script.js @@ -18,20 +18,20 @@ for (let i = 1; i <= 30; i++) { newDiv.className = 'teamdiv' newButt.setAttribute("src", `https://a.espncdn.com/i/teamlogos/mlb/500/${shortNames[i]}.png`) newButt.id = i - newButt.className = 'teambutt' + newButt.className = 'teamPNG' parent.appendChild(newDiv) let parentDiv = document.querySelector(`#team${i}`) parentDiv.appendChild(newButt) } //array of img of teams -let teamDivArray = document.querySelectorAll('.teambutt') +let teamDivArray = document.querySelectorAll('.teamPNG') //event listener for each team $(document).ready(function(){ //team info - $(".teambutt").click(async (evt) =>{ + $(".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` @@ -52,7 +52,7 @@ $(document).ready(function(){ }); //team stats - $(".teambutt").click(async (evt) =>{ + $(".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` diff --git a/style.css b/style.css index 939226e..19b8071 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ display: block; } -.teambutt { +.teamPNG { height: 100%; width: 100%; display: block;