``````  <!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
<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>``````
``````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;
}

input {
border: 1px solid black;
}

.result-box{
border : 1px solid black;
margin-top: 20px
}

.the-text, .the-res{
color:red
}``````
``````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`;
}

e.preventDefault();
const inputVal = form.inputCari.value
if(!isNaN(inputVal)) return
if(inputVal.trim().length === 0) return
const res = searchUpperCase(inputVal)

render(inputVal,res)
})``````

### External CSS

This Pen doesn't use any external CSS resources.

### External JavaScript

This Pen doesn't use any external JavaScript resources.