<!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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.