Rakesh9100 · Rakesh9100 · Feb 8, 2024 · Feb 6, 2024 · Feb 6, 2024 · Feb 7, 2024
diff --git a/Calculators/2D-Distance-Calculator/README.md b/Calculators/2D-Distance-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">2D Distance Calculator</p>
+
+## Description :-
+
+Calculates the distance between two points on a 2D plane.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/ebc5191e-87c5-4e63-aae1-ec9e72bec5db)
diff --git a/Calculators/Vowel-Consonant-Calculator/README.md b/Calculators/Vowel-Consonant-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Vowel and Consonant Calculator</p>
+
+## Description :-
+
+Calculates number of vowels and consonants in a given paragraph.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/13e811ac-301e-4465-aac1-e8afb16294d1)
diff --git a/Calculators/Vowel-Consonant-Calculator/index.html b/Calculators/Vowel-Consonant-Calculator/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vowel Consonant Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Vowel and Consonant Counter</h1>
+        <textarea id="inputText" rows="4" placeholder="Enter your text here..."></textarea><br>
+        <div class="btn">
+            <button id="countButton">Count</button>
+            <button id="reset-btn">Reset</button>
+        </div>
+        <div id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Vowel-Consonant-Calculator/script.js b/Calculators/Vowel-Consonant-Calculator/script.js
@@ -0,0 +1,25 @@
+let count = document.querySelector("#countButton");
+let reset = document.querySelector("#reset-btn");
+let input = document.querySelector("#input");
+
+count.addEventListener("click", function () {
+    let inputText = document.getElementById("inputText").value.toLowerCase();
+    let vowels = 0;
+    let consonants = 0;
+    for (let i = 0; i < inputText.length; i++) {
+        let char = inputText[i];
+        if (/[aeiou]/.test(char)) {
+            vowels++;
+        } else if (/[a-z]/.test(char)) {
+            consonants++;
+        }
+    }
+    var result = "Vowels: " + vowels + "<br>Consonants: " + consonants;
+    document.getElementById("result").innerHTML = result;
+});
+
+reset.addEventListener("click", () => {
+    document.getElementById("inputText").value = "";
+    document.getElementById("result").innerHTML = "";
+
+})
diff --git a/Calculators/Vowel-Consonant-Calculator/style.css b/Calculators/Vowel-Consonant-Calculator/style.css
@@ -0,0 +1,82 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(45deg, #ff0000, #0000ff);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    background-color: antiquewhite;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    text-align: center;
+    max-width: 400px;
+    width: 100%;
+}
+
+h1 {
+    color: rgb(54, 47, 255);
+    text-shadow: 0 0 10px rgba(115, 111, 3, 0.114);
+}
+
+#inputText {
+    width: 300px;
+    height: 200px;
+    margin-bottom: 20px;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.btn{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+
+#countButton {
+    padding: 10px 20px;
+    font-size: 1.25rem;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#countButton:hover {
+    background-color: #1e6021;
+}
+
+#result {
+    margin-top: 20px;
+    font-size: 18px;
+}
+
+#reset-btn{
+    padding: 10px 20px;
+    font-size: 1.25rem;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#reset-btn:hover {
+    background-color: #1e6021;
+}
diff --git a/index.html b/index.html
@@ -1737,6 +1737,20 @@ <h3>Calculates tax liability based on user input annual income.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Vowel Consonant Calculator</h2>
+                <h3>Calculates number of vowels and consonants in a given paragraph.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Vowel-Consonant-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Vowel-Consonant-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Calculator Section Ends Here  -->