Alt Comp

This is an old revision of the document!
Web Notes

Description: Plain text editor / note taker in a browser tab.
Functions: Edit area, copy, open existing file, saving with filename.
<!DOCTYPE html>
<html><head>
<title>Web Notes</title>
<style>
*:focus{outline:none}
label{font-family:verdana;font-size:12px}
form{background-color:#f8f8f8;padding:10px 20px 4px 20px}
input[type=submit],input[type=reset],button{cursor:pointer}
.container{max-width:fit-content;margin-left:auto;margin-right:auto;}
</style>
</head>
<body>
<div class="container">
<!-- Editor controls -->
<form><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">Copy</button> <input type="submit" value="Save" id="save">
<input type="reset" value="Clear" id="clear"> 
</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" >
  const textarea = document.querySelector('textarea');
  const button = document.querySelector('button');
     
      button.addEventListener('click', async () => {
      try {
      await navigator.clipboard.writeText(textarea.value);
      } catch (err) {
   console.error(err.name, err.message);
  }
})
</script>
</body>
</html>