branflake2267/example-prototype-template.html

## example-prototype-template.html
<!DOCTYPE html>
<html>

<head>
  <title>${component_title}</title>

  <!-- Font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>

  <style>
    html,
    body {
      font-family: 'Roboto', sans-serif;
    }

    .example {
      border: 1px solid gray;

      border-radius: 10px;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
    }

    .example:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    .example_title {
      /* border: 1px solid gray; */
      padding: 10px;
    }

    .example_tabs {
      /* border: 1px solid gray; */

      display: flex;
    }

    .example_contents {
      /* border: 1px solid blue; */
      padding: 10px;
    }

    #example_tabs {
      display: flex;

      margin-bottom: 10px;
    }

    .example_tab {
      padding: 10px;
      width: 100px;
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
    }

    .example_tab_selected {
      border-bottom: 2px solid green;
    }

    .example_tab_not_selected {}

    .example_content_selected {}

    .example_content_not_selected {
      display: none;
    }
  </style>


  <script>
    function toggleTab(event) {
      let exampleEl = document.body.querySelector('.example');
      let tabsEls = exampleEl.querySelectorAll('.example_tab');
      console.log("tabsEls", tabsEls);
      let selected = -1;
      for (let i = 0; i < tabsEls.length; i++) {
        let tabEl = tabsEls[i];
        console.log("tabEl", tabEl);
        if (tabEl === event.target) {
          tabEl.classList.remove('example_tab_not_selected');
          tabEl.classList.add('example_tab_selected');
          selected = i;
        } else {
          tabEl.classList.remove('example_tab_selected');
          tabEl.classList.add('example_tab_not_selected');
        }
      }

      let contentsEls = exampleEl.querySelectorAll('.example_content');
      for (let i = 0; i < contentsEls.length; i++) {
        let contentEl = contentsEls[i];
        if (selected === i) {
          contentEl.classList.remove('example_content_not_selected');
          contentEl.classList.add('example_content_selected');
        } else {
          contentEl.classList.remove('example_content_selected');
          contentEl.classList.add('example_content_not_selected');
        }
      }
    }


    function addTabListeners() {
      let exampleEl = document.body.querySelector('.example');
      let tabsEls = exampleEl.querySelectorAll('.example_tab');
      for (const tabEl of tabsEls) {
        tabEl.onclick = toggleTab;
      }
    }

    function documentOnReady() {
      addTabListeners();
    }

    document.addEventListener("DOMContentLoaded", documentOnReady);
  </script>

  <div class='example'>

    <div class='example_title'>
      Example Title
    </div>

    <div class='example_tabs'>
      <div class='example_tab example_tab_selected'>Javascript</div>
      <div class='example_tab example_tab_not_selected'>Angular</div>
      <div class='example_tab example_tab_not_selected'>React</div>
      <div class='example_tab example_tab_not_selected'>Web Components</div>
      <div class='example_tab example_tab_not_selected'>Vue</div>
      <div class='example_tab example_tab_not_selected'>TypeScript</div>
    </div>

    <div class='example_contents'>
      <div class='example_content example_content_selected'>Javascript</div>
      <div class='example_content example_content_not_selected'>Angular</div>
      <div class='example_content example_content_not_selected'>React</div>
      <div class='example_content example_content_not_selected'>Web Components</div>
      <div class='example_content example_content_not_selected'>Vue</div>
      <div class='example_content example_content_not_selected'>TypeScript</div>
    </div>


  </div>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>${component_title}</title>

	<!-- Font -->
	<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
	</head>

	<body>

	<style>
	html,
	body {
	font-family: 'Roboto', sans-serif;
	}

	.example {
	border: 1px solid gray;

	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	}

	.example:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
	}

	.example_title {
	/* border: 1px solid gray; */
	padding: 10px;
	}

	.example_tabs {
	/* border: 1px solid gray; */

	display: flex;
	}

	.example_contents {
	/* border: 1px solid blue; */
	padding: 10px;
	}

	#example_tabs {
	display: flex;

	margin-bottom: 10px;
	}

	.example_tab {
	padding: 10px;
	width: 100px;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	}

	.example_tab_selected {
	border-bottom: 2px solid green;
	}

	.example_tab_not_selected {}

	.example_content_selected {}

	.example_content_not_selected {
	display: none;
	}
	</style>


	<script>
	function toggleTab(event) {
	let exampleEl = document.body.querySelector('.example');
	let tabsEls = exampleEl.querySelectorAll('.example_tab');
	console.log("tabsEls", tabsEls);
	let selected = -1;
	for (let i = 0; i < tabsEls.length; i++) {
	let tabEl = tabsEls[i];
	console.log("tabEl", tabEl);
	if (tabEl === event.target) {
	tabEl.classList.remove('example_tab_not_selected');
	tabEl.classList.add('example_tab_selected');
	selected = i;
	} else {
	tabEl.classList.remove('example_tab_selected');
	tabEl.classList.add('example_tab_not_selected');
	}
	}

	let contentsEls = exampleEl.querySelectorAll('.example_content');
	for (let i = 0; i < contentsEls.length; i++) {
	let contentEl = contentsEls[i];
	if (selected === i) {
	contentEl.classList.remove('example_content_not_selected');
	contentEl.classList.add('example_content_selected');
	} else {
	contentEl.classList.remove('example_content_selected');
	contentEl.classList.add('example_content_not_selected');
	}
	}
	}


	function addTabListeners() {
	let exampleEl = document.body.querySelector('.example');
	let tabsEls = exampleEl.querySelectorAll('.example_tab');
	for (const tabEl of tabsEls) {
	tabEl.onclick = toggleTab;
	}
	}

	function documentOnReady() {
	addTabListeners();
	}

	document.addEventListener("DOMContentLoaded", documentOnReady);
	</script>

	<div class='example'>

	<div class='example_title'>
	Example Title
	</div>

	<div class='example_tabs'>
	<div class='example_tab example_tab_selected'>Javascript</div>
	<div class='example_tab example_tab_not_selected'>Angular</div>
	<div class='example_tab example_tab_not_selected'>React</div>
	<div class='example_tab example_tab_not_selected'>Web Components</div>
	<div class='example_tab example_tab_not_selected'>Vue</div>
	<div class='example_tab example_tab_not_selected'>TypeScript</div>
	</div>

	<div class='example_contents'>
	<div class='example_content example_content_selected'>Javascript</div>
	<div class='example_content example_content_not_selected'>Angular</div>
	<div class='example_content example_content_not_selected'>React</div>
	<div class='example_content example_content_not_selected'>Web Components</div>
	<div class='example_content example_content_not_selected'>Vue</div>
	<div class='example_content example_content_not_selected'>TypeScript</div>
	</div>



	</div>

	</body>

	</html>