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
<!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>