diff --git a/Real Time Character Counter/README.md b/Real Time Character Counter/README.md new file mode 100644 index 0000000..2b1a265 --- /dev/null +++ b/Real Time Character Counter/README.md @@ -0,0 +1,7 @@ +This is a Real-Time Character Counter webpage built using HTML, CSS and JS only. + +Working demonstration is given below: + + +https://github.com/urjabahad/Javascript-Projects/assets/127567639/a9fe3330-c826-473b-84fa-d21b6d44bde6 + diff --git a/Real Time Character Counter/index.html b/Real Time Character Counter/index.html new file mode 100644 index 0000000..c7b9bc3 --- /dev/null +++ b/Real Time Character Counter/index.html @@ -0,0 +1,84 @@ + + + + + + Character Counter + + + +
+

Real-Time Character Counter

+ +
+

+ Total: + 0 +

+

+ Remaining: + 80 +

+
+
+ + + diff --git a/Real Time Character Counter/script.js b/Real Time Character Counter/script.js new file mode 100644 index 0000000..7737b3f --- /dev/null +++ b/Real Time Character Counter/script.js @@ -0,0 +1,13 @@ + + document.addEventListener('DOMContentLoaded', function() { + const textarea = document.getElementById('textarea'); + const totalCounter = document.getElementById('total-counter'); + const remainingCounter = document.getElementById('remaining-counter'); + + textarea.addEventListener('input', function() { + const currentLength = textarea.value.length; + const maxLength = parseInt(textarea.getAttribute('maxlength'), 10); + totalCounter.textContent = currentLength; + remainingCounter.textContent = maxLength - currentLength; + }); + });