fix: add 190 character limit

Thomascountz · Feb 1, 2024 · 0f823dd · 0f823dd
1 parent 9d2803f
commit 0f823dd
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/app.js b/app.js
@@ -23,6 +23,7 @@ function getDomElements() {
     copyPublicKeyButton: document.getElementById("copy-public-key-url"),
     decryptedMessageContainer: document.getElementById("decrypted-message-container"),
     includePublicKeyCheckbox: document.getElementById("include-public-key"),
+    characterCounter: document.getElementById("char-count"),
     copyEncryptedMessageButton: document.getElementById("copy-encrypted-message-url"),
     encryptedMessageUrl: document.getElementById("encrypted-message-url"),
     feedbackElement: document.getElementById("feedback"),
@@ -36,7 +37,8 @@ async function handleRequestFromUrl(elements) {
   const keyRequest = urlParams.get("keyRequest");
 
   if (keyRequest) {
-    elements.decryptedMessageElement.textContent = "==!CLEARTEXT!==\n\nTHE SENDER HAS REQUESTED YOUR PUBLIC KEY.\n\n==!CLEARTEXT!=="
+    elements.decryptedMessageElement.textContent =
+      "==!CLEARTEXT!==\n\nTHE SENDER HAS REQUESTED YOUR PUBLIC KEY.\n\n==!CLEARTEXT!==";
     elements.decryptedMessageContainer.style.display = "block";
   }
 }
@@ -61,6 +63,10 @@ async function handlePublicKeyFromUrl(elements) {
 }
 
 function attachEventListeners(elements) {
+  elements.messageInput.addEventListener("input", () => {
+    const currentLength = elements.messageInput.value.length;
+    elements.characterCounter.textContent = `${currentLength}/190`;
+  });
   elements.encryptMessageButton.addEventListener("click", () =>
     encryptMessageHandler(elements),
   );
@@ -110,7 +116,7 @@ async function encryptMessageHandler(elements) {
 
     // If the "Include Public Key" checkbox is checked, append the public key
     if (elements.includePublicKeyCheckbox.checked) {
-      window.console.log("HERE")
+      window.console.log("HERE");
       const currentUserPublicKey = localStorage.getItem("publicKey");
       if (currentUserPublicKey) {
         queryParams += `&publicKey=${currentUserPublicKey}`;

diff --git a/index.html b/index.html
@@ -43,7 +43,8 @@ <h3>Incoming Message</h3>
       </div>
       <div id="message-container" style="display: none">
         <h3>Your Message</h3>
-        <textarea rows="8" id="message" placeholder="Enter your message"></textarea>
+        <textarea rows="8" id="message" maxlength="190" placeholder="Enter your message"></textarea>
+        <div id="char-count">0/190</div>
         <div
           id="include-public-key-container"
           title="Enable this option to append your public key to the encrypted message URL, allowing recipients to easily reply to your message"

diff --git a/styles.css b/styles.css
@@ -123,6 +123,14 @@ textarea {
   color: white;
 }
 
+#char-count {
+  font-family: "Fira Code", monospace;
+  color: #718096;
+  font-size: 0.8em;
+  margin-top: 4px;
+  text-align: right;
+}
+
 .include-public-key-checkbox {
   margin-right: 10px;
 }