prof3ssorSt3v3/console-2.html

## console-2.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Console - Monitor Events</title>
  </head>
  <body>
    <header>
      <h1>Using the Console to Monitor Events</h1>
    </header>
    <main>
      <form id="myform">
        <label for="email">email: </label> <input type="email" id="email" />
        <button id="btnSend">Send</button>
      </form>
      <ul>
        <li>Something to click</li>
        <li>Something to click</li>
        <li>Something to click</li>
        <li>Something to click</li>
      </ul>
    </main>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        //when the DOM is ready
        document.querySelector('ul').addEventListener('click', listClicked);

        document
          .querySelector('form')
          .addEventListener('submit', formSubmitted);

        document.querySelector('#email').addEventListener('input', enteredText);
      });
      window.addEventListener('load', () => {
        //when the page loads
        document.addEventListener('keypress', keypressed);
      });

      function listClicked(ev) {
        //list item clicked
      }
      function formSubmitted(ev) {
        //button clicked to submit form
        ev.preventDefault();
      }
      function enteredText(ev) {
        //user typed in the input fields
      }
      function keypressed(ev) {
        //user hit a key
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Console - Monitor Events</title>
	</head>
	<body>
	<header>
	<h1>Using the Console to Monitor Events</h1>
	</header>
	<main>
	<form id="myform">
	<label for="email">email: </label> <input type="email" id="email" />
	<button id="btnSend">Send</button>
	</form>
	<ul>
	<li>Something to click</li>
	<li>Something to click</li>
	<li>Something to click</li>
	<li>Something to click</li>
	</ul>
	</main>
	<script>
	document.addEventListener('DOMContentLoaded', () => {
	//when the DOM is ready
	document.querySelector('ul').addEventListener('click', listClicked);

	document
	.querySelector('form')
	.addEventListener('submit', formSubmitted);

	document.querySelector('#email').addEventListener('input', enteredText);
	});
	window.addEventListener('load', () => {
	//when the page loads
	document.addEventListener('keypress', keypressed);
	});

	function listClicked(ev) {
	//list item clicked
	}
	function formSubmitted(ev) {
	//button clicked to submit form
	ev.preventDefault();
	}
	function enteredText(ev) {
	//user typed in the input fields
	}
	function keypressed(ev) {
	//user hit a key
	}
	</script>
	</body>
	</html>