Show character and line count (#33)

web/assets/css/style.css

@@ -266,6 +266,21 @@ html.embedded #footer, body.embedded #footer {
   border-radius: 10px;
 }
 
+.container #content_length_container {
+  position: fixed;
+  right: 30px;
+  bottom: 60px;
+  padding: 10px 15px;
+  background-color: #222222;
+  border-radius: 10px;
+}
+
+.container #content_length_container span {
+  background-color: #111111;
+  padding: 5px 10px;
+  border-radius: 10px;
+}
+
 #footer {
   position: fixed;
   bottom: 0;

web/assets/css/style.scss

@@ -222,6 +222,19 @@ html, body {
             border-radius: 10px;
         }
     }
+    & #content_length_container {
+        position: fixed;
+        right: 30px;
+        bottom: 60px;
+        padding: 10px 15px;
+        background-color: #222222;
+        border-radius: 10px;
+        & span {
+            background-color: #111111;
+            padding: 5px 10px;
+            border-radius: 10px;
+        }
+    }
 }
 
 #footer {

web/assets/js/modules/state.js

@@ -11,6 +11,9 @@ const INPUT_ELEMENT = document.getElementById("input");
 
 const LIFETIME_CONTAINER_ELEMENT = document.getElementById("lifetime_container");
 
+const CHARACTER_AMOUNT_ELEMENT = document.getElementById("characters");
+const LINES_AMOUNT_ELEMENT = document.getElementById("lines");
+
 const BUTTONS_DEFAULT_ELEMENT = document.getElementById("buttons_default");
 const BUTTON_NEW_ELEMENT = document.getElementById("btn_new");
 const BUTTON_SAVE_ELEMENT = document.getElementById("btn_save");
@@ -112,6 +115,7 @@ export async function initialize() {
 
     INPUT_ELEMENT.addEventListener("input", () => {
         updateLineNumbers(INPUT_ELEMENT.value);
+
         if (BUTTON_SAVE_ELEMENT.hasAttribute("disabled") && INPUT_ELEMENT.value.length > 0) {
             BUTTON_SAVE_ELEMENT.removeAttribute("disabled");
         }
@@ -147,6 +151,9 @@ function updateCode() {
 }
 
 function updateLineNumbers(content) {
+    CHARACTER_AMOUNT_ELEMENT.innerText = content.length;
+    LINES_AMOUNT_ELEMENT.innerText = content.split(/\n/).length;
+
     if (content == "") {
         LINE_NUMBERS_ELEMENT.innerHTML = "<span>></span>";
         return;

web/index.html

@@ -113,6 +113,9 @@
         <div id="lifetime_container" class="hidden">
             Lifetime: <span id="lifetime">loading...</span>
         </div>
+        <div id="content_length_container">
+            <span id="characters">0</span> characters, <span id="lines">0</span> lines
+        </div>
         <div id="linenos"><span>></span></div>
         <div id="content">
             <div id="code"></div>