Online Notepad

index.html

<input type="file" accept="text/*" id="file"/>
<label for="file">Upload file</label> <span class="h1_defui">OnlineNotepad — A plain online text editor</span>
<textarea id="editor"></textarea>
<br/>
<input id="fname" placeholder="filename"/>
<button id="fsave">Save File</button>

online-notepad.markdown

Online Notepad

A Pen by TypeError on CodePen.

License.

script.ts

var file = document.querySelector("#file"),
    content = document.querySelector("#editor"),
    filename = document.querySelector("#fname");

file.onchange = function() {
	/* FileReader constructor for reading file */
	var freader = new FileReader();
	
	freader.onload = function() {
		content.value = freader.result;
		filename.value = file.files[0].name;
	};
	
	freader.readAsText(file.files[0]);
};

document.querySelector('#fsave')
.onclick = function() {
	
	/* Saves the file with name from the filename. Filename is optional. */
	saveAs(new Blob([content.value]), filename.value ? filename.value : "untitled.txt");
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

* {
     font-family: "Source Code Pro";
     user-select: none;
}

 body {
     /*text-align: center;*/
}

 h1 {
     font-size: 50px;
     font-weight: normal;
     text-decoration: underline;
}

 #file {
     display: none;
}

 label {
     float: left;
	 padding: 8px;
	 text-shadow: inset 0px 0px 1px;
	 font-size: 1em;
	 background: #428bca;
	 color: white;
	 border-radius: 2px;
	 
	 font-family: "Source Code Pro";
	cursor: pointer;
}

 label:hover {
     box-shadow: inset 0px 0px 2px rgba(0, 0, 0, 0.4);
}

#fname {
	padding: 0.60em;
}

button {
     padding: 0.75em;
     border-style: none;
     cursor: pointer;
     background: #16b77c;
     color: #f4f4f4;
}

button:hover {
     background: #0d8459;
}


blockquote {
	border-left: 2px solid #000;
	padding: 5px;
	margin-left: 0;
}

textarea {
	margin-top: 10px;
	width: calc(100% - 5px);
	height: 100%;
}

.h1_defui {
	font-size: 1.5em;
	margin: 0;
	margin-top: 10px;
	user-select: text;
	text-decoration: none;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 100vw;
	height: 36px;
}

styles

<link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed|Roboto+Mono" rel="stylesheet" />