Javascript Como clonar o cod da pagina com um botão?

TvRoBrasil · 23 de setembro de 2022

Ola pessoal não sei se posso colocar o artigo desta forma peço desculpa de qualquer coisa. Eu tenho uma pagina de teste para que possaver como ficou meu trabalho, no endereço:

https://sites.google.com/view/teste-lista/pedagocia/exon1 porém esta faltando um comando que esta meio bugado ou eu não fiz direito. eu não sou expert no assunto, e tive ajuda de algumas pessoas.

na pagina ja explica tudo porém o resumo é: O usuario irão dentro de uma pagina oficial realizar uns testes. e ao finalizar devera enviar a outros que ja fizeram o teste anterior e seu resultado sera calculado com o resultado de outros. por fim o que preciso é que quando o usuario for interagir com os alunos ja existentes na lista ira visualizar o noe como uma lista qualquer, ira copiar, sem a nescessitade de clicar em cima, apenas copiar, porém ao mandar as informações o mesmo ira acrescentar seu nome a esta lista numa pagina temporaria. ( ate esta parte a pagina funciona) porém o importante é que ao ser cirado a pagina com a lista atualizada sendo acrescentada o novo nome e retirado o primeiro mantendo a mesma quantidade na lista , que fosse ter a possibilidade de se copiar esta pagina em cod html, pois como esta hospedado no google sites a pagina não tem como salvar no mesmo endereço de backup, assim a intenção é que o aluno ao cria seu nome a lista que possa fazer uma copia desta pagina ja com seu nome incluso visivelmente para que seja criada um anova lista, então o mesmo manuamente ira colar o cod em uma nova pagina mas com seu login. __ se fizer o teste vera que oda para copiar o nome alterear a lista e ate copiar a pagina só que ao colar na nova pagina aparece a pagina antiga, e o ironico é que dentro do codi na linha 21 a nova lista aparece mas fica visivel só nos cod e não na lista da pagina.

SCRIPT
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UFT-8" />
   <title> </title>
 </head>
 <body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <input
     type="text"
     id="nome"
     value="insira o nome"
     onfocus="this.value='';"
   />
   <button onClick="adicionar()">Adicionar</button>

   <div class="exibir">
     <ul id="lista"></ul>
   </div>

   <textarea name="" id="copy-me"></textarea>
   <button id="copy-btn">Copiar HTML</button>
   <br />
   <br />
   <script>
     // initial state
     const nomes = [
       "Jonas@email",
       "Edna@email",
       "Felipe@email",
       "Pedro@email",
       "Tomas@email",
       "Claudio@email",
       "Brenda@email"
     ];

     // mutation state
     let updateList = [...nomes];

     // HTML: elements
     const copyValue = document.getElementById("copy-me");
     const copyButton = document.getElementById("copy-btn");

     // HTML: event-listners
     copyButton.addEventListener("click", () => {
       copyValue.select();
       document.execCommand("copy");
     });

     // transform names list in string and transform text-box value
     const onChangeCopyHtml = () => {
       const source = document.documentElement.outerHTML;

       copyValue.value = source;
     };

     // render update list
     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();
     };

     // add new name to name list
     const onAddName = (name) => {
       updateList.push(name);
       const newList = updateList.slice(1, updateList.length);

       return newList;
     };

     // função para adicionar mais um nome à lista
     function adicionar() {
       var coleta = document.getElementById("nome").value;
       var nomeDig = document.createElement("li");

       updateList = onAddName(coleta);
       // render new list
       renderList();
     }

     // first render
     renderList();
   </script>
   <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
 </body>
</html>

MailingTester · 24 de setembro de 2022

Use o github e ative o githubpages
https://www.youtube.com/results?search_query=como+postar+código+no+github
https://www.youtube.com/results?search_query=com+publicar+no+github+pages

TvRoBrasil · 25 de setembro de 2022

@MailingTester você mando link de outras paginas, não sei se ajudou.este github não conheço ou não lembro, neste caso acaba sendo outra duvida acrescentando e eu tendo que pesquisar. uma breve analise o que eu entendi é que o que você me mandou é um plano de hospedagem e minha duvida não é hospedar, pois eu ja tenho onde hospedar , a questão é copiar um cod que esta visivel temporariariamente.

felipecchaves · 26 de setembro de 2022

Testei seu código na minha maquina e funcionou perfeitamente. Reparei que o servidor que você tá usando coloca seu código dentro de vários iframes, e acredito que seu problema é esse.

Se você remover esses scripts e rodar apenas seu código acredito que vai funcionar da maneira que deseja.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>

TvRoBrasil · 27 de setembro de 2022

@felipecchaves Então colega, obrigado por apoiar, eu acho que meio buguei nas informações, como eu disse não sou muito expert, eu geralmente uso criação de algumas paginas mais para atualizr templats ou criar atraves do notpad++ ou nvu e um ou outro similar, porém quando é na raiz mesmo eu apanho pois faz muitos anos que eu fiz isto e na escola mesmo, entende. __ Por fim eu fui ao pé da letra e removi extamente a linha que me deu exemplo, e não funcionou não, eu estou testano no sites google. Na imagem que printei ira reparar que existe no cod duas lista a principal que esta em "// initial state" E outra um pouco acima que seria a de visualização no print selecionei o nome AKIRA que eu adicionei e notara que ela não aparece na principal, e o problema é que ao copiar o cod pelo botão ele copia d forma que vocÊ ve no print mas ao publicar e salvar não aparece a lista de cima apenas a original d ebaixo que nunca muda No seu print aparenta que realmente deu certo mas comigo não foi.

faz o seguinte posta aqui o cod que você atualizou. grato.

felipecchaves · 27 de setembro de 2022

13 minutos atrás, TvRoBrasil disse:

@felipecchaves então colega, obrigado por apoiar, eu acho que meio buguei nas informações, como eu disse não sou muito expert, eu geralmente uso criação de algumas paginas mais para atualizr templats ou criar atraves do notpad++ ou nvu e um ou outro similar, porém quando é na raiz mesmo eu apanho pois faz muitos anos que eu fiz isto e na escola mesmo, entende. __ por fim eu fui ao pé da letra e removi extamente a linha que me deu exemplo. e não funcionou não,, eu estou testano no sites google. faz o seguinte posta aqui o cod que você atualizou. grato.

Seu problema é que você usou algum criador de site pra criar o template, e esse código que você postou no início tá rodando dentro desse template. É como se tivesse uma página dentro de outra página. No caso desse site (https://sites.google.com/view/teste-lista/pedagocia/exon1) é uma página dentro de outra página que está dentro de mais uma página que tá dentro de outra página. São 3 iframes dentro da página principal, um dentro do outro. Isso gera uma série de problemas pro dinamismo da página.

Se você executar só esse código, ele vai realizar exatamente o que você deseja. Que é exatamente o mesmo código que você postou no início do tópico, eu só removi as duas linhas com os scripts que citei no comentário anterior.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UFT-8" />
    <title> </title>
</head>
<body>
    <input type="text" id="nome" value="insira o nome" onfocus="this.value='';" />
    <button onClick="adicionar()">Adicionar</button>

    <div class="exibir">
        <ul id="lista"></ul>
    </div>

    <textarea name="" id="copy-me"></textarea>
    <button id="copy-btn">Copiar HTML</button>
    <br />
    <br />
    <script>
        const nomes = ["Jonas@email", "Edna@email", "Felipe@email", "Pedro@email", "Tomas@email", "Claudio@email", "Brenda@email"];
        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();
    </script>
</body>
</html>

Se quiser testar no seu computador, salva esse código em um arquivo "index.html" e abre esse arquivo com o navegador. Você vai ver que esse código tá rodando perfeito, quando adiciona um novo item na lista também altera o valor da caixa de texto pra copiar.

TvRoBrasil · 27 de setembro de 2022

@felipecchaves Então creio que a ideia é criar um apagina nova e para poder publicar -la contendo o novo nome. Se você ir na minha pagina com a lista com final "Brenda@email" e adicionar seu nome iria ficar final "felipecchaves@email" ar então você copia o cod e pela sua conta google você abre o sites google e cria uma nova pagina com este cod e tera a mesma pagina que a minha porém com o seu nome no final. E não é o que esta acontecendo .

eu copiei seu cod, colei no bloco de nota dei um nomem salvei como html e funcionou acrescentando o nome, mas na caixa de texto quando eu copio o novo cod e vou em um bloco e salvo com outro nome não aparece o nome que eu acrescentei. fica a lista original. ou seja a mesma coisa que expliquei la em cima.

felipecchaves · 27 de setembro de 2022

Experimenta esse site: Teste TvRoBrasil

É o seu código rodando fora de todos os iframes. Funcionou perfeitamente no meu computador e tá rodando belezinha nesse servidor.

TvRoBrasil · 27 de setembro de 2022

@felipecchaves você depois qe criou a variavel e adicionou a lista, chegou a copiar o cod desta nova lista e publicou? pois o erro esta a partir dai ,des do cod que eu postei, de uma olhada no vídeo.

grato.

felipecchaves · 27 de setembro de 2022

Agora acho entendi o que você quer fazer. Nesse caso você precisa alterar o valor da variável "nomes" dinamicamente. Ela precisa ter um valor baseado na na lista que tá dentro da tag <ul>.

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>TvRoBrasil</title>
</head>

<body>
    <input type="text" id="nome" value="insira o nome" onfocus="this.value='';">
    <button onclick="adicionar()">Adicionar</button>

    <div class="exibir">
        <ul id="lista">
          <!-- Os nomes precisam tá aqui porque a variável "nomes" vai pegar esses valores -->
            <li>Jonas@email</li>
            <li>Edna@email</li>
            <li>Felipe@email</li>
            <li>Pedro@email</li>
            <li>Tomas@email</li>
            <li>Claudio@email</li>
            <li>Brenda@email</li>
        </ul>
    </div>

    <textarea name="" id="copy-me"></textarea>
    <button id="copy-btn">Copiar HTML</button>
    <br>
    <br>
    <script>
        let nomes = []; // A variável começa com um array vazio.
        const lis = document.querySelectorAll('li'); // Cria uma lista de todos os elementos com tag <li>.
      	// Em cada elemento da lista "lis" vai adicionar o conteúdo da tag na variável "nomes".
        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();
    </script>
</body>

</html>

TvRoBrasil · 27 de setembro de 2022

@felipecchaves Então colega preciso dizer uma coisa, e é serio..... Agora foi rsrsrs, Nossa este projeto no ano passado a gente fazia manualmente, esta parte, o pessoal fazia as atividade e tinha que enviar por wats, e dava um trabalho para organizar, agora creio que vai dar certo. era isto mesmo. O usuario 1 pode por o nome dele na lista e depois replicar esta lista nova em um apostagem em local diferente d eboa sem alterar o original e mantendo o novo assim um segundo usuario pode tanto acrescentar seu nome na lista origional e fazer uma nova ou fazer esta nova a partir do usuario 2.. .

Vou deixar a lista dos link caso alguém precise usar esta ideia fica ai como resolvido...

https://sites.google.com/view/contatodeemail

https://sites.google.com/view/contatodeemail2

https://sites.google.com/view/contatodeemail3

hospedados em locais e login diferentes

E se não for atrapalhar muito, existe a hipotese de caso eu acrescentar total de 9 nomes porém que os ultimos fique oculto tanto na pagina original quanto nas novas ou seja :

<li>Jonas@email</li> <li>Edna@email</li> <li>Felipe@email</li> <li>Pedro@email</li> <li>Tomas@email</li> <li>Claudio@email</li> <li>Brenda@email</li> fica visivel e

oculto fica as proximas ultimas <li>clara@email</li> <li>marco@email</li> <li>pedro@email</li>

e quando for por a variavel nova que fique no final junto com as escondidas. mas se não der tudo bem éra só um acrescimo que me deram ontem. Mas assim ja esta otimo.

MailingTester · 27 de setembro de 2022

Em 25/09/2022 às 20:24, TvRoBrasil disse:

o que você me mandou é um plano de hospedagem

Perdão por não ter conseguido ser claro.
Mas o github faz exatamente o que você precisa.
No github você consegue gratuitamente:
hospedar uma aplicação web: html + js + css
com a possibilidade de outrem baixarem uma cópia do código clicando em apenas um único botão.
E ainda têm a opção/possibilidade de clonar, forkar, sugerir alterações/upgrade/melhorias e contribuir com o seu código, etc...

TvRoBrasil · 28 de setembro de 2022

@MailingTester agradeço a intenção, realmente de coração. Eu consegui com a ajuda do felipe.

No caso de sua sugestão não seria o q necessito.Eu ja tenho onde alojar a pagina, e no seu caso mesmo q resolvesse a parte de copiar eu teria q publicar no local, e os alunos teriam tambem q criar conta. Mas agradeço mesmo