Add ability to hide buttons in the editor

editor/editor.js

@@ -82,6 +82,17 @@ function showCopyCodePrompt() {
 }
 
 
+/* Hide and show buttons based on checkbox state */
+function hideButtons(box) {
+  let buttons = document.querySelectorAll("button");
+  if (box.checked) {
+    buttons.forEach((button) => button.style.display = "none");
+  } else {
+    buttons.forEach((button) => button.style.display = "inline");
+  }
+}
+
+
 
 /***
  * Main procedure functions

editor/index.html

@@ -15,6 +15,8 @@
 </div>
 
 <div id="bottomleft-buttons">
+  <label for="hide">Hide Buttons</label>
+  <input type="checkbox" id="hide" onclick="hideButtons(this)" /><br />
   <!-- Seemingly random attributes necessary for TinyUrl to accept the request -->
   <form action="http://tinyurl.com/create.php" method="get" target="_blank">
 		<input type="hidden" id="source" name="source" value="indexpage">
@@ -25,6 +27,7 @@
   <button><a id="getLinkLink" href="" target="_blank">Open Page</a></button>
   <button onclick="showCopyCodePrompt()">Copy Code</button>
   <button><a id="downloadLink" href="" target="_blank" download="export.html">Download Code</a></button>
+  <button><a href="https://jstrieb.github.io/link-lock" target="_blank">Add a Password</a></button>
 </div>
 
 <div id="topright-buttons">

editor/main.css

@@ -52,3 +52,13 @@ a, button {
 form {
   display: inline;
 }
+
+label, input[type="checkbox"] {
+  vertical-align: middle;
+}
+
+label {
+  margin: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}