<!DOCTYPE html>
<html>

  <body>

    <p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
      Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, and sets the color of the text
      to green.
    </p>
  
    <script>
      function mouseDown() {
        document.getElementById("myP").style.color = "red";
      }
  
      function mouseUp() {
        document.getElementById("myP").style.color = "green";
      }
    </script>

  </body>
  
</html>
// Code goes here

/* Styles go here */