By now we can create static webpages with HTML. It's time to make interactive webpages that react to input from visitors.

Press the button to see what happens.

<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <style>body { background-color: white; margin: 0px; text-align: center; } h3 { margin-top: 0px; } button { background-color: purple; /* Green */ border: none; border-radius: 5px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; </style>
</head>
<body>
  <div id="button_container">
    <img src="https://images.getmimo.com/images/ac73c9df-5351-40a4-b391-8fe69fe5139c" height=100 width=100/>
    <!-- Elijah McCoy -->
    <h3>Elijah McCoy</h3><button onClick="tapButton(this)">Add Friend</button>
  <div>

  <script>
    function tapButton(id) {
      id.innerHTML = "Friend Added" ;
      id.style.backgroundColor = "lightGray";
    }
  </script>
</body>
</html>
]]>