<!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)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.