Sobre Você .js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre Você</title>
    <!-- Adicione o link para o CSS do Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-4">
        <h1 class="text-center">Sobre Você</h1>
        <div class="row">
            <!-- Coluna da esquerda (1ª coluna) - Campos de entrada -->
            <div class="col-md-6">
                <h2>Informações Pessoais</h2>
                <form>
                    <div class="form-group">
                        <label for="nome">Nome:</label>
                        <input type="text" class="form-control" id="nome" placeholder="Seu Nome">
                    </div>
                    <div class="form-group">
                        <label for="email">E-mail:</label>
                        <input type="email" class="form-control" id="email" placeholder="[email protected]">
                    </div>
                    <div class="form-group">
                        <label for="telefone">Telefone:</label>
                        <input type="tel" class="form-control" id="telefone" placeholder="(11) 1234-5678">
                    </div>
                    <div class="form-group">
                        <label for="dataNascimento">Data de Nascimento:</label>
                        <input type="date" class="form-control" id="dataNascimento">
                    </div>
                    <div class="form-group">
                        <label for="sobreVoce">Sobre Você:</label>
                        <textarea class="form-control" id="sobreVoce" rows="4" placeholder="Conte-nos mais sobre você..."></textarea>
                    </div>
                </form>
            </div>

            <!-- Coluna da direita (2ª coluna) - Exibição das informações -->
            <div class="col-md-6">
                <h2>Visualização das Informações</h2>
                <p><strong>Nome:</strong> <span id="nomeSpan"></span></p>
                <p><strong>E-mail:</strong> <span id="emailSpan"></span></p>
                <p><strong>Telefone:</strong> <span id="telefoneSpan"></span></p>
                <p><strong>Data de Nascimento:</strong> <span id="dataNascimentoSpan"></span></p>
                <p><strong>Sobre Você:</strong></p>
                <p><span id="sobreVoceSpan"></span></p>
            </div>
        </div>
    </div>

    <!-- Adicione os scripts JavaScript do Bootstrap e o seu próprio script -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script>
        // O código js vai aqui:
    </script>
</body>
</html>