Uncaugth Sintax Error e Uncaugth ReferenceError | JavaScript: aprofundando em MVC, padrão Proxy e Factory

Uncaught SyntaxError: Unexpected token '.' DevTools failed to parse SourceMap: file:///C:/Users/Gustavo/Desktop/javascript-avancado-ii-aula3/aluraframe/client/css/bootstrap.css.map DevTools failed to parse SourceMap: file:///C:/Users/Gustavo/Desktop/javascript-avancado-ii-aula3/aluraframe/client/css/bootstrap-theme.css.map index.html:60 Uncaught ReferenceError: NegociacaoController is not defined at index.html:60 (anonymous) @ index.html:60

Não estou conseguindo consertar o erro, já baixei o código do dowload, fiz as alterações e o erro acima continua persistindo no console

NEGOCIACAO CONTROLER

class NegociacaoController {

    constructor() {

        let $ = document.querySelector.bind(document);

        this._inputData = $('#data');
        this._inputQuantidade = $('#quantidade');
        this._inputValor = $('#valor');

        this._listaNegociacoes = new Bind(
            new ListaNegociacoes(),
            new NegociacoesView($('#negociacoesView')),
            'adiciona', 'esvazia');

        this._mensagem = new Bind(
            new Mensagem(), new MensagemView($('#mensagemView')),
            'texto');
    }

    adiciona(event) {

        event.preventDefault();
        this._listaNegociacoes.adiciona(this._criaNegociacao());
        this._mensagem.texto = 'Negociação adicionada com sucesso';
        this._limpaFormulario();
    }

    if(xhr.readyState == 4) {

          if(xhr.status == 200) {

        JSON.parse(xhr.responseText)
         .map(objeto => new Negociacao(new Date(objeto.data), objeto.quantidade, objeto.valor))
         .forEach(negociacao => this._listaNegociacoes.adiciona(negociacao));

    } else {

      console.log(xhr.responseText);
      this._mensagem.texto = 'Não foi possível obter as negociações da semana';
    }
}

    apaga() {

        this._listaNegociacoes.esvazia();
        this._mensagem.texto = 'Negociações apagadas com sucesso';
    }

    _criaNegociacao() {

        return new Negociacao(
            DateHelper.textoParaData(this._inputData.value),
            this._inputQuantidade.value,
            this._inputValor.value);
    }

    _limpaFormulario() {

        this._inputData.value = '';
        this._inputQuantidade.value = 1;
        this._inputValor.value = 0.0;
        this._inputData.focus();
    }
}

INDEX.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Negociações</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">

</head>
<body class="container">

    <h1 class="text-center">Negociações</h1>

    <div id="mensagemView"></div>

    <form class="form" onsubmit="negociacaoController.adiciona(event)">

        <div class="form-group">
            <label for="data">Data</label>
            <input type="date" id="data" class="form-control" required autofocus/>        
        </div>    

        <div class="form-group">
            <label for="quantidade">Quantidade</label>
            <input type="number" min="1" step="1" id="quantidade" class="form-control" value="1" required/>
        </div>

        <div class="form-group">
            <label for="valor">Valor</label>
            <input id="valor" type="number" class="form-control"  min="0.01" step="0.01" value="0.0" required />
        </div>

        <button class="btn btn-primary" type="submit">Incluir</button>
    </form>

    <div class="text-center">
        <button class="btn btn-primary text-center" type="button">
            Importar Negociações
        </button>
        <button onclick="negociacaoController.apaga()" class="btn btn-primary text-center" type="button">
            Apagar
        </button>
    </div> 
    <br>
    <br>

    <div id="negociacoesView"></div>

    <script src="js/app/models/Negociacao.js"></script>
    <script src="js/app/controllers/NegociacaoController.js"></script>
    <script src="js/app/helpers/DateHelper.js"></script>
    <script src="js/app/models/ListaNegociacoes.js"></script>
    <script src="js/app/views/View.js"></script>
    <script src="js/app/views/NegociacoesView.js"></script>
    <script src="js/app/models/Mensagem.js"></script>
    <script src="js/app/views/MensagemView.js"></script>
    <script src="js/app/services/ProxyFactory.js"></script>
    <script src="js/app/helpers/Bind.js"></script>
    <script>
        let negociacaoController = new NegociacaoController();
    </script>

</body>
</html>

Olá Gustavo, tudo bem com você ?

Você postou o código corretamente aqui no fórum? Porque parece que alguns trechos estão soltos no arquivo do NegociacaoController, principalmente a parte de criar uma requisição com o XML, mesmo assim vou te recomendar algumas coisas:

Precisamos criar uma função responsável por importar os dados

    importaNegociacoes() {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", "negociacoes/semana");
        xhr.onreadystatechange = () => {
            if(xhr.readyState == 4) {
                if(xhr.status == 200) {
                    JSON.parse(xhr.responseText)
                        .map( objeto => new Negociacao(new Date(objeto.data), objeto.quantidade, objeto.valor))
                        .forEach(negociacao => this._listaNegociacoes.adiciona(negociacao));

                        this._mensagem.texto = "Negociações importadas com sucesso"
                } else {
                    console.log(xhr.responseText)
                }
            }
        }

        xhr.send();
    }

Veja que todo código responsável por fazer a requisição está dentro da função importaNegociacoes abrindo a requisição e esperando o resultado se concretizar para obter os dados

Precisamos associar essa função com um evento de clique do botão, no caso, o próprio de importar negociações:

<button class="btn btn-primary text-center" type="button" onClick="negociacaoController.importaNegociacoes()">
            Importar Negociações
</button>

Dessa forma ao clicar no botão iremos acessar a função que criamos acima, e irá importar corretamente todos os dados!

Caso tenha copiado o código errado do NegociacaoController e essas dicas não tenham resolvido, poste aqui novamente seu código para a gente analisar :)

Abraços e Bons Estudos!

Mergulhe em programação