prof3ssorSt3v3/one.html

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Three</title>
  </head>
  <body>
    <h1 id="head">This is page three</h1>
  </body>
</html>

## one.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>First Window</title>
    <style>
      iframe {
        border: 1px solid red;
      }
      button {
        margin: 1rem;
      }
    </style>
  </head>
  <body>
    <button id="btnGoogle">Open Google in New Tab</button>
    <button id="btnSelf">Open Google in CURRENT Tab</button>
    <button id="btnTwo">Open local page in New Tab</button>
    <button id="btnFrame">Open local page in iFrame</button>
    <button id="btnColor">Set random background</button>
    <a href="three.html" target="_blank">new page</a>

    <iframe
      id="fr"
      name="myFrame"
      width="300"
      height="300"
      src="about:blank"
      allow=""
    ></iframe>
    <!--
      http://127.0.0.1:5500/three.html


      https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features
      List of features you can use when opening new windows
    -->
    <script>
      let other = null; //will be our window reference
      let features =
        'menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes';
      //,height=400,width=400

      document.getElementById('btnGoogle').addEventListener('click', (ev) => {
        //open google in a new tab or window
        let url = 'https://google.com/';
        let other = window.open(url, '_blank', features);
      });
      document.getElementById('btnSelf').addEventListener('click', (ev) => {
        //open google in current tab
        let url = 'https://google.com/';
        window.open(url, '_self');
      });
      document.getElementById('btnTwo').addEventListener('click', (ev) => {
        //open local page in a new tab
        let url = 'http://127.0.0.1:5500/two.html';
        let other = window.open(url, '_blank');
        setTimeout(() => {
          other.document.body.style.backgroundColor = 'cornflowerblue';
        }, 1000);
      });
      document.getElementById('btnFrame').addEventListener('click', (ev) => {
        //open local page in the iFrame
        let url = 'http://127.0.0.1:5500/three.html';
        let other = window.open(url, 'myFrame');
        setTimeout(() => {
          other.document.getElementById('head').textContent = 'The NEW heading';
        }, 1000);
      });
      document.getElementById('btnColor').addEventListener('click', (ev) => {
        //set a random background colour in the iframe's document
        let clr = `#${Math.random().toString(16).substring(2, 8)}`;
        let fr = document.querySelector('iframe');
        fr.contentDocument.body.style.backgroundColor = clr;
        fr.contentWindow.document.body.style.backgroundColor = clr;
      });
    </script>
  </body>
</html>

## two.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page Two</title>
  </head>
  <body>
    <h1>Page Two</h1>
    <p id="fred">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque illum
      asperiores ipsa iusto soluta eum aliquid nisi animi voluptatum quis totam
      cum vitae distinctio dolorum, quisquam vel. Aut, officiis labore.
    </p>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Page Three</title>
	</head>
	<body>
	<h1 id="head">This is page three</h1>
	</body>
	</html>