Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vowel Consonant Counter is added #2205

Merged
merged 1 commit into from
Jul 7, 2024
Merged

Vowel Consonant Counter is added #2205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions Vowel Consonant Counter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Vowel Consonant Calculator</title>
</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>
10 changes: 10 additions & 0 deletions Vowel Consonant Counter/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"manifest_version": 3,
"name": "Vowel Consonant Counter",
"version": "1.0",
"description": "Calculate the number of vowels and consonants",
"action": {
"default_popup": "index.html"
},
"permissions": []
}
25 changes: 25 additions & 0 deletions Vowel Consonant Counter/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = "";

})
82 changes: 82 additions & 0 deletions Vowel Consonant Counter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading