Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Aula 03 - Tratando erros e melhorando a experiência problemas com servidor node

Galera boa tarde, seguinte faço as alterações pedidas no exercício, acessando localmente elas funcionam mas através do localhost:3000 as alterações não tem efeito mesmo depois de atualizar a página ou matar o servidor lá no gerenciador de tarefas, quando clico no botão para gerar outra frase o spinner não aparece, mas testando localmente sem o servidor , aparece, a mesma coisa com a frase quando simulamos erro de acesso , o servidor não está recebendo as alterações do código.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
    <div class="container">
        <h1 class="center">Alura Typer</h1>
        <p class="frase center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

        <div class="center">
            <img src="img/spinner.gif" alt="Spinner" id="spinner">
            <p id="erro">Ocorreu um erro, por favor tente novamente!</p>
        </div>

        <ul class="informacoes center">
            <li>
                <i class="small material-icons icones">description</i>
                <span id="tamanho-frase">5</span> palavras
            </li>
            <li>
                <i class="small material-icons icones">query_builder</i>
                <span id="tempo-digitacao">3</span> segundos
            </li>
        </ul>

        <textarea class="campo-digitacao" rows="8" cols ="40"></textarea>

        <div class="botoes">
            <a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
                <i class="material-icons">restore</i>
            </a>

            <a id="botao-placar" class="btn-floating btn-large waves-effect waves-light green">
                <i class="material-icons">assignment</i>
            </a>

            <a id="botao-frase" class="btn-floating btn-large waves-effect waves-light blue">
                <i class="material-icons">shuffle</i>
            </a>
        </div>

        <ul class="center">
            <li><span id="contador-caracteres">0</span> caracteres</li>
            <li><span id="contador-palavras">0</span> palavras</li>
        </ul>

        <section class="placar">
            <h3 class="center">Placar</h3>
            <table class="centered bordered">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>No. de palavras</th>
                        <th>Remover</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </section>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="js/placar.js"></script>
    <script src="js/frase.js"></script>

</body>
</html>

CSS

.campo-digitacao {
    font-size: 20px;
    height: 130px;
    border: 3px solid black;
}

.frase {
    font-size: 20px;
    text-align: left;
}

.campo-desativado {
    background-color: lightgray;
}

.icones {
    vertical-align: middle;
}

.borda-verde {
    border: 3px solid green;
}

.borda-vermelha {
    border: 3px solid red;
}

.placar {
    display: none;
}

body {
    overflow: scroll;
}

#erro {
    color: red;
    display: none;
}

#spinner {
    display: none;
}

frase.js

$("#botao-frase").click(fraseAleatoria);

function fraseAleatoria() {

    $("#spinner").toggle();

    $.get("http://localhost:3000/frases", trocaFraseAleatoria)
    .fail(function(){
        $("#erro").toggle();
        setTimeout(function(){
            $("#erro").toggle();
        }, 1500);
    })
    .always(function(){
        $("#spinner").toggle();
    });
}

function trocaFraseAleatoria(data) {
    var frase = $(".frase");
    var numeroAleatorio = Math.floor(Math.random() * data.length);

    frase.text(data[numeroAleatorio].texto);
    atualizaTamanhoFrase();
    atualizaTempoInicial(data[numeroAleatorio].tempo);
}

Mesmo matando o servidor no gerenciador de tarefas já que "finalizando" no bash não está funcionando, e inicializando o mesmo novamente pelo local host não está pegando as atualizações dos arquivos.

2 respostas

Se eu utilizo o CTRL+C para finalizar o servidor ele continua rodando e preciso forçar pelo gerenciador de tarefas.

solução!

Galera , foi burrada minha, os arquivos que eu estava editando eram os antigos que deixei no onedrive u.u .

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software