commit 1500acf2fbbd00d8d78800df9d5c1fc957e13572 Author: René Puls Date: Mon Jan 16 20:50:34 2023 +0100 Initial commit diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..dfe0770 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..57f563c --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 René Puls + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/icon.svg b/icon.svg new file mode 100644 index 0000000..cb7eb6a --- /dev/null +++ b/icon.svg @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a035a2 --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + + + + Scratchpad + + + + + +
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..d34f2c3 --- /dev/null +++ b/script.js @@ -0,0 +1,44 @@ +"use strict"; + +function countWords(s) { + // remove punctuation + s = s.replace(/\p{P}/gu, ""); + + let m = s.match(/\S+/g); + return m ? m.length : 0; +} + +function update(statusBar, textArea) { + let text = textArea.value; + let qualifier = ""; + + if (textArea.selectionStart < textArea.selectionEnd) { + text = text.slice(textArea.selectionStart, textArea.selectionEnd); + qualifier = "in selection"; + } + + let charCount = text.trim().length; + let wordCount = countWords(text); + statusBar.innerText = `${charCount} characters　${wordCount} words　${qualifier}`; + + localStorage.setItem("text", text); +} + +window.addEventListener("load", (event) => { + let textArea = document.getElementById("input"); + let statusBar = document.getElementById("status"); + + let savedText = localStorage.getItem("text"); + if (savedText) { + textArea.value = savedText; + } + + textArea.addEventListener("input", (event) => { + update(statusBar, textArea); + }); + document.addEventListener("selectionchange", (event) => { + update(statusBar, textArea); + }); + + update(statusBar, textArea); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..cbd8832 --- /dev/null +++ b/style.css @@ -0,0 +1,51 @@ +body { + margin: 0; + padding: 0; + background-color: #111; + color: #eee; + font-family: sans-serif; +} + +#input { + background-color: transparent; + color: inherit; + font-size: 1rem; + position: absolute; + display: block; + box-sizing: border-box; + line-height: 150%; + width: 100%; + height: calc(100% - 2rem); + padding: 1rem; + border-style: none; + resize: none; +} + +#input:focus { + outline: 0; +} + +#status { + background-color: #333; + color: #fff; + position: absolute; + bottom: 0; + width: 100%; + box-sizing: border-box; + padding: 0 1rem; + line-height: 2rem; + border-top: 1px solid #666; +} + +@media (prefers-color-scheme: light) { + body { + background-color: #eee; + color: #111; + } + + #status { + background-color: #ccc; + color: #000; + border-top: 1px solid #999; + } +}