Updates to MLB fetch page

Greg Pfaff · Greg Pfaff · commit ac5a55ec1a56 · 2017-09-27T17:10:19.000-05:00
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
@@ -17,11 +17,14 @@
     transition: .25s ease-in-out;
   }
 
-  .container .title {
+  .container .title, h1 {
     color: black;
+    text-shadow: 1px 1px 1px gray;
+    text-transform: uppercase;
   }
 
  .container.active h1, .container.active .title {
+    text-shadow: 2px 2px 2px black;
     color: white;
   }
 
@@ -33,6 +36,7 @@
   .secret_test {
     appearance: none;
     padding: 10px;
+    text-transform: uppercase;
   }
 
 </style>
diff --git a/Fetch/index.html b/Fetch/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>MLB POSTSEASON SCHEDULE</title>
+	<link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+
+<body>
+
+	<div class="container">
+		<h1>Using Fetch</h1>
+		<div class="team">
+			<h2>Post Season Scoreboard</h2>
+			<ul class="games"></ul>
+		</div>
+	</div>
+	<script src="index.js"></script>
+</body>
+
+</html>
diff --git a/Fetch/index.js b/Fetch/index.js
@@ -0,0 +1,38 @@
+const games = document.querySelector('.games');
+const url = "http://gd2.mlb.com/components/game/mlb/year_2017/postseason_scoreboard.json"
+
+function createNode(element) {
+	return document.createElement(element);
+}
+
+function append(parent, child) {
+	return parent.appendChild(child);
+}
+
+fetch(url)
+	.then((resp) => resp.json())
+  .then((data) => {
+		const game_data = data.games;
+		return game_data.map((game) => {
+
+			let game_container = createNode('div')
+			let home_team = createNode('h3')
+			let away_team = createNode('h3')
+
+			game_container.classList.add('game');
+			home_team.classList.add('team');
+			away_team.classList.add('team');
+
+			home_team.innerHTML = `${game.home_team_city} ${game.home_team_name}`
+			away_team.innerHTML = `${game.away_team_city} ${game.away_team_name}`
+
+			append(game_container, home_team);
+			append(game_container, away_team);
+			append(games, game_container);
+		})
+	})
+  .catch((err) => {
+    console.log(err)
+	});
+
+	console.log("LOADED");
diff --git a/Fetch/styles.css b/Fetch/styles.css
@@ -0,0 +1,25 @@
+body {
+	padding: 0;
+	margin: 0;
+}
+
+.container {
+  margin: 0 auto;
+  text-align: center;
+	padding: 40px;
+	background-color: gray;
+}
+
+.game {
+	display: flex;
+}
+
+.team {
+	flex: 1;
+	padding: 10px;
+}
+
+ul {
+	padding-left: 0;
+	text-align: center;
+}

Original file line number	Diff line number	Diff line change
`@@ -17,11 +17,14 @@`
`17`	`17`	`transition: .25s ease-in-out;`
`18`	`18`	`}`
`19`	`19`
`20`		`- .container .title {`
	`20`	`+ .container .title, h1 {`
`21`	`21`	`color: black;`
	`22`	`+ text-shadow: 1px 1px 1px gray;`
	`23`	`+ text-transform: uppercase;`
`22`	`24`	`}`
`23`	`25`
`24`	`26`	`.container.active h1, .container.active .title {`
	`27`	`+ text-shadow: 2px 2px 2px black;`
`25`	`28`	`color: white;`
`26`	`29`	`}`
`27`	`30`
`@@ -33,6 +36,7 @@`
`33`	`36`	`.secret_test {`
`34`	`37`	`appearance: none;`
`35`	`38`	`padding: 10px;`
	`39`	`+ text-transform: uppercase;`
`36`	`40`	`}`
`37`	`41`
`38`	`42`	`</style>`