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;
}