Skip to content

Instantly share code, notes, and snippets.

@smcllns

smcllns/quicknote.html

Last active February 15, 2020 19:26
Show Gist options
  • Save smcllns/8b727361ce4cf55cbc017faaefbbf951 to your computer and use it in GitHub Desktop.
Save smcllns/8b727361ce4cf55cbc017faaefbbf951 to your computer and use it in GitHub Desktop.
Download ZIP
A Data URI for taking quick notes and saving to a .txt file. To Demo, paste the gist into your address bar (it's a valid URL).
Raw
quicknote.html
data: text/html,
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
aside {
display: flex;
margin-bottom: 0.5rem;
}
header {
flex: 1;
}
article {
width: calc( 100% - 1rem );
max-width: 30rem;
background: white;
margin: 0 auto;
border-radius: 0.5rem;
padding: 1rem 0.5rem;
flex: 1;
}
body {
background: grey;
display: flex;
flex-direction: column;
margin: 0.5rem;
font-family: sans-serif;
}
</style>
</head>
<body>
<aside>
<header></header>
<button>Save</button>
<a hidden>Download</a>
</aside>
<article contenteditable />
<script>
const save = document.querySelector('aside button'),
link = document.querySelector('aside a'),
title = document.querySelector('aside header'),
note = document.querySelector('article'),
date = new Date(),
datePretty = `${date.getFullYear()}-${date.getMonth().toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
title.innerText = datePretty;
const download = e => {
const data = new Blob([note.innerText], {type: 'text/plain'});
link.href = window.URL.createObjectURL(data);
link.download = `${datePretty}.txt`;
link.click();
};
save.addEventListener('click', download);
window.addEventListener('beforeunload',download);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment