Como posso por uma pequena imagem sobre um texto?

fidelidade · Outubro 10, 2022

Tenho uma lista com variavei em randômicas. O usuario acrescenta um nome a lista eliminando a primeira mantendo a mesma quantidade de variaveis.

Eu consegui ocultar a ultima variavel da lista, e preciso que junto a ela oculte tambem a segunda linha. Ficanco assim o primeiro nome e o terceiro visivel.

teria como por uma pequena faixa que pudesse cobrir apenas o terceiro nome mantendo as mesmas configurações?

Na imagem se ve como esta e como gostgaria que ficasse. sem alterar o randomico da lista

<html lang="pt-br"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <title> testes praticos </title>
</head><body><p></p><br>
<br>
<p></p>


<br>
<p></p> 
<p></p>
<p></p>
<br>
<br>

INSCRITOS PARA PROVA

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <meta name="robots" content="noindex, nofollow">

  <meta name="googlebot" content="noindex, nofollow">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script type="text/javascript" src="/js/lib/dummy.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style id="compiled-css" type="text/css">

        /* EOS */

div {
 
  width: 400px;

  height: 72px;

  border: 0px solid black;

  overflow: hidden;

}</style>


  <script id="insert"></script>

    <script src="/js/stringify.js?67dd239ea46c4fe66f782c02980889cc54362b0d" charset="utf-8"></script>

    <script>

      const customConsole = (w) => {

        const pushToConsole = (payload, type) => {

          w.parent.postMessage({

            console: {

              payload: stringify(payload),

              type:    type

            }

          }, "*")

        }

        w.onerror = (message, url, line, column) => {

                  line = line - 80

          if (line < 0){

            pushToConsole(message, "error")

          } else {

            pushToConsole(`[${line}:${column}] ${message}`, "error")

          }

        }

        let console = (function(systemConsole){

          return {

            log: function(){

              let args = Array.from(arguments)

              pushToConsole(args, "log")

              systemConsole.log.apply(this, args)

            },

            info: function(){

              let args = Array.from(arguments)

              pushToConsole(args, "info")

              systemConsole.info.apply(this, args)

            },

            warn: function(){

              let args = Array.from(arguments)

              pushToConsole(args, "warn")

              systemConsole.warn.apply(this, args)

            },

            error: function(){

              let args = Array.from(arguments)

              pushToConsole(args, "error")

              systemConsole.error.apply(this, args)

            },

            system: function(arg){

              pushToConsole(arg, "system")

            },

            clear: function(){

              systemConsole.clear.apply(this, {})

            },

            time: function(){

              let args = Array.from(arguments)

              systemConsole.time.apply(this, args)

            },

            assert: function(assertion, label){

              if (!assertion){

                pushToConsole(label, "log")

              }

              let args = Array.from(arguments)

              systemConsole.assert.apply(this, args)

            }

          }

        }(window.console))

        window.console = { ...window.console, ...console }

        console.system("Running fiddle")

      }

      if (window.parent){

        customConsole(window)

      }

    </script>


<div><div class="exibir">

<ul id="lista">
<li>Ronaldo</li>
<li>Ubirajara</li>
<li>Lucia</li>
<li>Rakel</li>
</ul> 

</div> <textarea id="copy-me" style="width: 15px; height: 15px;"></textarea>

  <button id="copy-btn"></button>

</div>
<br>

  <input id="nome" type="text" value="">

  <button onclick="adicionar()">ALUNO</button>

    <script type="text/javascript">

        const resultsEl = document.querySelector('#results');

const buttonEl = document.querySelector('#trigger');

const renderResultsToDom = (results, el) => {

  el.innerHTML = results.join(' ');

};

buttonEl.addEventListener('click', () => renderResultsToDom(generateArrayAndRandomize(),

resultsEl));

    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div>

<div>



  <label>

  NOME DE ARQUIVO <br>

    <input type="text" id="file-name" placeholder="  ">

  </label>

  <button id="save-btn">BAIXE SEU LINK </button>

</div>

    <script type="text/javascript">//<![CDATA[

let nomes = [];  

const lis = document.querySelectorAll('li');

 lis.forEach((li) => nomes.push(li.innerHTML));

let updateList = [...nomes];

const copyValue = document.getElementById("copy-me");

const copyButton = document.getElementById("copy-btn");

copyButton.addEventListener("click", () => {

  copyValue.select();

  document.execCommand("copy");

});

const onChangeCopyHtml = () => {

  const source = document.documentElement.outerHTML;

  copyValue.value = source;

};

const renderList = () => {

  lista.innerHTML = "";

  for (var i = 0; i < updateList.length; i++) {

    var lis = document.createElement("li");

    lis.innerHTML = updateList[i];

    lista.appendChild(lis);

  }

  onChangeCopyHtml();

};

const onAddName = (name) => {

  updateList.push(name);

  const newList = updateList.slice(1, updateList.length);

  return newList;

};

function adicionar() {

  var coleta = document.getElementById("nome").value;

  var nomeDig = document.createElement("li");

  updateList = onAddName(coleta);

  renderList();

}

renderList();

function salvar() {

   let fileName = document.querySelector('#file-name').value

  if (!fileName.endsWith('.html')) {

    fileName += '.html'

  }

   const pageContent = document.documentElement.outerHTML

  const blob = new Blob([pageContent], {

    type: 'text/html'

  })

   const hiddenHyperlinkEl = document.createElement('a')

  hiddenHyperlinkEl.href = URL.createObjectURL(blob)

  hiddenHyperlinkEl.download = fileName

  hiddenHyperlinkEl.hidden = true

  hiddenHyperlinkEl.innerHTML = ':)'

 

  document.body.appendChild(hiddenHyperlinkEl)

  hiddenHyperlinkEl.click()

  hiddenHyperlinkEl.remove()

}

document.querySelector('#save-btn').addEventListener('click', salvar);

</script>

  <script>

       if (window.parent && window.parent.parent){

      window.parent.parent.postMessage(["resultsFrame", {

        height: document.body.getBoundingClientRect().height,

        slug: "xhu2jv8m"

      }], "*")

    }

     window.name = "result"

  </script>

    <script>

      let allLines = []

      window.addEventListener("message", (message) => {

        if (message.data.console){

          let insert = document.querySelector("#insert")

          allLines.push(message.data.console.payload)

          insert.innerHTML = allLines.join(";\r")

          let result = eval.call(null, message.data.console.payload)

          if (result !== undefined){

            console.log(result)

          }

        }

      })

    </script>
<br>
NÃO PRECISA SER A MELHOR NOTA, APENAS QUE SEJA BOA
<br>


</body></html>

Editado Novembro 30 por fidelidade
Aterei todo script

Entrar

Como posso por uma pequena imagem sobre um texto?

Pergunta

fidelidade

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades