JavaScript Program to Count the Number of Capital Letters in a Sentence

Samuel
11 Jan, 2022

Javascript Program to Count Number Sentence In this JavaScript tutorial, we will show you the best way to create a JavaScript Program to Count the Number of Capital Letters in a Sentence. You can find methods and ideas for counting capital letters in JavaScript. But because of this CodeSpeedy, we always provide the simplest and easiest method to get solution for every problem.

Many may be wondering Is there a way to count the number of uppercase letters in a string using Javascript? I can read each letter in the alphabet and compare it to each letter in concatenating javascript strings, but I think this would be too slow. Or, is there a regular expression that can tell if a string contains more than one uppercase letter? And yes, there is always more than one way to do things.

In this post, we will discuss a tutorial on making a JavaScript Program to Count the Number of Capital Letters in a Sentence. You can also read the previous post about How to make a calculator with HTML, CSS , JavaScript in Notepad. For that, see the following review to the end so that you can understand the javascript program to count the number of vowels.

So in this post, we will learn the following:

  • How to count capital letters in JavaScript (Capital letters count)
  • How to count lowercase in JavaScript (Count lowercase)
  • JavaScript Program to Count the Number of Capital Letters in a Sentence

Counting Capital Letters in JavaScript


The below code will count the number of uppercase letters in JavaScript (Count of uppercase letters)

<!DOCTYPE html>
<html>
<head>
<title>Hitung huruf kapital dalam JavaScript</title>
</head>
<body>
Enter some text: <br>
<input type="text" id="textbox">
<button onclick="count()">
<br>
<script type="text/javascript">
function count(){
var mytext= document.getElementById("textbox").value;
var numUpper = (mytext.match(/[A-Z]/g) || []).length;
alert(numUpper);
}
</script>
</body>
</html>
view raw app.js hosted with ❤ by GitHub

Here match() and regular expressions are used to count capital letters. We have created a button and set the count() function.

In the tag script, there is a count() function to retrieve the value entered in the input box above. We have stored the value in a JavaScript variable.

var mytext= document.getElementById("textbox").value;
view raw app.js hosted with ❤ by GitHub

And this is the main line for calculating uppercase letters with the help of regular expressions.

var numUpper = (mytext.match(/[A-Z]/g) || []).length;
view raw app.js hosted with ❤ by GitHub

Counting Lowercase in JavaScript


The below code will count the number of lowercase letters in JavaScript (Count of lowercase letters)

<!DOCTYPE html>
<html>
<head>
<title>Hitung huruf kecil dalam JavaScript</title>
</head>
<body>
Enter some text: <br>
<input type="text" id="textbox">
<button onclick="count()">
<br>
<script type="text/javascript">
function count(){
var mytext= document.getElementById("textbox").value;
var numUpper = (mytext.match(/[a-z]/g) || []).length;
alert(numUpper);
}
</script>
</body>
</html>
view raw app.js hosted with ❤ by GitHub

JavaScript Functions:

function count(){
var mytext= "anY tEXT";
var numUpper = (mytext.match(/[a-z]/g) || []).length;
alert(numUpper);
}
view raw app.js hosted with ❤ by GitHub

JavaScript Program to Count the Number of Capital Letters in a Sentence


As someone who wants to become a programmer, you have to practice more skills to solve a problem. Well, here we want to give a tutorial by creating a JavaScript Program to Count the Number of Capital Letters in Sentences.

I have a searchUpperCase function that accepts a string type argument with value SamuelPasaribu.

searchUpperCase("SamuelPasaribu")
view raw app hosted with ❤ by GitHub

So, the output is:

The sentence "SamuelPasaribu" has 2 uppercase letters.

In the above example, the resulting output is not displayed on the web page. Well, here your task is to make the program into a web page, like the example we will explain below.

Source Code Program Counting the Number of Capital Letters


There are 3 programming language codes that are used to create a JavaScript Program to Count the Number of JavaScript Capital Letters in a Sentence.

  • HTML
  • CSS
  • JavaScript

1. HTML


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<div class="kotak">
<form>
<label for="inputCari" class="labelInput">
Masukan Kata atau kalimat
</label>
<input id="inputCari" name="inputCari">
<button type="submit" class="btn">Cari</button>
</form>
</div>
<div class="result-box">
Ayo mulai Menghitung Jumlah Huruf Kapital dalam Kalimat. Masukkan kata di kotak pencarian dan klik tombol Cari untuk Menghitung Jumlah Huruf Kapital 🚥
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

2. CSS


body{
min-height: 100vh;
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
form {
display : flex;
flex-direction: column;
}
.btn{
align-self: auto;
}
.labelInput{
display: flex
}
.kotak > label,input {
margin: 10px 0;
padding: 5px
}
input {
border: 1px solid black;
border-radius: 10px;
}
.result-box{
border : 1px solid black;
padding: 5px;
margin-top: 20px
}
.the-text, .the-res{
color:red
}
view raw style.css hosted with ❤ by GitHub

3. JavaScript


const form = document.querySelector('form')
const resultBox = document.querySelector('.result-box')
function searchUpperCase(str){
const splitStr = str.split('')
const reg = /[A-Z]/;
const isUpperCase = []
splitStr.forEach((string) => {
const res = reg.test(string)
if(res){
isUpperCase.push(string)
}
})
console.log(isUpperCase)
return isUpperCase.length
}
function render(text,res){
// Reset
resultBox.innerHTML = ''
resultBox.innerHTML = `Pada kalimat <span class="the-text">${text}</span> memiliki <span class="the-res">${res}</span> huruf besar`;
}
form.addEventListener('submit' , (e) => {
e.preventDefault();
const inputVal = form.inputCari.value
if(!isNaN(inputVal)) return
if(inputVal.trim().length === 0) return
const res = searchUpperCase(inputVal)
render(inputVal,res)
})
view raw app.js hosted with ❤ by GitHub

Finished...

Display Results


Now try to run the program by opening the HTML file in the folder where you saved it. For the results you can see the display of the live demo below.


Conclusion


As developers or users, we can easily find out the number of letters of a word. For example: "Learning Program", there are 14 letter sentences: 2 capital letters, and 11 lowercase letters. Apart from that, you can also modify the above source code to develop it into a more useful and better program. For that you need skills in modifying the source codes that you have. By learning the coding system can make it easier for you to interact in building websites, applications, and various other purposes.

That's the post about JavaScript Program to Count the Number of Capital Letters in Sentences. Hopefully this article is useful and can help you. Let's share this article to help other friends. Thank You!
Samuel

Samuel

Hello i'm Junior Web Developer from Medan, North Sumatera, Indonesia. I like Design and UI/UX Design

Next Post Previous Post
No Comment
Add Comment
comment url