​​​📝​ Penn Week 13b – JavaScript Objects and Libraries
​​We’ll be using a mega-document to review different examples. To comment/uncomment things out quickly, you can use ⌘ + /​ on a Mac or Ctrl + /​ on Windows.

​​Demo – JavaScript Objects

​​For all these examples, the HTML and CSS will be the same.
​​
​​HTML
​​<!DOCTYPE html>
​​<html>
​​<head>
​​  <meta charset="utf-8">
​​  <meta name="viewport" content="width=device-width, initial-scale=1">
​​  <title>JavaScript and Data</title>
​​  <link rel="stylesheet" type="text/css" href="main.css">
​​</head>
​​<body>
​​  <!-- Add year-button in for example 5 and 6 only -->
​​  <!-- <div class="year-button">Click to Sort</div> -->
​​  <div class="teen-show-container">
​​  </div>
​​<script src="main.js" type="text/javascript"></script>
​​</body>
​​</html>
​​
​​
​​
​​CSS
​​body {
​​  background-color: blue;
​​  margin: 0;
​​}
​​
​​.teen-show-container {
​​  background-color: black;
​​  color: white;
​​  width: 100vw;
​​  /*height:  50vh;*/
​​}
​​
​​.show {
​​  font-size: 50px;
​​  padding: 20px;
​​  background-color: white;
​​  color: black;
​​}
​​
​​.year {
​​  color: grey;
​​}
​​
​​.show:hover {