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, open existing file, saving with filename.

<!DOCTYPE html>
<html><head>
<title>Notes</title>
<style>
*:focus{outline:none}
label{font-family:verdana;font-size:12px}
form{background-color:#f8f8f8;padding:10px 0px 4px 10px}
input[type=submit],input[type=reset]{cursor:pointer}
</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>

<!-- Edit form and controls -->
<form><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>
<label>Save As: </label><input type="text" name="name"><p>
<input type="submit" value="Save" id="save"> <input type='reset' value='Clear'id="clear">
</form>


<!-- Open existing file into editor function -->
<script>
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;            
        };      
        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>
</body>
</html>