JSDR213 · larryursini · Apr 21, 2023 · Apr 21, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<head>
+    <title>Ballin'Oates Know Baseball</title>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script defer src="script.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
+</head>
+
+<body>
+    <div class="wrapper">
+    <h1 class="h1">Ballin' Oates Knowz Baseball</h1>
+    <br>
+    <div id="parent" class="parent"></div>
+    <div id="currentImg"></div>
+    <h3 id = 'teamName'></h3>
+    <h4 id = 'batting'></h4>
+    <h4 id = 'pitching'></h4>
+    <button id="reset">Reset</button>
+    </div>
+</body>
diff --git a/script.js 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&region=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 = `<img src=${logoPNG}>`
+        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&region=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 = ""
+    });    
diff --git a/style.css 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;
+}