HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Change Paragraph Color</title>
  <style>
    #randomColorButton {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <p id="changeColorParagraph">Click the button below to change the color of this paragraph!</p>
  <button id="randomColorButton">Change Color</button>
  </body>
  </html>

JavaScript: 

  <script>
    document.getElementById('randomColorButton').addEventListener('click', function() {
      let paragraph = document.getElementById('changeColorParagraph');
      let randomColor = getRandomColor();
      paragraph.style.color = randomColor;
    });

    function getRandomColor() {
      let letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
  </script>

Try to answer about this code:

What does the JavaScript function getRandomColor() do?

Changes the font size of the paragraph
Generates a random color for the paragraph text

Adds a border around the paragraph
Hides the paragraph element

Which HTML element is used to change the color of the paragraph text?

<span>
<p>

<button>
<div>

What does the CSS rule #randomColorButton specify?

Styles applied to the paragraph
Styles applied to the button element

Styles applied to the body of the HTML document
Styles applied to the entire webpage

How is the click event handled for changing the paragraph color?

Using onmouseover attribute in HTML
Using addEventListener() in JavaScript

Using onclick attribute in HTML
Using onchange attribute in HTML