<!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>
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
}
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)
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.