## Javascript: Add functionality

- Manipulate Styles / Classes
- Manipulate Content
- Communicate with Web Server to Get and Post data
- Add functionality such as maps, galleries, etc.

### Code highlighting!

    <header>
      <h1>Our Solar System</h1>
      <nav>
        <ul>
          <li><a href="#">Planet</a></li>
          <li><a href="#">Solar System</a></li>
          <li><a href="#">Galaxy</a></li>
          <li><a href="#">Universe</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Montes nascetur ridiculus mus mauris vitae ultricies leo integer malesuada.
      </p>
    </main>

    header {
      background-color: rgb(250, 250, 200);
      font-family: sans-serif;
      display: flex;
      padding: 1rem;
    }
    header > nav {
      flex-grow: 1;
      flex-shrink: 1;
    }
    header nav ul {
      list-style-type: none;
      padding: 0;
      display: flex;
      justify-content: flex-end;
    }
    header nav ul li {
      margin-left: 1rem;
    }
    header nav ul li a {
      display: block;
      padding: 0.5rem;
      text-align: right;
      font-weight: bold;
      font-size: 1.2rem;
    }
    header nav ul li a:link,
    header nav ul li a:visited {
      text-decoration: none;
    }
    header nav ul li a:hover,
    header nav ul li a:active {
      text-decoration: underline;
      color: white;
      background-color: blue;
    }
    main {
      line-height: 1.5;
    }
    h1,
    ul,
    li {
      margin: 0;
      padding: 0;
    }