Opus1no2/anchor.html

## anchor.html
<!doctype html>
<html>
  <head>
  <style>
    .content {
      display: none;
      padding: 50px;
      border: solid 1px;
      background: #ccc;
    }

    .error {
      border: solid 1px red;
    }
  </style>
  </head>
  <body>
    <div id='first' class='content' data-for='#foo'>
      <h4>I am content for foo</h4>

      <form>
        <label for='name'>Name</label>
        <input id='name' type='text' />
      </form>

      <a data-btn-for='first' href='#bar'>Submit Foo</a>
    </div>

    <div id='second' class='content' data-for='#bar'>
      <a href='#foo'>Back</a>

      <h4>I am content for bar</h4>

      <form>
        <label for='company'>Company</label>
        <input id='company' type='text' />
      </form>
      <a data-btn-for='second' href='#baz'>bar</a>
    </div>

    <div class='content' data-for='#baz'>
      <a href='#bar'>Back</a>
      <h4>You win!</h4>
    </div>

    <script>
      window.addEventListener('load', (e) => {
        const hash = document.location.hash;
        if (hash) { showCard() }
        if (!hash) {
          document.location.hash = '#foo';
        }
      });

      const first = document.querySelector('[data-btn-for="first"]');
      const second = document.querySelector('[data-btn-for="second"]');

      first.addEventListener('click', (e) => {
        const name = document.querySelector('#name');
        if (name.value === '') {
          name.classList.add('error');
          e.preventDefault();
        } else {
          name.classList.remove('error');
        }
      });

      second.addEventListener('click', (e) => {
        const company = document.querySelector('#company');
        if (company.value === '') {
          company.classList.add('error');
          e.preventDefault();
        } else {
          company.classList.remove('error');
        }
      });

      window.addEventListener('popstate', showCard);

      function showCard() {
        const contents = document.querySelectorAll('.content');

        contents.forEach((content) => {
          content.style.display = 'none';
        });

        const hash = document.location.hash;
        const selector = '[data-for="' + document.location.hash + '"]';
        const el = document.querySelector(selector);

        if (el) {
          el.style.display = 'block';
        }
      }
  </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<style>
	.content {
	display: none;
	padding: 50px;
	border: solid 1px;
	background: #ccc;
	}

	.error {
	border: solid 1px red;
	}
	</style>
	</head>
	<body>
	<div id='first' class='content' data-for='#foo'>
	<h4>I am content for foo</h4>

	<form>
	<label for='name'>Name</label>
	<input id='name' type='text' />
	</form>

	<a data-btn-for='first' href='#bar'>Submit Foo</a>
	</div>

	<div id='second' class='content' data-for='#bar'>
	<a href='#foo'>Back</a>

	<h4>I am content for bar</h4>

	<form>
	<label for='company'>Company</label>
	<input id='company' type='text' />
	</form>
	<a data-btn-for='second' href='#baz'>bar</a>
	</div>

	<div class='content' data-for='#baz'>
	<a href='#bar'>Back</a>
	<h4>You win!</h4>
	</div>

	<script>
	window.addEventListener('load', (e) => {
	const hash = document.location.hash;
	if (hash) { showCard() }
	if (!hash) {
	document.location.hash = '#foo';
	}
	});

	const first = document.querySelector('[data-btn-for="first"]');
	const second = document.querySelector('[data-btn-for="second"]');

	first.addEventListener('click', (e) => {
	const name = document.querySelector('#name');
	if (name.value === '') {
	name.classList.add('error');
	e.preventDefault();
	} else {
	name.classList.remove('error');
	}
	});

	second.addEventListener('click', (e) => {
	const company = document.querySelector('#company');
	if (company.value === '') {
	company.classList.add('error');
	e.preventDefault();
	} else {
	company.classList.remove('error');
	}
	});

	window.addEventListener('popstate', showCard);

	function showCard() {
	const contents = document.querySelectorAll('.content');

	contents.forEach((content) => {
	content.style.display = 'none';
	});

	const hash = document.location.hash;
	const selector = '[data-for="' + document.location.hash + '"]';
	const el = document.querySelector(selector);

	if (el) {
	el.style.display = 'block';
	}
	}
	</script>
	</body>
	</html>