Skip to content

Instantly share code, notes, and snippets.

@Starsign68
Last active September 21, 2021 17:44
Show Gist options
  • Save Starsign68/b303b2e3fabef1f8e4e0c9a56e91f495 to your computer and use it in GitHub Desktop.
Save Starsign68/b303b2e3fabef1f8e4e0c9a56e91f495 to your computer and use it in GitHub Desktop.
Note Pad
data:text/html;charset=utf-8;base64,PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KPHN0eWxlPg0KYm9keSAqIHsNCiAgYm9yZGVyLXJhZGl1czogNXB4Ow0KICBwYWRkaW5nOiA1cHg7DQogIGZvbnQtZmFtaWx5OiAgbW9ub3NwYWNlOw0KICBmb250LXNpemU6IDE2cHg7DQogIGJhY2tncm91bmQ6ICMwQjJDNzU7DQp9DQoudGV4dGFyZWFFbGVtZW50IHsNCiAgd2lkdGg6IDk1JTsNCiAgdGV4dC1hbGlnbjogbGVmdDsNCiAgb3V0bGluZTogbm9uZTsNCiAgbWFyZ2luOiAyMHB4IGF1dG87DQogIGNvbG9yOiAjRkJGRUY5Ow0KICBsaW5lLWhlaWdodDogMS41Ow0KfQ0KDQpbY2xhc3NePWZ0XSB7DQogIG1hcmdpbjogYXV0bzsNCiAgcG9zaXRpb246IGZpeGVkOw0KICBib3R0b206IDVweDsNCiAgd2lkdGg6IGF1dG87DQogIGNvbG9yOiAjQURGRjJGOw0KfQ0KDQpbY2xhc3MkPXJdew0KICByaWdodDogNXB4Ow0KfQ0KDQpbY2xhc3MkPWxdIHsNCiAgbGVmdDogNXB4Ow0KfQ0KDQoNCjwvc3R5bGU+DQo8L2hlYWQ+DQo8Ym9keSBzdHlsZT0iYmFja2dyb3VuZDogIzBBMUU0QSI+DQo8ZGl2IGNsYXNzPSJ0ZXh0YXJlYUVsZW1lbnQiIGlkPSJ3b3JkIiBjb250ZW50ZWRpdGFibGU+PC9kaXY+DQoNCgk8ZGl2IGNsYXNzPSJmdHIiPiAgIA0KCVdvcmQgQ291bnQ6PHNwYW4gaWQ9c2hvdz4wPC9zcGFuPg0KICAgIDwvZGl2PjxkaXYgY2xhc3M9J2Z0bCc+PHNwYW4gaWQ9ImNsb2NrIj5USU1FPC9zcGFuPg0KCTwvZGl2Pg0KCTxzY3JpcHQ+DQogICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiI3dvcmQiKS5hZGRFdmVudExpc3RlbmVyKCJrZXl1cCIsIGZ1bmN0aW9uIGNvdW50V29yZCgpIHsNCgkJbGV0IHJlcyA9IFtdOw0KCQlsZXQgc3RyID0gdGhpcy5pbm5lclRleHQucmVwbGFjZSgvW3Ruci4/IV0vZ20sICIgIikuc3BsaXQoIiAiKTsNCgkJc3RyLm1hcCgocykgPT4gew0KCQkJbGV0IHRyaW1TdHIgPSBzLnRyaW0oKTsNCgkJCWlmICh0cmltU3RyLmxlbmd0aCA+IDApIHsNCgkJCXJlcy5wdXNoKHRyaW1TdHIpOw0KCQkJfQ0KCQl9KTsNCgkJZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiI3Nob3ciKS5pbm5lclRleHQgPSByZXMubGVuZ3RoOw0KCQl9KTsNCiAgICAgICAgDQogICAgICAgIA0KIGZ1bmN0aW9uIHN0YXJ0VGltZSgpIHsNCiBjb25zdCB0ID0gbmV3IERhdGUoKTsNCiAgbGV0IGggPSB0LmdldEhvdXJzKCk7DQogIGxldCBtID0gdC5nZXRNaW51dGVzKCk7DQogIGxldCBzID0gdC5nZXRTZWNvbmRzKCk7DQogIG0gPSBjaGVja1RpbWUobSk7DQogIHMgPSBjaGVja1RpbWUocyk7DQogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjbG9jaycpLmlubmVyVGV4dCA9IGggKyAiOiIgKyBtICsgIjoiICsgczsNCiAgc2V0VGltZW91dChzdGFydFRpbWUsIDEwMDApOw0KfQ0Kc3RhcnRUaW1lKCk7DQpmdW5jdGlvbiBjaGVja1RpbWUoaSkgew0KICBpZiAoaSA8IDEwKSB7aSA9ICIwIiArIGl9OyAgLy8gYWRkIHplcm8gaW4gZnJvbnQgb2YgbnVtYmVycyA8IDEwDQogIHJldHVybiBpOw0KfQ0KCTwvc2NyaXB0Pg0KPC9ib2R5Pg0KPC9odG1sPg==
<!DOCTYPE html>
<html>
<head>
<style>
body * {
border-radius: 5px;
padding: 5px;
font-family: monospace;
font-size: 16px;
background: #0B2C75;
}
.textareaElement {
width: 95%;
text-align: left;
outline: none;
margin: 20px auto;
color: #FBFEF9;
line-height: 1.5;
}
[class^=ft] {
margin: auto;
position: fixed;
bottom: 5px;
width: auto;
color: #ADFF2F;
}
[class$=r]{
right: 5px;
}
[class$=l] {
left: 5px;
}
</style>
</head>
<body style="background: #0A1E4A">
<div class="textareaElement" id="word" contenteditable></div>
<div class="ftr">
Word Count:<span id=show>0</span>
</div><div class='ftl'><span id="clock">TIME</span>
</div>
<script>
document.querySelector("#word").addEventListener("keyup", function countWord() {
let res = [];
let str = this.innerText.replace(/[tnr.?!]/gm, " ").split(" ");
str.map((s) => {
let trimStr = s.trim();
if (trimStr.length > 0) {
res.push(trimStr);
}
});
document.querySelector("#show").innerText = res.length;
});
function startTime() {
const t = new Date();
let h = t.getHours();
let m = t.getMinutes();
let s = t.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerText = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
startTime();
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
document.querySelector("#word").addEventListener("keyup", function onKeyDown(e) {
if (e.keyCode === 9) { // tab key
e.preventDefault(); // this will prevent us from tabbing out of the editor
// now insert four non-breaking spaces for the tab key
var editor = document.getElementById("word");
var doc = editor.ownerDocument.defaultView;
var sel = doc.getSelection();
var range = sel.getRangeAt(0);
var tabNode = document.createTextNode("\u00a0\u00a0\u00a0\u00a0");
range.insertNode(tabNode);
range.setStartAfter(tabNode);
range.setEndAfter(tabNode);
sel.removeAllRanges();
sel.addRange(range);
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body * {
border-radius: 5px;
padding: 5px;
font-family: monospace;
font-size: 16px;
background: #0B2C75;
}
.textareaElement {
width: 95%;
text-align: left;
outline: none;
margin: 20px auto;
color: #FBFEF9;
line-height: 1.5;
}
[class^=ft] {
margin: auto;
position: fixed;
bottom: 5px;
width: auto;
color: #ADFF2F;
}
[class$=r]{
right: 5px;
}
[class$=l] {
left: 5px;
}
</style>
</head>
<body style="background: #0A1E4A">
<div class="textareaElement" id="word" contenteditable></div>
<div class="ftr">
Word Count:<span id=show>0</span>
</div><div class='ftl'><span id="clock">TIME</span>
</div>
<script>
document.querySelector("#word").addEventListener("keyup", function countWord() {
let res = [];
let str = this.innerText.replace(/[tnr.?!]/gm, " ").split(" ");
str.map((s) => {
let trimStr = s.trim();
if (trimStr.length > 0) {
res.push(trimStr);
}
});
document.querySelector("#show").innerText = res.length;
});
function startTime() {
const t = new Date();
let h = t.getHours();
let m = t.getMinutes();
let s = t.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('clock').innerText = h + ":" + m + ":" + s;
setTimeout(startTime, 1000);
}
startTime();
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment