Initial commit
This commit is contained in:
commit
1500acf2fb
SSH Key Fingerprint:
SHA256:FsfHSVtt4BSm5AV+MG3KYJplFo8Q8+TWvSeud7Um4Oo
|
|
@ -0,0 +1,2 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
|
@ -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.
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<!-- Based on Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
|
||||
<style>
|
||||
path { fill: #000000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #ffffff; }
|
||||
}
|
||||
</style>
|
||||
<path d="M312 320h136V56c0-13.3-10.7-24-24-24H24C10.7 32 0 42.7 0 56v400c0 13.3 10.7 24 24 24h264V344c0-13.2 10.8-24 24-24zm129 55l-98 98c-4.5 4.5-10.6 7-17 7h-6V352h128v6.1c0 6.3-2.5 12.4-7 16.9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 616 B |
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A simple tool for counting words and characters">
|
||||
<title>Scratchpad</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="icon" href="icon.svg" type="image/svg+xml">
|
||||
</head>
|
||||
<body>
|
||||
<textarea id="input" autofocus placeholder="Write something! Text is auto-saved."></textarea>
|
||||
<div id="status"></div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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);
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue