character counter exercise-preparation part of DOM

BaselAdoum · BaselAdoum · commit 2a86fe4038ed · 2025-11-19T09:34:13.000+01:00
diff --git a/prep/week9-prep/index.html b/prep/week9-prep/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script defer  src="script.js"></script>
+  </head>
+  <body>
+    <section>
+      <h3>Example character limit comment component!</h3>
+      <label for="comment-input">
+        Please enter your comment in the text area below
+      </label>
+      <textarea
+        id="comment-input"
+        name="comment-input"
+        rows="5"
+        maxlength="200"
+      ></textarea>
+      <p id="character-limit-info">You have 200 characters remaining</p>
+    </section>
+  </body>
+</html>
diff --git a/prep/week9-prep/script.js b/prep/week9-prep/script.js
@@ -0,0 +1,26 @@
+// const textarea = document.querySelector("textarea");
+// const remainingCharacters = textarea.maxLength - textarea.value.length;
+
+// const charactersLeftP = document.querySelector("#character-limit-info");
+// charactersLeftP.innerText = `You have ${remainingCharacters} characters remaining`;
+
+// function updateCharacterLimit() {
+//   const remainingCharacters = textarea.maxLength - textarea.value.length;
+//   const charactersLeftP = document.querySelector("#character-limit-info");
+//   charactersLeftP.innerText = `You have ${remainingCharacters} characters remaining`;
+// }
+
+// textarea.addEventListener("keyup", updateCharacterLimit);
+
+// refactor version 
+const textarea = document.querySelector("textarea");
+
+updateCharacterLimit();
+
+function updateCharacterLimit() {
+  const remainingCharacters = textarea.maxLength - textarea.value.length;
+  const charactersLeftP = document.querySelector("#character-limit-info");
+  charactersLeftP.innerText = `You have ${remainingCharacters} characters remaining`;
+}
+
+textarea.addEventListener("keyup", updateCharacterLimit);
diff --git a/prep/week9-prep/style.css b/prep/week9-prep/style.css
