javascript – Problems to add element to HTML with jQuery

 // 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>

 // 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>