Differences

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

--- notes [2025/10/03 06:55] – created admin
+++ notes [2025/10/08 09:59] (current) – admin
@@ Line 1: / Line 1: @@
--- Web Notes --
+==== Web Notes ====
+**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>
+<!DOCTYPE html>
+<html><head>
+<title>Web Notes</title>
+<style>
+*:focus{outline:none}
+label{font-family:verdana;font-size:12px}
+h2{font-family:verdana;font-size:14px;text-align:center;}
+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>
+</head>
+<body>
+<div class="container">
+<!-- Editor controls -->
+<form><h2>Web Notes</h2>
+<input type="file" id="inputfile"></form>
+<form onsubmit="download(this['name'].value, this['text'].value)">
+<textarea rows="30" cols="100" name="text" id="editarea"></textarea><p>
+<label>Save As: </label><input type="text" name="name"><p>
+<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 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('editarea').value = contents;
+        };
+        reader.onerror = function(event){
+            console.error("File could not be read! Code " + event.target.error.code);
+        };
+        console.log("Filename: " + control.files[0].name);
+        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>