Fiz tudo igual e o slideToggle() não funciona de primeira! | jQuery: avance na biblioteca mais popular do mercado parte 2

Solucionado (ver solução)

Solucionado
(ver solução)

4
respostas

Referente ao curso jQuery: avance na biblioteca mais popular do mercado parte 2, no capítulo Animações com jQuery e atividade Mostrando o placar

por Matheus Eli

| 254.4k xp | 42 posts

Auxiliar de TI

O slideToggle só funciona se eu clicar varias vezes e o texto do Placar foi alinhado a esquerda!



$("#botao-placar").click(mostraPlacar);

function inserePlacar(){

    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Matheus";
    var numPalavras = $("#contador-palavras").text();
    var linha = novaLinha(usuario, numPalavras);
    linha.find(".botao-remover").click(removeLinha);

    corpoTabela.prepend(linha);
}

function novaLinha(usuario, numPalavras){
    var linha = $("<tr>");
    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(numPalavras);
    var colunaRemover = $("<td>");
    var link = $("<a>").addClass("botao-remover").attr("href","#");
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    link.append(icone);
    colunaRemover.append(link);

    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}

$(".botao-remover").click(removeLinha);

function removeLinha(){
        event.preventDefault();
        $(this).parent().parent().remove();

}

function mostraPlacar(){

    $(".placar").slideToggle(600);
}


*{

    font-family: sans-serif;
}

body{

    overflow: scroll;
}
h1{
    margin: .5em 0;
    font-size: 6em;
    text-align: center;
}

p{

    font-size: 1.3em;
    text-align: justify;
}

.informacoes{

    margin: 1em 0;
    font-size: 1.3em;
}

.informacoes i{

    position: relative;
    top: .2em;
}

.campo-digitacao{

    display: block;
    width: 100%;
    height: 20%;

    border: 3px solid #000;
    font-size: 1.3em;
}

.campo-errado{

    border: 3px solid red;
}

.campo-certo{

    border: 3px solid green;
}

.informacoes-input{

    margin: 1em 0;
    font-size: 1.3em;
}

.campo-desativado{

    background-color: lightgray;
}

.placar{

    display: none;
}








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

        <ul class = "informacoes-input 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>Nº de palavras:</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

4 respostas

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

12/01/2019

Oi Matheus tudo bem?

Poderia passar o código HTML completo por gentileza, eu tentei reconstruir mas não deu muito certo rsrsrs. Olha como ficou, acho que tá faltando coisas. {Não comecei a arrumar o código ainda}.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>


    *{

        font-family: sans-serif;
    }

    body{

        overflow: scroll;
    }
    h1{
        margin: .5em 0;
        font-size: 6em;
        text-align: center;
    }

    p{

        font-size: 1.3em;
        text-align: justify;
    }

    .informacoes{

        margin: 1em 0;
        font-size: 1.3em;
    }

    .informacoes i{

    position: relative;
    top: .2em;
}

.campo-digitacao{

    display: block;
    width: 100%;
    height: 20%;

    border: 3px solid #000;
    font-size: 1.3em;
}

.campo-errado{

    border: 3px solid red;
}

.campo-certo{

    border: 3px solid green;
}

.informacoes-input{

    margin: 1em 0;
    font-size: 1.3em;
}

.campo-desativado{

    background-color: lightgray;
}

.placar{

    display: none;
}




    </style>
</head>

<body>

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

        <ul class = "informacoes-input 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>Nº de palavras:</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
<script>

    $("#botao-placar").click(mostraPlacar);

    function inserePlacar(){

        var corpoTabela = $(".placar").find("tbody");
        var usuario = "Matheus";
        var numPalavras = $("#contador-palavras").text();
        var linha = novaLinha(usuario, numPalavras);
        linha.find(".botao-remover").click(removeLinha);

        corpoTabela.prepend(linha);
    }

    function novaLinha(usuario, numPalavras){
        var linha = $("<tr>");
        var colunaUsuario = $("<td>").text(usuario);
        var colunaPalavras = $("<td>").text(numPalavras);
        var colunaRemover = $("<td>");
        var link = $("<a>").addClass("botao-remover").attr("href","#");
        var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

        link.append(icone);
        colunaRemover.append(link);

        linha.append(colunaUsuario);
        linha.append(colunaPalavras);
        linha.append(colunaRemover);

        return linha;
    }

    $(".botao-remover").click(removeLinha);

    function removeLinha(){
            event.preventDefault();
            $(this).parent().parent().remove();

    }

    function mostraPlacar(){

        $(".placar").slideToggle(600);
    }

</script>
</body>
</html>

por Matheus Eli

| 254.4k xp | 42 posts

Auxiliar de TI

12/01/2019

Claro!

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/libs/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="css/libs/google-fonts.css">
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <title>Alura Typer</title>
</head>
<body>
    <!-- Seja bem vindo ao curso de jQuery :) -->
    <main class = "container">
        <h1 class = "center">Alura Typer</h1>
        <p class = "frase">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

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

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

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

        <ul class = "informacoes-input 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>Nº de palavras:</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </section>
        <script src = "js/jquery.js"></script>
        <script src = "js/main.js"></script>
        <script src = "js/placar.js"></script>
    </main>
</body>
</html>









*{

    font-family: sans-serif;
}

body{

    overflow: scroll;
}
h1{
    margin: .5em 0;
    font-size: 6em;
    text-align: center;
}

p{

    font-size: 1.3em;
    text-align: justify;
}

.informacoes{

    margin: 1em 0;
    font-size: 1.3em;
}

.informacoes i{

    position: relative;
    top: .2em;
}

.campo-digitacao{

    display: block;
    width: 100%;
    height: 20%;

    border: 3px solid #000;
    font-size: 1.3em;
}

.campo-errado{

    border: 3px solid red;
}

.campo-certo{

    border: 3px solid green;
}

.informacoes-input{

    margin: 1em 0;
    font-size: 1.3em;
}

.campo-desativado{

    background-color: lightgray;
}

.placar{

    display: none;
}














$("#botao-placar").click(mostraPlacar);

function inserePlacar(){

    var corpoTabela = $(".placar").find("tbody");
    var usuario = "Matheus";
    var numPalavras = $("#contador-palavras").text();
    var linha = novaLinha(usuario, numPalavras);
    linha.find(".botao-remover").click(removeLinha);

    corpoTabela.prepend(linha);
}

function novaLinha(usuario, numPalavras){
    var linha = $("<tr>");
    var colunaUsuario = $("<td>").text(usuario);
    var colunaPalavras = $("<td>").text(numPalavras);
    var colunaRemover = $("<td>");
    var link = $("<a>").addClass("botao-remover").attr("href","#");
    var icone = $("<i>").addClass("small").addClass("material-icons").text("delete");

    link.append(icone);
    colunaRemover.append(link);

    linha.append(colunaUsuario);
    linha.append(colunaPalavras);
    linha.append(colunaRemover);

    return linha;
}

$(".botao-remover").click(removeLinha);

function removeLinha(){
        event.preventDefault();
        $(this).parent().parent().remove();

}

function mostraPlacar(){

    $(".placar").slideToggle(600);
}

Obrigado por responder!

solução!

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

12/01/2019

Oi dei uma mechida no código.

Tirei o efeito slideToogle e coloquei só toggle porque pode estar demorando para renderizar na sua máquina.

E criei uma classe css centerAbsolute para centralizar o placar.

Coloquei aqui porque não cabia o HTML no post https://codepen.io/anon/pen/vvQMgB

Acho que a página vai ficar mais bonita conforme as aulas forem avançando!!!

por Matheus Eli

| 254.4k xp | 42 posts

Auxiliar de TI

13/01/2019

Valeu André!

Mergulhe em programação