Projeto JavaScript: copiar para a prancheta

1. Apresentação: Todos nesta classe, vamos criar e copiar para o projeto clipbot usando JavaScript Assim, você pode copiar todo o texto que está escrito dentro desse campo de entrada apenas clicando neste ícone. Então, se eu clicar nesse ícone, meu texto será copiado , escrito dentro desse campo de entrada Escreverei alguns outros textos como algo assim e, em seguida, clicarei neste ícone e, em seguida, esse texto será copiado , escrito dentro desse campo de entrada Agora, se eu quiser colar, vou colar aqui, para que seja colado porque foi copiado para minha área de transferência quando eu clico Então, vamos aprender como criar esse tipo de projeto usando JavaScript no próximo vídeo. 2. Configuração: Neste vídeo, vamos fazer a configuração do nosso projeto. Para o ícone, significa que vamos usar uma cópia para o ícone da área de transferência em nosso projeto Porque ícone significa obter o ícone, vamos usar este site. Este site fontawesome.com. Você pode visitar este site e clicar neste botão Iniciar e depois de clicar neste botão Iniciar, você verá esta página. E aqui você pode fornecer seu endereço de e-mail e clicar neste código de incorporação do Sand kit e você receberá um link CDN em seu endereço de e-mail para conectar o Font Awesome ao seu Mas se você não quiser fornecer seu endereço de e-mail, o que eu não quero fornecer, é muito difícil. Não é difícil. É um processo muito longo. Então, se você não quiser compartilhar seu endereço de e-mail e tudo mais, basta pesquisar CDN Js e abrir este site Neste preenchimento de pesquisa, você pode pesquisar uma fonte incrível, o que significa que você pode pesquisar o nome do site. O nome do seu site é font dosome digite font awesome aqui e clique nesta fonte Awesome A partir daqui, você deve clicar nesta tecnologia Copy Link. Clique aqui e sua tag de link será copiada com link CDN e basta abrir seu codator e , dentro do codator, você poderá colá-la Mas agora ganhamos pasta. Escreveremos nosso código HTML e, dentro desse código HTML, colaremos esse link Então, como você pode ver, eu criei uma pasta, o nome da pasta é Copiar para a área de transferência Dentro dessa pasta, eu criei três arquivos, arquivo JavaScript, arquivo HTML e arquivo CSS. Você também precisa criar esse arquivo JavaScript, arquivo e arquivo CSS. O nome dos arquivos pode ser qualquer coisa, mas a extensão deve ser jthtml Em seguida, abra seu arquivo HTML e, dentro desse arquivo HTML, você deve criar um padrão HTML Para criar um clichê em HTML, basta clicar no ponto de exclamação e inserir seu clichê exclamação e será criado. Dentro disso, não dentro e abaixo dessa metatécnica, você pode colar seu link, que você copiou. Depois de colá-lo, clicarei em A G para embrulhá-lo. Depois de clicar em Control V, você receberá este link. E de onde temos esse link, pegamos esse link daqui. Basta clicar nesta tecnologia de link de cópia e você obterá essa tecnologia Link e, dentro da tecnologia Link, o link CDN também estará lá assim Agora vamos vincular nosso arquivo CSS e JavaScript para vincular CSS, basta ir abaixo deste deck de títulos e criar uma tecnologia de link e clicar nesta coluna de links CSS e, dentro do HRF, você deve escrever o nome do arquivo CSS Nosso nome de arquivo CSS é CSS estilóide e, dentro do HRF, está escrito CSS estiloide. Vou consertar isso. Dentro desse HRF, está escrito em estilo CSS. Agora vou conectar esse arquivo HTML ao nosso arquivo JavaScript para conectar nosso arquivo HTML ao arquivo JavaScript. Eu tenho que criar uma tag de script dentro desse corpo técnico, basta escrever o script e chamar o SRC Dentro deste SRC, você precisa escrever o arquivo JavaScript, nosso arquivo JavaScript é Abt Eu escrevi aqui no Js. Agora, nosso CSS e nosso JavaScript estão vinculados ao nosso HTML, e geramos com sucesso um link CDN para fondosm e agora podemos usar os ícones dos fondos É isso para o vídeo de configuração. Agora vamos escrever o código HTML no próximo vídeo. 3. HTML: Todos neste vídeo, vamos escrever nosso código HTML para nosso projeto. O que escreveremos em nosso código HTML é para isso que precisamos verificar nosso projeto final. Este é o nosso projeto final que vamos construir e dentro do nosso HTML, primeiro temos que criar esse fundo de cor azul. Este fundo de cor azul é um contêiner. Vou criar a tecnologia Diff para este contêiner e dentro desse contêiner, haverá um campo de entrada Como você pode ver, escrevemos algum texto aqui, esse texto está escrito dentro do campo de entrada e para criar o campo de entrada, temos que usar a tecnologia de entrada. Criaremos tecnologia de entrada dentro desse contêiner dif e, em seguida, criaremos um botão Teck. Dentro dessa tecnologia de botão, em vez de texto, usaremos esse ícone Vamos construir isso significa construir a estrutura do nosso projeto em nosso HTML, então vou abrir meu codator e dentro desse codator Como você pode ver, eu já abri meu arquivo HTML e dentro desse arquivo HTML, vou entrar nessa tecnologia corporal e dentro dessa tecnologia corporal, a primeira coisa que vou fazer é criar at para criar um dif contínuo, posso simplesmente escrever dif e posso usar met para usar Como eu quero criar um dif com o nome da classe de container, usando met, posso escrever deft container, TIN, TIN aqui Se eu clicar em Enter, obterei uma tag Diff com uma classe de contêiner Dentro dessa tecnologia diferente, vou criar uma. O que vou criar eu tenho que verificar. Vou criar um campo de entrada, para criar um campo de entrada, eu tenho que escrever a tag de entrada. Dentro dessa tag de entrada, o tipo será texto. Como você pode ver, há um valor Bdfault. O valor padrão é que esse texto será copiado. Qual é o significado do valor Bdefault? Mesmo que eu recarregue esta página, removerei algum texto e mesmo que eu recarregue esta página, obterei esse texto Bdfault Isso significa que para criar esse texto Bdfault, você precisa escrever esse texto dentro do valor do texto de entrada Você tem que criar um atributo , o nome do tributo será valor e dentro desse valor, você escreverá este texto que será copiado Agora você receberá este texto que será copiado por padrão Agora, abaixo desse texto de entrada, criarei uma tecnologia de botão, basta escrever o botão. Dentro dessa tecnologia de botão, criarei um ícone. Como estamos usando o ícone de criação da fonte DoSoMT, você deve digitar Tech No tema da classe desse ícone, você pode encontrar o nome da classe desse ícone no site do dosme de fontes Mas eu sei o nome da classe desse ícone. O nome da classe desse ícone é muito sólido, distante e, em seguida, o tamanho do ícone. Vou apenas digitar class e a classe será de um traço sólido, e depois far dy, até agora ds copy Então, o tamanho do ícone, o tamanho do ícone será de longe dois X. Agora vamos salvar e salvar em nosso navegador Vou clicar em Abrir com servidor ativo. Agora, como você pode ver, estamos obtendo nossa estrutura significa que estamos obtendo nosso campo de entrada, e há um texto B padrão dentro desse campo de entrada, e então estamos recebendo um botão com o ícone de cópia para clicar em colocar Isso é tudo para o nosso vídeo HTML. Agora vamos escrever código CSS em nosso próximo vídeo. 4. Adicionando estilo: Neste vídeo, vamos escrever código CSS para nosso projeto para adicionar estilo a este projeto e, depois adicionar meios de estilização após escrever o código CSS, nosso projeto ficará assim Vamos adicionar um pouco de estilo neste projeto para adicionar estilo, vou abrir meu codator e dentro desse codator eu já abri meu arquivo CSS de estilo e dentro desse arquivo, vou adicionar um pouco de CSS vou abrir meu codator e dentro desse codator eu já abri meu arquivo CSS de estilo e dentro desse arquivo, vou adicionar um pouco de CSS. Então, a primeira coisa que vou fazer é colocar esse conteúdo no centro porque esse conteúdo está no centro, então vou colocar esse conteúdo no centro e depois vou mudar a família da fonte. Vamos começar a adicionar um pouco de estilo. Em primeiro lugar, vou colocar isso no centro. Para centralizar isso, vou selecionar minha tecnologia corporal. Dentro dessa tecnologia de carroceria, escreverei display flex. Significa que vou usar o Flexboox para centralizar esse conteúdo Então, para usar o Flexbox, você precisa escrever display flex e , em seguida, definir a direção flexível Então, vou definir a direção da flexão ou você não precisa definir a direção da flexão Por enquanto, não vou definir. Se for necessário, somente eu definirei a direção da flexão. Agora vamos adicionar o centro de conteúdo do Justify. Então, justifique o centro de conteúdo. O que esse centro de conteúdo justificado fará é colocar nosso conteúdo horizontalmente no centro e, para colocar nosso conteúdo verticalmente no centro, você precisará usar o Align item center você precisará usar Esse centro de linho colocará nosso conteúdo verticalmente no Como estamos colocando nosso conteúdo verticalmente no centro, precisamos definir uma altura Então, para definir a altura, escreverei altura e a altura será 100 Vg Então eu acho que você já sabe qual é o significado de 100 Vg, 50 he, mas também vou mostrar que 100 vg significa a página inteira Agora que estamos trazendo esse conteúdo para o centro de 100 g, o que significa que queremos colocar esse conteúdo no centro desta página inteira. Significa que esse é o centro. Agora, nosso conteúdo está no centro. Agora vou mudar a família da fonte. A família de fontes é, antes de tudo, família de fontes e a família de fontes é aérea Esta antena aérea é Helvatka e serif, então agora vamos evoluir a aparência de nosso rouser, e agora está com a aparência correta, significa que agora nosso conteúdo então agora vamos evoluir a aparência de nosso rouser, e agora está com a aparência correta, significa que agora nosso conteúdo está no centro. Agora, o que vou fazer agora adicionar essa cor azul em nosso diferencial de contêineres Portanto, para adicionar a cor azul em nosso continuador Diff significa em segundo plano, você deve selecionar esse mergulho contínuo O nome da classe do dif era container, então é por isso que eu selecionei a classe Então, contêineres, U e TEI e seu contêiner dentro dos colchetes, adicionarei a cor de fundo Então, cor de fundo. E os códigos hexadecimais das cores de fundo, uh, 4075 EF, 4075 EF Então, agora vamos adicionar um pouco de preenchimento em nossa cor de fundo. Por que estamos adicionando preenchimento, estamos adicionando preenchimento porque queremos tornar essa cor de fundo um pouco grande por dentro Para aumentar nossa cor de fundo, estamos adicionando preenchimento e o preenchimento será de 40 pixels Vamos salvar e dar uma olhada em nosso navegador como está. Como você pode ver, este não é o projeto em que você está trabalhando. Estamos trabalhando nesse projeto. Agora, como você pode ver, estamos recebendo esse fundo azul, mas as bordas não são arredondadas. Para tornar as bordas arredondadas, você pode usar a propriedade border radius, il type des radius il type E o raio da borda será de oito pixels. Agora vamos dar uma olhada em nosso navegador. Agora está parecendo adequado. Agora está apenas assim, eu acho, com essa aparência em si. Agora temos que tornar esse campo de entrada um pouco grande, como esse campo de entrada é grande. Significa que adicionamos um pouco de preenchimento nesse campo de entrada. Vamos fazer isso. Agora vou adicionar o estilo dentro do campo de entrada. Selecionarei a entrada e selecionarei especificamente esse tipo de texto porque quero adicionar estilo a essa área de texto do campo de entrada Então, vou copiar esse tipo de texto e tenho que criar colchetes e, dentro dos colchetes, posso escrever texto digitado E agora vamos adicionar preenchimento a isso. Por que estamos adicionando preenchimento. Estamos adicionando preenchimento porque queremos torná-lo grande Portanto, o preenchimento e o preenchimento serão de 20 pixels. Então, digamos que vamos dar uma olhada em nosso navegador como está. Está funcionando ou não. Então, sim , agora, como você pode ver, isso parece quase semelhante. Agora eu tenho que aumentar a família da fonte deste texto, não o tamanho da fonte da família de deste texto para aumentar o tamanho fonte. Posso digitar o tamanho fonte e o tamanho da fonte desse texto será de 16 pixels. Agora vou adicionar a margem certa. Por que eu adiciono o ISU. Vamos dar uma olhada no nosso navegador. Estamos adicionando margem direita porque não há espaço entre esse botão e esse campo de entrada. Para criar algum espaço entre esse botão e o campo de entrada, estamos adicionando uma margem à direita. Agora vou digitar a margem certa. E a margem direita será de dez pixels e temos que remover a borda dessa entrada. Para remover as bordas, basta digitar border nun. Então não haverá nenhuma borda, digite borda e depois nenhuma. Agora vamos dar uma olhada em nosso roteador como ele está. Agora, como você pode ver, parece quase o mesmo, mas temos que estilizar esse botão. Para estilizar esse botão, selecionarei esse botão técnico. Dentro dessa tecnologia de botão, quero aumentar o tamanho desse ícone para aumentar o tamanho desse ícone, adicionarei preenchimento e o preenchimento será de dez pixels E a cor de fundo do botão será transparente porque há alguma cor de fundo , como você pode ver. Essa cor de fundo está lá. Portanto, para remover essa cor de fundo do botão, você pode digitar cor de fundo transparente e a cor de fundo será transparente. Então, agora vamos dar uma olhada em nosso navegador. Agora, como você pode ver, a cor de fundo foi removida, mas há alguma borda. Agora, para remover a borda, você pode digitar borda, nenhum, então borda e, em seguida, nenhum. Agora, digamos que vamos dar uma olhada em nosso navegador. Agora, como você pode ver, nosso campo de entrada é um pouco parecido com este. Mas agora o que temos que fazer é aumentar o tamanho do, eu acho, e temos que fazer esses ícones ficarem brancos, e temos que alinhar esse ícone no centro. Vamos fazer isso. Primeiro, vou adicionar a cor a esse ícone para adicionar a cor, vou apenas digitar a cor e a cor será branca. E para alinhar esse ícone no centro, posso digitar alinhamento vertical Existe uma propriedade com o nome de alinhamento vertical, que alinhará nosso elemento e verticalmente onde queremos alinhar, queremos alinhar no meio para que você possa digitar no meio Agora, se verificarmos, agora você pode ver que ele está alinhado no centro, o que significa que o ícone está alinhado no centro desse contêiner Agora temos que aumentar o tamanho da fonte desse ícone para aumentar o tamanho da fonte, você pode digitar o tamanho da fonte. E o tamanho da fonte será de 16 pixels. Agora, se você der uma olhada em nossa calça, agora você pode ver que ela parece um pouco maior, fique assim Agora você pode ver que há uma barra de rolagem nesta página, mas não há nenhuma barra de rolagem nessa página. Por que existe uma barra de rolagem, existe uma barra de rolagem em nosso projeto atualmente em funcionamento porque não adicionamos margem zero em nosso corpo. Se você adicionar margem zero em seu corpo , a barra de rolagem será removida. Margem zero. Agora vamos salvar e dar uma olhada em nosso navegador. Agora, como você pode ver, nossa barra de rolagem foi removida deste projeto. Por que adicionamos margem zero neste projeto, adicionamos margem zero porque, por padrão, o CSS dá alguma margem a esta página e, por causa dessa margem, estávamos obtendo aquela barra de rolagem. Agora, quando removemos essa margem, por padrão, não há barra de rolagem. Agora temos que adicionar um pouco de Hefe, eu acho. Há algum efeito de foco neste ícone. E não há nenhum efeito. Para adicionar o efeito Her, eu tenho que selecionar este botão. E dentro desse botão, estou adicionando efeito Ho, então é por isso que estou selecionando o botão. E então, para adicionar o efeito H, basta digitar dois pontos e passar o mouse Então, o que você quer fazer quando passarmos o mouse sobre esse botão, queremos mudar a cor de fundo Então, basta copiar essa cor de fundo e deixá-la um pouco mais clara. Controle C e Controle V. Vou digitar o código hexadecimal dessa cor em si. O código hexadecimal dessa cor será três duplos 59, três, cinco, duplo nove Agora vamos dar uma olhada no nosso navegador. Agora, se eu passar o mouse sobre esse ícone, há um efeito de foco e , em nosso projeto final, se eu passar o mouse, há um raio de borda que significa que as bordas são redondas Então, para tornar essas bordas arredondadas, basta adicionar o raio da borda dentro desse botão Então, basta adicionar o raio da borda. E o raio da borda será de quatro pixels. Então, agora vamos salvar e dar uma olhada em nosso navegador. Agora, se eu revisar isso, fundo tem alguns cantos arredondados, assim como nosso projeto final. Ok, então este foi o nosso projeto final, e este é o nosso projeto atual no qual estamos trabalhando. Então, agora vamos verificar. Então, isso também tem raio de borda nessa cor de fundo, e isso também tem raio de borda nessa cor de fundo É isso para este vídeo. Agora vamos adicionar JavaScript neste 5. Javascript: Então, agora vamos escrever código JavaScript para este projeto. Então, por que estamos escrevendo código JavaScript? Estamos escrevendo código JavaScript porque, se eu clicar nesse botão, nada acontecerá. Significa que esse texto escrito dentro desse campo de entrada não será copiado. Para adicionar essa funcionalidade, qual funcionalidade? Quando clico nesse botão, quero copiar o texto que está escrito dentro do campo de entrada. Para adicionar essa funcionalidade, vou escrever um código JavaScript. Então, agora vamos aprender como adicionar esse tipo de funcionalidade usando JavaScript. Eu abrirei meu codator e abrirei meu arquivo JavaScript. Dentro desse arquivo JavaScript, criarei uma função. A função e o nome dessa função serão copiar texto. E agora o que queremos copiar, queremos copiar o valor do campo de entrada significa qual é o valor do campo de entrada? Tudo o que escrevermos dentro desse campo de entrada será o valor. Então, para copiar o texto que está escrito dentro do campo de entrada, temos que selecionar esse campo de entrada para selecionar o campo de entrada, eu criarei uma variável e o nome da variável será inserido. E para selecionar isso, usarei o seletor de consulta de pontos do documento, o seletor consulta de pontos do documento e a tag onm. Qual é o nome da tecnologia? O tegame é entrada, digite entrada. Agora, para copiar o texto que está escrito dentro do arquivo de entrada, obtemos um método. O nome do método é navigator dot ClipbortText. Basta escrever a prancheta de pontos do navegador. Texto pontilhado. Este é o nome do método e agora crie esses colchetes e, dentro desse colchete, você deve definir o que deseja copiar O que queremos que esse método copie, queremos que esse método copie o valor de entrada. O que é o texto que escreveremos dentro do campo de entrada é o valor. Então, queremos que esse método copie o valor de entrada. Digite input enquanto estamos digitando input, estamos digitando input porque o nome da variável em que selecionamos a entrada dez é input Se o nome da variável for outra coisa, escreveremos essa outra coisa aqui. E agora, o que queremos selecionar, queremos selecionar o valor desse campo de entrada. Então, basta digitar o valor do ponto de entrada. E agora esse método selecionará o valor desse campo de entrada. Agora temos que definir quando queremos chamar essa função. Queremos chamar essa função quando clicarmos nesse botão. Então, vamos selecionar esse botão neste JavaScript. Para selecionar, criarei uma variável, o nome da variável será Btn para selecionar, digitarei o seletor de consulta por pontos do documento, então o seletor de consulta por pontos do documento, e o que queremos selecionar, queremos selecionar a tecnologia do botão, então basta digitar o nome da tag, o nome da tag E agora o que queremos fazer, queremos chamar essa função quando clicamos nesse botão. Então, para fazer isso, você precisa adicionar até mesmo um ouvinte nessa tecnologia de botão Então, basta selecionar essa variável e depois digitar btnt add even E então qual evento esse botão escutará o evento que esse botão ouvirá é evento de clique, significa que queremos chamar uma função quando clicamos nesse botão. Então, basta digitar click e depois o nome da função que você deseja chamar quando esse botão for clicado O nome da função que queremos chamar quando esse botão for clicado é essa função de cópia de texto Então, basta copiar e colar aqui. Agora vamos salvar e dar uma olhada em nosso navegador, então vou salvar isso também e todos os arquivos que vou salvar e agora vamos dar uma olhada em nosso navegador. Este é o projeto significa que este foi o projeto final, e este é o projeto em que estamos trabalhando agora. Então, vou digitar um texto aqui. Então, qualquer coisa que eu possa digitar, clique neste botão, ou clique neste ícone, e eu removo isso e cole aqui, basta clicar com o botão direito do mouse e clicar nesta pasta. Agora você pode ver que é uma cópia escrita do texto. Farei algo novamente e clicarei nesse botão novamente. E então eu removerei isso e clicarei em Control V. Isso não está funcionando. Por que isso não está funcionando? Vamos verificar. O erro foi que escrevemos esse método errado. O que escrevemos de errado? Devemos escrever o texto do ponto R do quadro de navegação, digitar o texto também. Esse é o nome do método. Agora, se salvarmos, abrirmos nosso navegador e verificarmos, clicarei aqui e colarei Control V. Agora está funcionando. Vou digitar outra coisa e clicar aqui e remover isso e, novamente, colar. Agora está funcionando. Agora vou digitar outra coisa novamente, assim, vou digitar e clicar neste botão e agora vou removê-lo e clicar com o botão direito do mouse e , em seguida, clicar neste botão Colar. Agora, como você pode ver, isso está funcionando e é isso para este vídeo desta aula, criamos esse recurso de cópia para texto e espero que você goste dessa aula.