To make a website interactive, we'll need code written in JavaScript. With it, we can click on things on a webpage.

Let's use JavaScript to tell a website what to do after we click on a button.

<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>
]]>

Tap the button on the button in the website to see how both the color and text change because of JavaScript.

Add the color gray on the line that says color. On the line that says text, we'll have Friend Added.