Differences

This shows you the differences between two versions of the page.

--- notes [2025/10/03 06:57] – admin
+++ notes [2025/10/08 09:59] (current) – admin
@@ Line 1: / Line 1: @@
-=== Web Notes ===
+==== Web Notes ====
-Note taker in a browser tab
+**Description**: Plain text editor / note taker in a browser tab.\\
+**Functions**: Edit area, copy, open existing file, saving with filename.\\
+**Demo**: http://www.custompc.plus.com/webnotes.htm
 <code>
@@ Line 7: / Line 9: @@
 <!DOCTYPE html>
 <html><head>
-<title>Notes</title>
+<title>Web Notes</title>
 <style>
 *:focus{outline:none}
 label{font-family:verdana;font-size:12px}
-form{background-color:#f8f8f8;padding:10px 0px 4px 10px}
+h2{font-family:verdana;font-size:14px;text-align:center;}
-input[type=submit],input[type=reset]{cursor:pointer}
+form{background-color:#f8f8f8;padding:10px 20px 4px 20px}
+button{cursor:pointer;background-color:#fb9a15;color:white;border:solid 4px #fb9a15;}
+input[type=submit]{cursor:pointer;background-color:#89c108;color:white;border:solid 4px #89c108;}
+input[type=reset]{cursor:pointer;background-color:#e6471f;color:white;border:solid 4px #e6471f;}
+.container{max-width:fit-content;margin-left:auto;margin-right:auto;margin-top:4%;}
 </style>
-<!-- Save file as function -->
-<script language="Javascript" >
-function download(filename, text) {
-  var pom = document.createElement('a');
-  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-  pom.setAttribute('download', filename);
-  pom.style.display = 'none';
-  document.body.appendChild(pom);
-  pom.click();
-  document.body.removeChild(pom);
-}
-</script>
 </head>
 <body>
+<div class="container">
-<!-- Edit form and controls -->
+<!-- Editor controls -->
-<form><input type="file" id="inputfile"></form>
+<form><h2>Web Notes</h2>
+<input type="file" id="inputfile"></form>
 <form onsubmit="download(this['name'].value, this['text'].value)">
-<textarea rows="20" cols="100" name="text" id="edit"></textarea><p>
+<textarea rows="30" cols="100" name="text" id="editarea"></textarea><p>
 <label>Save As: </label><input type="text" name="name"><p>
-<input type="submit" value="Save" id="save"> <input type='reset' value='Clear'id="clear">
+<button type="button" title="Copy Text">Copy</button>
+<input type="submit" value="Save" id="save" title="Save Text">
+<input type="reset" value="Clear" id="clear" title="Clear Text">
 </form>
+</div>
 <!-- Open existing file into editor function -->
-<script>
+<script language="Javascript" >
 var control = document.getElementById("inputfile");
     control.addEventListener("change", function(event){
         var reader = new FileReader();
         reader.onload = function(event){
             var contents = event.target.result;
-            document.getElementById('edit').value = contents;
+            document.getElementById('editarea').value = contents;
         };
         reader.onerror = function(event){
@@ Line 54: / Line 51: @@
         reader.readAsText(control.files[0]);
     }, false);
+</script>
+<!-- Save file as function -->
+<script language="Javascript" >
+function download(filename, text) {
+  var pom = document.createElement('a');
+  pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+  pom.setAttribute('download', filename);
+  pom.style.display = 'none';
+  document.body.appendChild(pom);
+  pom.click();
+  document.body.removeChild(pom);
+}
+</script>
+<!-- Copy all text in editor area -->
+<script language="Javascript" >
+document.querySelector("button").onclick = function(){
+    document.querySelector("textarea").select();
+    document.execCommand('copy');
+}
 </script>
 </body>
 </html>
 </code>