meta added

amit265 · amit265 · commit bf8baf017662 · 2024-08-05T13:39:10.000+05:30
diff --git a/word-counter/index.html b/word-counter/index.html
@@ -2,6 +2,29 @@
 <html lang="en">
 
 <head>
+    <!-- Meta Description -->
+    <meta name="description"
+        content="Enhance your productivity with our JavaScript Word and Character Counter tool. Accurately count words and characters in real-time, perfect for writers, editors, and students. Simplify text analysis with instant results and an intuitive interface. Ideal for ensuring word limits and optimizing content length across various platforms." />
+
+    <!-- Meta Keywords -->
+    <meta name="keywords"
+        content="word counter, character counter, JavaScript tool, text analysis, word count tool, character count, writing tool, text editor, real-time word count, productivity tool, content length optimization" />
+
+    <!-- Open Graph Tags for Social Media -->
+    <meta property="og:title" content="JavaScript Word and Character Counter" />
+    <meta property="og:description"
+        content="Accurately count words and characters in real-time with our intuitive JavaScript tool, perfect for writers and editors." />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://coderespite.com/projects/js-projects/word-counter/" />
+    <meta property="og:image" content="https://coderespite.com/image/js-projects/word-counter.png" />
+
+    <!-- Twitter Card Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="JavaScript Word and Character Counter" />
+    <meta name="twitter:description"
+        content="Effortlessly count words and characters with our JavaScript tool. Ideal for writers, students, and editors to streamline text analysis." />
+    <meta name="twitter:image" content="https://coderespite.com/image/js-projects/word-counter.png" />
+
     <meta charset="UTF-8">
     <link rel="stylesheet" href="styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/word-counter/script.js b/word-counter/script.js
@@ -14,7 +14,7 @@ const count = () => {
     return element !== "";
   });
 
-  console.log(filtered);
+//   console.log(filtered);
 
   wordcount.innerText = filtered.length;
 };
diff --git a/word-counter/styles.css b/word-counter/styles.css
@@ -5,18 +5,17 @@
 }
 
 body {
-    height: 100vh;
     background-color: black;
     color: white;
     display: flex;
     justify-content: center;
-    align-items: center;
+    margin-top: 5rem;
 }
 
 .main {
-    background-color: whitesmoke;
+    background-color: rgb(0, 10, 146);
     border-radius: 10px;
-    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.7);
+    box-shadow: 0px 0px 10px rgba(223, 160, 160, 0.7);
     min-width: 400px;
     width: 650px;
     max-width: 50%;
@@ -34,15 +33,26 @@ textarea {
     border-radius: 10px;
     padding: 0.5rem;
     font-size: 1rem;
+    text-justify: distribute;
 }
 
 h1 {
     font-size: 1.5rem;
     text-align: center;
+    color: blueviolet;
 }
 
 .count {
     display: flex;
     justify-content: space-around;
     font-size: 1.2rem;
+}
+
+span {
+    color: white;
+}
+
+h5 {
+    color: blueviolet;
+
 }
