<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
  <p id="intro">For this lab, do the following:</p>
  <ol>
    <li>Add an event listener on the "Increment" button's "click" event</li>
    <li>Use the event listener function to increase the number count by one</li>
    <li>Add the new count to the Element with the "totalCount" ID</li>
  </ol>
  </hr>
  <p id="clickMessage">The total number of clicks is: <span id="totalCount">0</span></p>
  </br>
  <button id="increment">Increment Count</button>
</body>
</html>
p#intro {
  font-size: 28px;
  color: red;
}

p#clickMessage {
  background-color: yellow;
  display: inline-block;
}

button#increment {
  color: black;
  font-size: 20;
  background-color: red;
}
let target = document.getElementById('increment');
console.log('The TARGET: ', target);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.