Skip to content

Commit 76a2a8b

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1893 from iamabir04/iamabir04-new-proj-vowel-checker
[SSOC 2.0] Issue Fix #1884- New project "Vowel Checker"
2 parents 5baa34d + 45386d5 commit 76a2a8b

5 files changed

Lines changed: 178 additions & 0 deletions

File tree

‎Projects/Vowel Checker/README.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Description
2+
3+
<h1>Welcome to Vowel Checker - Your Ultimate Vowel Analysis Tool! </h1>
4+
5+
Are you looking to effortlessly check the number of vowels in a text or string? Look no further! Vowel Checker, a dynamic website crafted using HTML, CSS, and JavaScript, is here to simplify your vowel counting needs.
6+
7+
<h2>How does it work?</h2>
8+
9+
With Vowel Checker, you can simply input your text or paste your string into the user-friendly interface, and our powerful JavaScript engine will quickly analyze it. In just a blink of an eye, you'll get a clear breakdown of each vowel's count, including both uppercase and lowercase instances.
10+
11+
<h2>Key Features:</h2>
12+
13+
✅ Instant Vowel Analysis: Obtain real-time results with lightning speed.
14+
15+
✅ User-Friendly Interface: Our intuitive design ensures a seamless user experience.
16+
17+
✅ Accurate Counting: Vowel Checker leaves no vowel unnoticed, providing precise results.
18+
19+
✅ Versatility: Use it for words, sentences, or even entire paragraphs!
20+
21+
22+
23+
<h2>Why Choose Vowel Checker?</h2>
24+
25+
Whether you're a student, a writer, a linguist, or simply curious about language patterns, Vowel Checker is an indispensable tool for various scenarios. It aids in spelling assessments, language studies, and content optimization, all with just a few clicks!
26+
27+
28+
# Checklist:
29+
30+
<!----Please delete options that are not relevant.And in order to tick the check box just but x inside them for example [x] like this----->
31+
- [x] I have made this from my own
32+
- [x] I have taken help from some online resourses
33+
- [x] My code follows the style guidelines of this project
34+
- [x] I have performed a self-review of my own code
35+
- [x] I have commented my code, particularly in hard-to-understand areas
36+
- [x] I have made corresponding changes to the documentation
37+
- [x] My changes generate no new warnings
38+
- [x] The title of my pull request is a short description of the requested changes.
39+
40+
#Working Screenshots:
41+
42+
![1](https://github.com/iamabir04/Vowel-Checker/assets/108453813/c7823e0f-20b2-4535-9a78-982813fc1a26)
43+
![2](https://github.com/iamabir04/Vowel-Checker/assets/108453813/4d34bf8b-185d-4a86-9c89-0fb214809687)
44+
45+
46+

‎Projects/Vowel Checker/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Vowel Checker</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Vowel Checker</h1>
12+
<textarea id="inputText" placeholder="Enter Your Text Here"></textarea>
13+
<button onclick="checkVowels()">Check Vowels</button>
14+
<p id="result">Result</p>
15+
</div>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎Projects/Vowel Checker/pexels-suzy-hazelwood-1822568.jpg‎

2.64 MB
Loading

‎Projects/Vowel Checker/script.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
function checkVowels(){
2+
var text = document.getElementById("inputText").value;
3+
var button = document.getElementById("btn");
4+
var toGet = document.getElementById("inputText");
5+
var vowelCount=0;
6+
//convert it into lowercase
7+
text = text.toLowerCase();
8+
9+
for(var i =0 ; i<text.length ; i++)
10+
{
11+
var char= text.charAt(i);
12+
if(isVowel(char)){
13+
vowelCount++;
14+
}
15+
}
16+
var result= document.getElementById("result");
17+
result.textContent = "Total Vowels: "+vowelCount;
18+
}
19+
20+
function isVowel(char){
21+
var vowels=["a","e","i","o","u"];
22+
return vowels.includes(char);
23+
}

‎Projects/Vowel Checker/style.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
body{
2+
font-family: Arial, Helvetica, sans-serif;
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
height: 100vh;
7+
background-color: rgb(173,204,204);
8+
background-image: url(pexels-suzy-hazelwood-1822568.jpg);
9+
background-size: cover;
10+
background-position: center;
11+
}
12+
13+
.container{
14+
background-color: rgba(255,255,255,0.40);
15+
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
16+
border-radius: 40px;
17+
padding: 20px;
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
width: 50vw;
22+
height: 50vh;
23+
}
24+
25+
.container:hover{
26+
27+
box-shadow: rgb(255, 102, 179) 0px 20px 30px -10px;
28+
}
29+
30+
h1{
31+
font-size: 36px;
32+
margin-bottom: 20px;
33+
color: black;
34+
text-align: center;
35+
36+
}
37+
38+
textarea{
39+
width: 40vw;
40+
height: 40vh;
41+
margin: 10px auto;
42+
display: block;
43+
font-size: 24px;
44+
padding: 10px;
45+
border: 1px solid #dddddd;
46+
border-radius: 5px;
47+
resize: none;
48+
opacity: 70%;
49+
}
50+
51+
textarea:hover {
52+
opacity: 100%;
53+
}
54+
55+
button{
56+
padding: 10px 20px;
57+
background-color: #4caf50;
58+
color: #ffffff;
59+
border: none;
60+
font-size: 16px;
61+
font-weight: bold;
62+
border-radius: 5px;
63+
cursor: pointer;
64+
transition: background-color 0.3s ease;
65+
margin-top: 20px;
66+
}
67+
68+
button:hover{
69+
background-color: #45a049;
70+
}
71+
72+
#result{
73+
font-size: 20px;
74+
margin-top: 20px;
75+
color: #000000;
76+
font-weight: bold;
77+
}
78+
79+
@media (max-width: 600px)
80+
{
81+
h1{
82+
font-size: 30px;
83+
}
84+
85+
}
86+
@media (max-width: 430px) {
87+
h1 {
88+
font-size: 20px;
89+
}
90+
91+
}

0 commit comments

Comments
 (0)