Contador de Letras Maiúsculas

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>Contador de Letras Maiúsculas</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background: #eee;
            font: 16px Lucida sans, Arial, Helvetica, sans-serif;
            color: #333;
            text-align: center;
        }

        .form-wrapper #count {
            background-color: #426FC5;
            border: 1px solid #434446;
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #FFF;
            color: #fafafa;
            cursor: pointer;
            height: 42px;
            font: 15px Arial, Helvetica;
            padding: 0;
            text-transform: uppercase;
            text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
            width: 100px;
        }

        .form-wrapper #value {
            border: 1px solid #CCC;
            box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #FFF;
            border-radius: 3px;
            color: #999;
            font: 16px Lucida Sans, Trebuchet MS, Tahoma, sans-serif;
            height: 20px;
            padding: 10px;
            width: 320px;
        }

        h2 {
            font-size: 25px;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
    <h2>Contador de Letras Maiúsculas</h2>
    <form class="form-wrapper">
        <input type="text" id="value" placeholder="Digite um texto..." required>
        <input type="submit" value="Contar" id="count">
    </form>
    <p>Letras Maiúsculas: <span id="result"></span></p>
    <script>
        function countUpperCaseLetters(string) {
            const numUpper = string.length - string.replace(/[A-Z]/g, '').length
            return numUpper;
        }

        const button = document.querySelector('#count');

        button.addEventListener('click', function (e) {
            e.preventDefault();
            const string = document.querySelector('#value').value;
            const resultSpan = document.querySelector('#result');
            resultSpan.textContent = countUpperCaseLetters(string)
        });
    </script>
</body>

</html>