jbosse/snippet_board.html

## snippet_board.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Code Snippit Board</title>
  <style>
    table {
      width: 100%
    }

    table tr td {
      width: 100%;
    }

    table tbody tr:nth-child(odd) {
      background-color: #f2f2f2;
    }

    table tbody tr td {
      vertical-align: top;
    }

    textarea {
      width: 100%;
      resize: horizontal;
      overflow: hidden;
      height: auto;
    }
  </style>
</head>

<body>
  <h1>Snippit Board</h1>
  <table id="snippits" style="width: 100%;">
    <thead>
      <tr>
        <th width="*">Snippet</th>
        <th></th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script>
    const tableBody = document.querySelector("#snippits tbody");
    const snippits = [
      [
        "function addNumbers(a, b) {",
        "  return a + b;",
        "}"
      ].join("\n"),
      [
        "function multiplyNumbers(a, b) {",
        "  return a * b;",
        "}"
      ].join("\n")
    ];
    snippits.forEach(snippit => {
      const tr = document.createElement("tr");
      const tdSnippet = document.createElement("td");
      const tdCopy = document.createElement("td");
      const textarea = document.createElement("textarea");
      const button = document.createElement("button");

      tr.appendChild(tdSnippet);
      tr.appendChild(tdCopy);

      textarea.innerHTML = snippit;
      button.innerHTML = "Copy";
      button.addEventListener("click", () => {
        navigator.clipboard.writeText(snippit);
        button.style.backgroundColor = "green";
        setTimeout(() => {
          button.style.backgroundColor = "";
        }, 3000);
      });

      tdSnippet.appendChild(textarea);
      tdCopy.appendChild(button);
      tableBody.appendChild(tr);

      textarea.style.height = `${textarea.scrollHeight}px`;
    });
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Code Snippit Board</title>
	<style>
	table {
	width: 100%
	}

	table tr td {
	width: 100%;
	}

	table tbody tr:nth-child(odd) {
	background-color: #f2f2f2;
	}

	table tbody tr td {
	vertical-align: top;
	}

	textarea {
	width: 100%;
	resize: horizontal;
	overflow: hidden;
	height: auto;
	}
	</style>
	</head>

	<body>
	<h1>Snippit Board</h1>
	<table id="snippits" style="width: 100%;">
	<thead>
	<tr>
	<th width="*">Snippet</th>
	<th></th>
	</tr>
	</thead>
	<tbody>

	</tbody>
	</table>
	<script>
	const tableBody = document.querySelector("#snippits tbody");
	const snippits = [
	[
	"function addNumbers(a, b) {",
	" return a + b;",
	"}"
	].join("\n"),
	[
	"function multiplyNumbers(a, b) {",
	" return a * b;",
	"}"
	].join("\n")
	];
	snippits.forEach(snippit => {
	const tr = document.createElement("tr");
	const tdSnippet = document.createElement("td");
	const tdCopy = document.createElement("td");
	const textarea = document.createElement("textarea");
	const button = document.createElement("button");

	tr.appendChild(tdSnippet);
	tr.appendChild(tdCopy);

	textarea.innerHTML = snippit;
	button.innerHTML = "Copy";
	button.addEventListener("click", () => {
	navigator.clipboard.writeText(snippit);
	button.style.backgroundColor = "green";
	setTimeout(() => {
	button.style.backgroundColor = "";
	}, 3000);
	});

	tdSnippet.appendChild(textarea);
	tdCopy.appendChild(button);
	tableBody.appendChild(tr);

	textarea.style.height = `${textarea.scrollHeight}px`;
	});
	</script>
	</body>

	</html>