bean.js

function countBs(beanString) {
    let count = 0
    for (let i = 0; i < beanString.length; i++) {
        const element = beanString[i];
        if (element === 'B') count++;
    }
    return count
}

let beanInput = document.querySelector('#beanInput')
let beanOutput = document.querySelector('#beanOutput')
beanInput.addEventListener('change', updateBean);
beanInput.addEventListener('keyup', updateBean);

function updateBean() {
    beanOutput.innerText = countBs(beanInput.value)
}

function countChar(string, char) {
    let count = 0;
	for (let i = 0; i < string.length; i++) {
		const element = string[i];
		if (element === char) count++;
	}
	return count;
}

let charInput = document.querySelector('#charInput')
let inputChar = document.querySelector('#inputChar')
let charOutput = document.querySelector('#charOutput')
let charSearch = document.querySelector('#charSearch')

charInput.addEventListener('change', updateChar);
charInput.addEventListener('keyup', updateChar);

inputChar.addEventListener('change', updateChar);
inputChar.addEventListener('keyup', updateChar);

function updateChar() {
    charOutput.innerText = countChar(charInput.value, inputChar.value)
    charSearch.innerText = inputChar.value
}

function countBs(string) {
    return countChar(string, 'B')
}