Skip to content

Instantly share code, notes, and snippets.

@liddiard

liddiard/thoughtpad.html

Last active February 13, 2017 00:40
Show Gist options
  • Save liddiard/99230b3ba64f61a7bb195a74b91bb4f2 to your computer and use it in GitHub Desktop.
Save liddiard/99230b3ba64f61a7bb195a74b91bb4f2 to your computer and use it in GitHub Desktop.
Download ZIP
Simple full-body contenteditable web page with contents persisted in localStorage. I don't really know why you'd need this, but why not?
Raw
thoughtpad.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<title>Thoughtpad</title>
<meta name="description" content="Page description, shows up in search results. Should be no longer than 150-160 characters." />
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0 auto;
padding: 1em;
border: 0;
max-width: 960px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.5;
font-size: 1.25em;
color: #333;
background-color: #fafafa;
}
</style>
</head>
<body contenteditable></body>
<script>
// scroll to bottom of page
document.addEventListener('DOMContentLoaded', function(event) {
document.body.innerText = localStorage.getItem('text');
setTimeout(function(){
window.scrollTo(0, document.body.scrollHeight);
// put the cursor at the end of the text
// http://stackoverflow.com/a/3866442
const range = document.createRange();
range.selectNodeContents(document.body);
range.collapse(false);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}, 0);
});
document.body.addEventListener('keyup', function(event) {
localStorage.setItem('text', document.body.innerText);
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment