clear button added

Author: amit265

word-counter/index.html

@@ -37,6 +37,7 @@ <h1>Word and Letter counter</h1>
         <textarea name="counter" id="text-area" rows="10" placeholder="Enter text here"></textarea>
         <div class="count">
             <h5>Word : <span id="word-count">0</span></h5>
+            <button id="clear">Clear</button>
             <h5>Letter: <span id="letter-count">0</span></h5>
         </div>
     </div>

word-counter/script.js

@@ -1,6 +1,7 @@
 const textarea = document.getElementById("text-area");
 const wordcount = document.getElementById("word-count");
 const lettercount = document.getElementById("letter-count");
+const clear = document.getElementById("clear");
 
 textarea.addEventListener("keyup", () => {
   count();
@@ -18,3 +19,9 @@ const count = () => {
 
   wordcount.innerText = filtered.length;
 };
+
+clear.addEventListener("click", () => {
+  textarea.value = "";
+  wordcount.innerText = 0;
+  lettercount.innerText = 0;
+})

word-counter/styles.css

@@ -45,14 +45,32 @@ h1 {
 .count {
     display: flex;
     justify-content: space-around;
+    align-items: center;
     font-size: 1.2rem;
 }
 
 span {
     color: white;
+    padding: 10px;
+    
+
 }
 
 h5 {
     color: blueviolet;
 
+}
+
+button {
+    background-color: red;
+    border: none;
+    border-radius: 10px;
+    font-size: 1.2rem;
+    padding: 10px;
+    color: white;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: green;
 }