prof3ssorSt3v3/alert.html

## alert.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      html {
        font-size: 20px;
        font-weight: 400;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        line-height: 1.7;
      }
      p:hover {
        background-color: blanchedalmond;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Using alert(), confirm(), and prompt()</h1>
    <p class="a">alert</p>
    <p class="c">confirm</p>
    <p class="p">prompt</p>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        document.querySelector('p.a').addEventListener('click', handleClickA);
        document.querySelector('p.c').addEventListener('click', handleClickC);
        document.querySelector('p.p').addEventListener('click', handleClickP);
        if ('document' in window) {
          console.log('doc');
        }
      });

      function handleClickA(ev) {
        //alert
        let answer = alert('this is a message');
        console.log(answer); //undefined
      }
      function handleClickC(ev) {
        //confirm
        let answer = confirm('Are you sure?');
        console.log(answer); //true false
      }
      function handleClickP(ev) {
        //prompt
        let answer = prompt('This is my question', 'default answer');
        console.log(answer); //answer null
      }
    </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>Document</title>
	<style>
	* {
	box-sizing: border-box;
	}
	html {
	font-size: 20px;
	font-weight: 400;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1.7;
	}
	p:hover {
	background-color: blanchedalmond;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<h1>Using alert(), confirm(), and prompt()</h1>
	<p class="a">alert</p>
	<p class="c">confirm</p>
	<p class="p">prompt</p>
	<script>
	document.addEventListener('DOMContentLoaded', () => {
	document.querySelector('p.a').addEventListener('click', handleClickA);
	document.querySelector('p.c').addEventListener('click', handleClickC);
	document.querySelector('p.p').addEventListener('click', handleClickP);
	if ('document' in window) {
	console.log('doc');
	}
	});

	function handleClickA(ev) {
	//alert
	let answer = alert('this is a message');
	console.log(answer); //undefined
	}
	function handleClickC(ev) {
	//confirm
	let answer = confirm('Are you sure?');
	console.log(answer); //true false
	}
	function handleClickP(ev) {
	//prompt
	let answer = prompt('This is my question', 'default answer');
	console.log(answer); //answer null
	}
	</script>
	</body>
	</html>