Problems to add element to HTML with jQuery

Asked

Viewed 59 times

4

Everybody, good morning! All right ?!

I’m going through a problem with jQuery and HTML in which I’m trying to add the elements when the mouse click is out of certain field[input]. This procedure works normally. However, to click on the field and click off again it add the same elements instead of replacing them. My problem is that I’m not able to come up with a solution to fix this.

My code below:

// Functions

function formulaSEO(cpc, cpt) { // Function para medir a densidade de wordskeys no conteúdo  
  /*
   * cpc -> contaPalavraChave 
   * cpt -> contaPalavrasTotais
   * fdd -> formulaDeDensidade
   */
  fdd = (cpc / cpt) * 100;
  fdd = fdd.toFixed(2); // 2 casas deciais para cima
  return fdd;

}

/*
 *
 */

// Principal

$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").focusout(function() { // Alterar para o ID do campo 
  /*
   * Configuração para Título
   */
  var titulo = $("#f_titulo_seo").val(); // Alterar para o ID do campo
  var array = titulo.split(' ');

  var palavraChave = $("#f_keywords").val(); // Alterar para o ID do campo 

  if (palavraChave != "") {
    if (array.indexOf(palavraChave) == 0) {

      $('#bom').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-green"></div> A palavra-chave em foco aparece logo no inicio do título.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#atencao #titulo-seo, #urgente #titulo-seo").remove();

    } else if (array.indexOf(palavraChave) == -1) {

      $('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Essa palavra chave não existe no titulo.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#atencao #titulo-seo, #bom #titulo-seo").remove();

    } else {

      $('#atencao').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-orange"></div> O título da página contém a palavra-chave em foco, mas ela não parece estar no começo; tente mudar sua posição para o início.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#bom #titulo-seo, #urgente #titulo-seo").remove();

    }
  } else {

    $('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Nenhuma palavra-chave em foco foi definida para essa página. Se você não definir a palavra-chave em foco, não será possível calcular a pontuação.</li></ul>');
    $("li.analise-titulo").addClass("block");
    $("#atencao #titulo-seo, #bom #titulo-seo").remove();

  }


  /*
   * Configuração para Conteúdo
   */

  var conteudo = editor.getData(); // Pega os valor do textarea CKEDITOR
  var arrayExterno = conteudo.split(/<p.*?>(.*?)<\/p.*?>/g); // Coloca cada paragrafo dentro de um array

  // Pega cada palavra dentro do paragrafo e coloca em um array interno ao array anterior
  var arrayInterno = [];
  for (i = 0; i < arrayExterno.length; i++) {
    arrayInterno.push(arrayExterno[i].split(" "));
  }

  numPalavrasRecomendadas = 300;

  contPalavrasTotais = 0;
  for (i = 0; i < arrayExterno.length; i++) {
    for (j = 0; j < arrayInterno.length; j++) {
      contPalavrasTotais += 1;
    }
  }

  if (contPalavrasTotais >= numPalavrasRecomendadas) {

    $('#bom').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-green"></div> O texto contém ' + contPalavrasTotais + ' palavras. Isso é maior ou igual ao mínimo recomendado de ' + numPalavrasRecomendadas + ' palavras.</li></ul>');
    $("li.analise-quant-palavras").addClass("block");
    $("#urgente #quant-palavras").remove();

  } else {

    $('#urgente').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-red"></div>O texto contém ' + contPalavrasTotais + ' palavras. Isso está muito abaixo do minimo recomendado de ' + numPalavrasRecomendadas + ' palavras. Adicione mais conteúdo que seja relevante para o tópico.</li></ul>');
    $("li.analise-quant-palavras").addClass("block");
    $("#bom #quant-palavras").remove();

  }

  // Quantidade de vezes que a palavra chave foi encontrada
  contPalavrasChaves = 0;
  for (i = 0; i < arrayExterno.length; i++) {
    for (j = 0; j < arrayInterno[i].length; j++) {
      if (arrayInterno[i][j] == palavraChave || arrayInterno[i][j] == palavraChave + '?' || arrayInterno[i][j] == palavraChave + '!' || arrayInterno[i][j] == palavraChave + '.' ||
        arrayInterno[i][j] == palavraChave + ',' || arrayInterno[i][j] == palavraChave + ':' || arrayInterno[i][j] == palavraChave + ';') {
        contPalavrasChaves += 1;
      }
    }
  }

  var resultado = formulaSEO(contPalavrasChaves, contPalavrasTotais);
  if (resultado >= 1 && resultado < 3) {

    $('#bom').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-green"></div> A densidade de palavras-chave é ' + resultado + '% , o que é ótimo, a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
    $("li.analise-densidade").addClass("block");
    $("#urgente #densidade").remove();

  } else {

    $('#urgente').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-red"></div> A densidade da palavra-chave é de ' + resultado + '% , o que é muito baixo; a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
    $("li.analise-densidade").addClass("block");
    $("#bom #densidade").remove();

  }

  /**
   * Configuração para meta-descrição
   */

  var metaDescricao = $("#f_resumo_seo").val().trim();
  array = metaDescricao.split(" ");

  if (metaDescricao != "") {
    if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
      array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
      array.indexOf(palavraChave + ';') >= 0) {

      $('#bom').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-green"></div> A meta-descrição contém a palavra-chave em foco.</li></ul>');
      $("li.analise-meta-descricao").addClass("block");
      $("#urgente #meta-descricao").remove();

    } else if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
      array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
      array.indexOf(palavraChave + ';') == -1) {

      $('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Uma meta-descrição foi definida, mas ela não contém a palavra-chave em foco.</li></ul>');
      $("li.analise-meta-descricao").addClass("block");
      $("#bom #meta-descricao").remove();

    }
  } else {

    $('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Nenhuma meta-descrição foi definida. Os mecanismos de busca mostrarão trechos da página em seu lugar.</li></ul>');
    $("li.analise-meta-descricao").addClass("block");
    $("#bom #meta-descricao").remove();

  }

  // Tamanho de string contidas da MD
  var metaDescricao = $("#f_resumo_seo").val().trim();
  quantString = metaDescricao.split("");
  if (quantString.length >= 120) {
    if (quantString.length < 158) {

      $('#bom').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-green"></div> A meta descrição tem um bom tamanho.</li></ul>');
      $("li.analise-tam-meta-descricao").addClass("block");
      $("#atencao #tam-meta-descricao").remove();

    } else {

      $('#atencao').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-orange"></div> A meta descrição foi definida, porém não está de acordo com as regras de SEO, que é entre 120 e 158 caracteres.</li></ul>');
      $("li.analise-tam-meta-descricao").addClass("block");
      $("#bom #tam-meta-descricao").remove();

    }
  }

  /**
   * Configuração para SLUG 
   */

  var slug = $("#f_slug").val();
  var arraySlug = slug.split("-");
  contWordInURL = 0
  for (i = 0; i < arraySlug.length; i++) {
    if (arraySlug[i] == palavraChave) {
      contWordInURL += 1
    }
  }

  if (contWordInURL >= 1) {

    $('#bom').append('<ul id="slug"><li class="analise-slug"><div class="circle-green"></div> A palavra-chave em foco aparece no URL desta página.</li></ul>');
    $("li.analise-slug").addClass("block");
    $("#atencao #slug").remove();

  } else {

    $('#atencao').append('<ul id="slug"><li class="analise-slug"><div class="circle-orange"></div> A palavra-chave em foco não aparece no URL dessa página. Se decidir renomear esse URL certifique-se que o URL antigo tenha um redirecionamento 301 para o novo!</li></ul>');
    $("li.analise-slug").addClass("block");
    $("#bom #slug").remove();

  }

  // Tamanho contido no slug
  var arrayTamSlug = slug.split("");
  if (arrayTamSlug.length <= 80) {

    $('#bom').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-green"></div> O comprimento do SLUG da página está excelente.</li></ul>');
    $("li.analise-tam-slug").addClass("block");
    $("#atencao #tam-slug").remove();
  } else {

    $('#atencao').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-orange"></div> O slug desta página é um pouco longo, considere encurtá-lo.</li></ul>');
    $("li.analise-tam-slug").addClass("block");
    $("#bom #tam-slug").remove();

  }

  /*$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").focusin(function(){
      $("#bom, #atencao, #urgente").remove();
  });*/

});
* {
  padding: 0;
  margin: 0;
}

.row {
  margin-top: 50px;
}

.input-group {
  margin-top: 30px;
  margin-bottom: 20px;
}

.seo-config {
  margin: 20px auto;
}

#titulo-seo,
#quant-palavras,
#densidade,
#meta-descricao,
#tam-meta-descricao,
#slug,
#tam-slug {
  margin-top: 10px;
}

.analise-titulo,
.analise-quant-palavras,
.analise-densidade,
.analise-meta-descricao,
.analise-tam-meta-descricao,
.analise-slug,
.analise-tam-slug {
  display: none;
  margin: 0 8px 0 11px;
  flex: 1 1 auto;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
}

ul li {
  margin-bottom: 1rem!important;
  margin-top: 10px!important;
}

.block {
  display: block!important;
}

.ck.ck-reset.ck-editor.ck-rounded-corners {
  width: 100%;
}

.circle-green {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #7AD03A;
}

.circle-orange {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #EE7C1B;
}

.circle-red {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #DC3232;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Projeto SEO</title>
  <!-- Main -->
  <link rel="stylesheet" href="style.css">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>


<body>

  <div class="container">
    <div class="row">
      <div class="input-group input-group-lg">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-lg">Título</span>
        </div>
        <input type="text" id="f_titulo_seo" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" value="Os 5 principais tipos de vendas do mercado">
      </div>
      <div class="input-group input-group-lg">
        <textarea name="content" id="f_conteudo">
                </textarea>
      </div>

      <div class="seo-config">
        <h2>SEO</h2>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">Palavra Chave em foco</span>
          </div>
          <input type="text" id="f_keywords" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
        </div>

        <p>Rsultado de boas práticas: </p>

        <div id="urgente"></div>
        <div id="atencao"></div>
        <div id="bom"></div>


      </div>

      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Meta-descrição</span>
        </div>
        <textarea class="form-control" id="f_resumo_seo" aria-label="Meta-descrição">Você sabia que existem diferentes tipos de vendas? Cada uma delas é indicada para um modelo de negócio e, se bem aplicada, pode facilitar a manutenção dos lucros.</textarea>
      </div>

      <label for="f_slug">SLUG</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3"> https://meublog.com/</span>
        </div>
        <input type="text" class="form-control" id="f_slug" aria-describedby="basic-addon3" value="os-5-principais-tipos-de-vendas-do-mercado">
      </div>

    </div>
  </div>




  <footer>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!-- CkEditor -->
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>

    <script src="scripts.js"></script>

    <script>
      let editor;

      ClassicEditor
        .create(document.querySelector('#f_conteudo'))
        .then(newEditor => {
          editor = newEditor;
        })
        .catch(error => {
          console.error(error);
        });
    </script>
  </footer>


</body>

</html>

Already grateful for the help of the people!

javascript html jquery html5

1 answer

4


Friend, I don’t understand very well what you asked, but from what I understand it is enough to reset the HTML of these Ivs before starting the function. I took the liberty of changing .focusout for .blur and then added the code $('#urgente, #atencao, #bom').html('') for every time the function is called, these Divs stay clean and then be added the observations , tested and is functioning normally. Follows the code:

// Functions

function formulaSEO(cpc, cpt) { // Function para medir a densidade de wordskeys no conteúdo  
  /*
   * cpc -> contaPalavraChave 
   * cpt -> contaPalavrasTotais
   * fdd -> formulaDeDensidade
   */
  fdd = (cpc / cpt) * 100;
  fdd = fdd.toFixed(2); // 2 casas deciais para cima
  return fdd;

}

/*
 *
 */

// Principal

$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").blur(function() { // Alterar para o ID do campo 
  /*
   * Configuração para Título
   */
   $('#urgente, #atencao, #bom').html('')
  var titulo = $("#f_titulo_seo").val(); // Alterar para o ID do campo
  var array = titulo.split(' ');

  var palavraChave = $("#f_keywords").val(); // Alterar para o ID do campo 

  if (palavraChave != "") {
    if (array.indexOf(palavraChave) == 0) {

      $('#bom').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-green"></div> A palavra-chave em foco aparece logo no inicio do título.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#atencao #titulo-seo, #urgente #titulo-seo").remove();

    } else if (array.indexOf(palavraChave) == -1) {

      $('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Essa palavra chave não existe no titulo.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#atencao #titulo-seo, #bom #titulo-seo").remove();

    } else {

      $('#atencao').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-orange"></div> O título da página contém a palavra-chave em foco, mas ela não parece estar no começo; tente mudar sua posição para o início.</li></ul>');
      $("li.analise-titulo").addClass("block");
      $("#bom #titulo-seo, #urgente #titulo-seo").remove();

    }
  } else {

    $('#urgente').append('<ul id="titulo-seo"><li class="analise-titulo"><div class="circle-red"></div> Nenhuma palavra-chave em foco foi definida para essa página. Se você não definir a palavra-chave em foco, não será possível calcular a pontuação.</li></ul>');
    $("li.analise-titulo").addClass("block");
    $("#atencao #titulo-seo, #bom #titulo-seo").remove();

  }


  /*
   * Configuração para Conteúdo
   */

  var conteudo = editor.getData(); // Pega os valor do textarea CKEDITOR
  var arrayExterno = conteudo.split(/<p.*?>(.*?)<\/p.*?>/g); // Coloca cada paragrafo dentro de um array

  // Pega cada palavra dentro do paragrafo e coloca em um array interno ao array anterior
  var arrayInterno = [];
  for (i = 0; i < arrayExterno.length; i++) {
    arrayInterno.push(arrayExterno[i].split(" "));
  }

  numPalavrasRecomendadas = 300;

  contPalavrasTotais = 0;
  for (i = 0; i < arrayExterno.length; i++) {
    for (j = 0; j < arrayInterno.length; j++) {
      contPalavrasTotais += 1;
    }
  }

  if (contPalavrasTotais >= numPalavrasRecomendadas) {

    $('#bom').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-green"></div> O texto contém ' + contPalavrasTotais + ' palavras. Isso é maior ou igual ao mínimo recomendado de ' + numPalavrasRecomendadas + ' palavras.</li></ul>');
    $("li.analise-quant-palavras").addClass("block");
    $("#urgente #quant-palavras").remove();

  } else {

    $('#urgente').append('<ul id="quant-palavras"><li class="analise-quant-palavras"><div class="circle-red"></div>O texto contém ' + contPalavrasTotais + ' palavras. Isso está muito abaixo do minimo recomendado de ' + numPalavrasRecomendadas + ' palavras. Adicione mais conteúdo que seja relevante para o tópico.</li></ul>');
    $("li.analise-quant-palavras").addClass("block");
    $("#bom #quant-palavras").remove();

  }

  // Quantidade de vezes que a palavra chave foi encontrada
  contPalavrasChaves = 0;
  for (i = 0; i < arrayExterno.length; i++) {
    for (j = 0; j < arrayInterno[i].length; j++) {
      if (arrayInterno[i][j] == palavraChave || arrayInterno[i][j] == palavraChave + '?' || arrayInterno[i][j] == palavraChave + '!' || arrayInterno[i][j] == palavraChave + '.' ||
        arrayInterno[i][j] == palavraChave + ',' || arrayInterno[i][j] == palavraChave + ':' || arrayInterno[i][j] == palavraChave + ';') {
        contPalavrasChaves += 1;
      }
    }
  }

  var resultado = formulaSEO(contPalavrasChaves, contPalavrasTotais);
  if (resultado >= 1 && resultado < 3) {

    $('#bom').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-green"></div> A densidade de palavras-chave é ' + resultado + '% , o que é ótimo, a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
    $("li.analise-densidade").addClass("block");
    $("#urgente #densidade").remove();

  } else {

    $('#urgente').append('<ul id="densidade"><li class="analise-densidade"><div class="circle-red"></div> A densidade da palavra-chave é de ' + resultado + '% , o que é muito baixo; a palavra-chave em foco foi encontrada ' + contPalavrasChaves + ' vezes.</li></ul>');
    $("li.analise-densidade").addClass("block");
    $("#bom #densidade").remove();

  }

  /**
   * Configuração para meta-descrição
   */

  var metaDescricao = $("#f_resumo_seo").val().trim();
  array = metaDescricao.split(" ");

  if (metaDescricao != "") {
    if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
      array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
      array.indexOf(palavraChave + ';') >= 0) {

      $('#bom').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-green"></div> A meta-descrição contém a palavra-chave em foco.</li></ul>');
      $("li.analise-meta-descricao").addClass("block");
      $("#urgente #meta-descricao").remove();

    } else if (array.indexOf(palavraChave) || array.indexOf(palavraChave + '?') || array.indexOf(palavraChave + '!') ||
      array.indexOf(palavraChave + '.') || array.indexOf(palavraChave + ',') || array.indexOf(palavraChave + ':') ||
      array.indexOf(palavraChave + ';') == -1) {

      $('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Uma meta-descrição foi definida, mas ela não contém a palavra-chave em foco.</li></ul>');
      $("li.analise-meta-descricao").addClass("block");
      $("#bom #meta-descricao").remove();

    }
  } else {

    $('#urgente').append('<ul id="meta-descricao"><li class="analise-meta-descricao"><div class="circle-red"></div> Nenhuma meta-descrição foi definida. Os mecanismos de busca mostrarão trechos da página em seu lugar.</li></ul>');
    $("li.analise-meta-descricao").addClass("block");
    $("#bom #meta-descricao").remove();

  }

  // Tamanho de string contidas da MD
  var metaDescricao = $("#f_resumo_seo").val().trim();
  quantString = metaDescricao.split("");
  if (quantString.length >= 120) {
    if (quantString.length < 158) {

      $('#bom').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-green"></div> A meta descrição tem um bom tamanho.</li></ul>');
      $("li.analise-tam-meta-descricao").addClass("block");
      $("#atencao #tam-meta-descricao").remove();

    } else {

      $('#atencao').append('<ul id="tam-meta-descricao"><li class="analise-tam-meta-descricao"><div class="circle-orange"></div> A meta descrição foi definida, porém não está de acordo com as regras de SEO, que é entre 120 e 158 caracteres.</li></ul>');
      $("li.analise-tam-meta-descricao").addClass("block");
      $("#bom #tam-meta-descricao").remove();

    }
  }

  /**
   * Configuração para SLUG 
   */

  var slug = $("#f_slug").val();
  var arraySlug = slug.split("-");
  contWordInURL = 0
  for (i = 0; i < arraySlug.length; i++) {
    if (arraySlug[i] == palavraChave) {
      contWordInURL += 1
    }
  }

  if (contWordInURL >= 1) {

    $('#bom').append('<ul id="slug"><li class="analise-slug"><div class="circle-green"></div> A palavra-chave em foco aparece no URL desta página.</li></ul>');
    $("li.analise-slug").addClass("block");
    $("#atencao #slug").remove();

  } else {

    $('#atencao').append('<ul id="slug"><li class="analise-slug"><div class="circle-orange"></div> A palavra-chave em foco não aparece no URL dessa página. Se decidir renomear esse URL certifique-se que o URL antigo tenha um redirecionamento 301 para o novo!</li></ul>');
    $("li.analise-slug").addClass("block");
    $("#bom #slug").remove();

  }

  // Tamanho contido no slug
  var arrayTamSlug = slug.split("");
  if (arrayTamSlug.length <= 80) {

    $('#bom').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-green"></div> O comprimento do SLUG da página está excelente.</li></ul>');
    $("li.analise-tam-slug").addClass("block");
    $("#atencao #tam-slug").remove();
  } else {

    $('#atencao').append('<ul id="tam-slug"><li class="analise-slug"><div class="circle-orange"></div> O slug desta página é um pouco longo, considere encurtá-lo.</li></ul>');
    $("li.analise-tam-slug").addClass("block");
    $("#bom #tam-slug").remove();

  }

  /*$("#f_keywords, #f_titulo_seo, #f_resumo_seo, #f_slug").focusin(function(){
      $("#bom, #atencao, #urgente").remove();
  });*/

});
* {
  padding: 0;
  margin: 0;
}

.row {
  margin-top: 50px;
}

.input-group {
  margin-top: 30px;
  margin-bottom: 20px;
}

.seo-config {
  margin: 20px auto;
}

#titulo-seo,
#quant-palavras,
#densidade,
#meta-descricao,
#tam-meta-descricao,
#slug,
#tam-slug {
  margin-top: 10px;
}

.analise-titulo,
.analise-quant-palavras,
.analise-densidade,
.analise-meta-descricao,
.analise-tam-meta-descricao,
.analise-slug,
.analise-tam-slug {
  display: none;
  margin: 0 8px 0 11px;
  flex: 1 1 auto;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
}

ul li {
  margin-bottom: 1rem!important;
  margin-top: 10px!important;
}

.block {
  display: block!important;
}

.ck.ck-reset.ck-editor.ck-rounded-corners {
  width: 100%;
}

.circle-green {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #7AD03A;
}

.circle-orange {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #EE7C1B;
}

.circle-red {
  display: inline-block;
  border-radius: 100%;
  width: 13px;
  height: 13px;
  background-color: #DC3232;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Projeto SEO</title>
  <!-- Main -->
  <link rel="stylesheet" href="style.css">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>


<body>

  <div class="container">
    <div class="row">
      <div class="input-group input-group-lg">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroup-sizing-lg">Título</span>
        </div>
        <input type="text" id="f_titulo_seo" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" value="Os 5 principais tipos de vendas do mercado">
      </div>
      <div class="input-group input-group-lg">
        <textarea name="content" id="f_conteudo">
                </textarea>
      </div>

      <div class="seo-config">
        <h2>SEO</h2>
        <div class="input-group input-group-lg">
          <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-lg">Palavra Chave em foco</span>
          </div>
          <input type="text" id="f_keywords" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
        </div>

        <p>Rsultado de boas práticas: </p>

        <div id="urgente"></div>
        <div id="atencao"></div>
        <div id="bom"></div>


      </div>

      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Meta-descrição</span>
        </div>
        <textarea class="form-control" id="f_resumo_seo" aria-label="Meta-descrição">Você sabia que existem diferentes tipos de vendas? Cada uma delas é indicada para um modelo de negócio e, se bem aplicada, pode facilitar a manutenção dos lucros.</textarea>
      </div>

      <label for="f_slug">SLUG</label>
      <div class="input-group mb-3">
        <div class="input-group-prepend">
          <span class="input-group-text" id="basic-addon3"> https://meublog.com/</span>
        </div>
        <input type="text" class="form-control" id="f_slug" aria-describedby="basic-addon3" value="os-5-principais-tipos-de-vendas-do-mercado">
      </div>

    </div>
  </div>




  <footer>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!-- CkEditor -->
    <script src="https://cdn.ckeditor.com/ckeditor5/12.3.1/classic/ckeditor.js"></script>

    <script src="scripts.js"></script>

    <script>
      let editor;

      ClassicEditor
        .create(document.querySelector('#f_conteudo'))
        .then(newEditor => {
          editor = newEditor;
        })
        .catch(error => {
          console.error(error);
        });
    </script>
  </footer>


</body>

</html>

  • 3

    My friend Vitor, thank you very much. Do not imagine that this is the only thing that could make a difference. Solved my problem. Thank you very much and good morning Vitor!

Browser other questions tagged javascript html jquery html5

You are not signed in. Login or sign up in order to post.