All Things Tech
Unlocking the Power of JavaScript: A Deep Dive into Vowel Counting Project

Unlocking the Power of JavaScript: A Deep Dive into Vowel Counting Project

A Symphony of JavaScript, HTML, and CSS in the Vowel Counter Project

Nnamdi S. Adibe's photo
Nnamdi S. Adibe
·

3 min read

Introduction

Embarking on my journey to become a software developer, I recently delved into a fascinating project that not only enhanced my coding skills but also resulted in a practical and stylish application. In this article, I'll take you through the process of creating a Vowel Counter using JavaScript, HTML, and CSS. The project not only solidified my understanding of these technologies but also allowed me to explore creative ways to present the application.

Setting the Stage with HTML

Let's begin by examining the HTML structure that forms the foundation of our Vowel Counter. The structure is designed to provide a user-friendly interface:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=*, initial-scale=1.0" />
    <title>Vowel Counter</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="container">
      <h1>Vowel Checker</h1>
      <textarea id="inputText" placeholder="Enter your text here"></textarea>
      <button onclick="checkVowels()">Count Vowels</button>
      <p id="result">Result</p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

The HTML defines a container with a title, a text area for user input, a button to trigger the vowel counting function, and a paragraph element to display the result.

JavaScript Magic: Counting Vowels

The JavaScript portion of the project is where the magic happens. The checkVowels function takes user input, converts it to lowercase, and iterates through each character, checking if it's a vowel. The isVowel helper function determines if a character is a vowel.

function checkVowels(){
    let text = document.getElementById("inputText").value;
    let vowelCount = 0;

    text = text.toLowerCase();

    for( let i = 0; i < text.length; i++){
        let char = text.charAt(i);
        if (isVowel(char)){
            vowelCount++;
        }
    }

    const result = document.getElementById('result');
    result.textContent = "Total Vowels: " + vowelCount;
}

function isVowel(char){
    const vowels = ["a","e","i","o","u"];
    return vowels.includes(char);
}

This JavaScript logic forms the core of our application, enabling it to accurately count the vowels in the provided text.

CSS: Bringing Style to Functionality

Now, let's dive into the style elements of the project. The CSS code is not just about aesthetics; it's about creating a visually appealing and user-friendly interface.

body {
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #18140f;
}

.container {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: myAni 1s infinite alternate;
}

@keyframes myAni {
    from{
        box-shadow: 0px 0px 10px rgba(0, 0px, 0px, 0.2);
    }

    to {
        box-shadow: 0px 0px 20px #fff,
        0px 0px 50px #2f3790,
        0px 0px 50px gray;
    }

}

h1 {
    color: bisque;
    font-size: 30px;
    margin-bottom: 20px;
}

textarea {
    width: 500px;
    height: 350px;
    margin: 10px auto;
    display: block;
    font-size: 24px;
    padding: 20px;
    color: #000;
    border: 1px solid #dddddd;
    border-radius: 5px;
    resize: none;
    animation: slideIn 1s reverse;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

button {
    padding: 15px 30px;
    background-color: #af7d4c;
    width: 500px;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #33022b;
}

#result {
    font-size: 20px;
    margin-top: 20px;
    color: azure;
    font-weight: bold;
    animation: slideIn 1s ease;
}

The CSS is designed to create a visually pleasing and responsive interface, with subtle animations that enhance the user experience.

Conclusion: A Journey of Learning

Building a Vowel Counter was not just a coding exercise; it was a journey of exploration and learning. From HTML structure to JavaScript functionality and CSS styling, every element came together to form a cohesive and stylish application. As I continue my path toward becoming a software developer, these hands-on projects serve as valuable milestones, reinforcing theoretical knowledge with practical implementation.

Feel free to explore the live project here and stay tuned for more exciting coding adventures!

I hope you found this useful. I would like to hear from you so feel free to drop a comment or connect with me via Twitter. Here is my GitHub repository for the codes.

JavaScriptHTML5CSS#codenewbiescode