Proyecto de JavaScript: copiar al portapapeles

1. INTRODUCCIÓN: Todos en esta clase, vamos a construir y copiar al proyecto clipbot usando JavaScript. Así podrás copiar todo el texto que está escrito dentro de este campo de entrada con tan solo hacer clic en este icono. Entonces, si hago clic en este icono, mi texto será copiado, cual está escrito dentro de este campo de entrada. Escribiré algunos otros textos como algo y luego haré clic en este icono, y luego se copiará este texto que se escribe dentro de este campo de entrada. Ahora si quiero pegar, lo voy a pegar aquí, así se pegará porque se copió a mi portapapeles cuando haga clic en este botón Entonces aprendamos a construir este tipo de proyectos usando JavaScript a partir del siguiente video. 2. Configuración: En este video, vamos a hacer la configuración de nuestro proyecto. Para el icono, significa que vamos a usar un icono de copia al portapapeles en nuestro proyecto Para icono significa obtener el icono, vamos a utilizar este sitio web. Este sitio web de fontawesome.com. Puedes visitar este sitio web y hacer clic en este botón de inicio y después de hacer clic en este botón de inicio, verás esta página. Y aquí puede proporcionar su dirección de correo electrónico y hacer clic en este código de inserción del kit de arena y obtendrá un enlace CDN en su dirección de correo electrónico para conectar Font Awesome con su sitio web Pero si no quieres proporcionar tu dirección de correo electrónico, que yo no quiero proporcionar, es muy difícil. No es difícil. Es un proceso muy largo. Entonces, si no quieres compartir tu dirección de correo electrónico y todo, solo puedes buscar en CDN Js y abrir este sitio web En este relleno de búsqueda, puede buscar fuente impresionante significa que puede buscar el nombre del sitio web. Tu nombre del sitio es fuente tipo dosome font awesome aquí y haz clic en esta fuente Impresionante Desde aquí, tienes que hacer clic en este Copiar enlace técnico. Haga clic en esto y su etiqueta de Enlace se copiará con su enlace CDN y solo abra su codador y dentro de su codador, podrá pegarlo Pero ahora ganamos pasta. Escribiremos nuestro código Htmal y dentro ese código Htmal, vamos a pegar ese enlace Entonces como puedes ver, he creado una carpeta, el nombre de la carpeta es Copiar al Portapapeles Dentro de esta carpeta, he creado tres archivos, archivo JavaScript, archivo HTML y archivo CSS. También tienes que crear este archivo JavaScript, archivo y archivo CSS. El nombre de los archivos puede ser cualquier cosa, pero la extensión debe ser jthtml Después abre tu archivo HTML y dentro de este archivo HTML, tienes que crear una versión HTML. Para crear el boilerplate HTmil solo puedes hacer clic en exxclamación Mark y Enter la exxclamación Mark y Enter se creará tu boilerplate. Dentro de esto no dentro y por debajo de esta meta tech, puedes pegar tu enlace, el cual has copiado. Después de pegarlo, haré clic en A G para envolverlo. Después de hacer clic en Control V, obtendrá este enlace. Y de donde tenemos este enlace, tenemos este enlace de aquí. Simplemente haga clic en esta tecnología de enlace de copia y obtendrá esta tecnología de enlace y dentro de la tecnología de Link, el enlace de CDN también estará ahí así Ahora vamos a vincular nuestro archivo CSS y JavaScript para enlazar CSS, solo tienes que ir por debajo de este mazo de títulos y crear uno Tecnología de enlace y hacer clic en esta columna de enlace CSS y dentro del HRF, tienes que escribir el nombre de archivo CSS Nuestro nombre de archivo CSS es Styloid CSS y dentro del HRF, está escrito Styloid CSS. Voy a arreglar esto. Dentro de este HRF, está escrito estilo CSS. Ahora conectaré este archivo HTML con nuestro archivo JavaScript para conectar nuestro archivo HTML con el archivo JavaScript. Tengo que crear una etiqueta de script dentro de este body tech, solo escribir script y llamar a SRC Dentro de este SRC, tienes que escribir el archivo JavaScript, nuestro archivo JavaScript es Abt He escrito aquí en Js. Ahora nuestro CSS y nuestro JavaScript está vinculado con nuestro HTML, y hemos generado con éxito un enlace CDN para fondosm y ahora podemos usar los iconos Esto es para video de configuración. Ahora escribamos código HTML en el siguiente video. 3. HTML: Todos en este video, vamos a escribir nuestro código HTML para nuestro proyecto. Lo que vamos a escribir dentro de nuestro código HTML para eso tenemos que comprobar nuestro proyecto final. Este es nuestro proyecto final que vamos a construir y dentro de nuestro HTML, primero tenemos que crear este fondo de color azul. Este fondo de color azul es contenedor. Voy a crear Diff tech para este contenedor y dentro de este contenedor, habrá un campo de entrada. Como puedes ver, hemos escrito algo de texto aquí, este texto está escrito dentro del campo de entrada y para crear campo de entrada, tenemos que usar input tech. Crearemos input tech dentro este contenedor dif y luego crearemos un botón Teck y dentro ese botón tech en lugar de texto, vamos a usar este icono Construyamos esto significa vamos a construir la estructura de nuestro proyecto en nuestro HTML, así abriré mi codador y dentro de este codador Como pueden ver, ya abrí mi archivo HTML y dentro de este archivo HTML, entraré dentro de este body tech y dentro de este body tech, primero, lo que voy a hacer es crear en para crear un dif continuo, solo puedo escribir dif y puedo usar met para usar Como quiero crear un dif con el nombre de clase de contenedor, usando met, puedo escribir contenedor hábilmente, TIN, TIN aquí Si hago clic en Enter, obtendré una etiqueta Diff con una clase de contenedor. Dentro de este diff tech, voy a crear uno. Lo que voy a crear tengo que comprobarlo. Voy a crear un campo de entrada, para crear campo de entrada, tengo que escribir etiqueta de entrada. Dentro de esta etiqueta de entrada, el tipo será texto. Como puede ver, hay un valor Bdfault. El valor de Bdfault es este texto será copiado. ¿Cuál es el significado del valor Bdefault? A pesar de que vuelva a cargar esta página, así que voy a eliminar algo de texto y aunque vuelva a cargar esta página, volveré a recibir ese texto de Bdfault Eso significa que para crear este texto Bdfault, hay que escribir este texto dentro del valor del texto de entrada Tienes que crear atributo, dt nombre de tributo será valor y dentro de este valor, escribirás este texto será copiado. Ahora vas a obtener este texto será copiado cosa por defecto. Ahora debajo de este texto de entrada, voy a crear tecnología de un botón, solo botón de escritura. Dentro de este botón tech, voy a crear un icono. Como estamos usando fuente doSOMT create icon, tienes que escribir Tech En el tema de clase de este icono, puedes encontrar el nombre de clase de este ícono en ese sitio web de fuente dosme Pero conozco el nombre de clase de este icono. El nombre de la clase de este icono es muy sólido, copia lejana, y luego el tamaño del icono. Yo solo escribiré clase y la clase será f dash solid, y luego lejos dy, hasta ahora ds copy. Entonces el tamaño del icono, el tamaño del icono será lejos dos X. Ahora vamos a guardar y guardar en nuestro navegador. Haré clic en Abrir con servidor en vivo. Ahora como puede ver, estamos obteniendo nuestra estructura significa que estamos obteniendo nuestro campo de entrada, y hay un texto Bdefault dentro de este campo de entrada, y luego estamos obteniendo un botón con icono de copia para hacer clic en poner Esto es para nuestro video HTML. Ahora escribamos código CSS en nuestro próximo video. 4. Agregar estilo: En este video, vamos a escribir código CSS para nuestro proyecto para agregar estilo en este proyecto y después agregar medios de estilo después de escribir código CSS, nuestro proyecto se verá así. Vamos a agregar un poco de estilo en este proyecto para agregar estilo, voy a abrir mi codator y dentro de este codator ya he abierto mi archivo CSS de estilo y dentro de este archivo, voy a agregar algo Entonces lo primero que voy a hacer es, primero voy a llevar este contenido al centro porque este contenido está en el centro, así que voy a traer este contenido en centro y después voy a cambiar la familia de fuentes. Empecemos a agregar un poco de estilo. En primer lugar, voy a traer esto en el centro. Para poner esto en el centro, solo seleccionaré mi body tech. Dentro de este body tech, voy a escribir display flex. Significa que voy a usar Flexboox para poner ese contenido en el centro Entonces, para usar Flexbox, tienes que escribir display flex y luego puedes definir la dirección del flex Entonces voy a definir la dirección de flexión o no tienes que definir la dirección de flexión. Por ahora, no voy a definir. Si es necesario, entonces solo voy a definir la dirección de flexión. Ahora agreguemos justificar el centro de contenido. Así justifican el centro de contenido. Lo que esto justifica que el centro de contenido hará es que traerá nuestro contenido horizontalmente en centro y para llevar nuestro contenido verticalmente en el centro, tienes que usar Align item center. Este centro de linem traerá nuestro contenido verticalmente en el centro Como estamos llevando nuestro contenido verticalmente en el centro, tenemos que definir una altura. Entonces para definir la altura, escribiré altura y la altura será de 100 Vg Entonces supongo que ya sabes cuál es el significado de 100 Vg, 50 él, pero luego también te voy a mostrar 100 vg significa la página completa Ahora estamos trayendo este contenido en centro de 100 g significa que queremos traer este contenido en el centro de esta página completa. Significa que este es el centro. Ahora nuestro contenido está en el centro. Ahora voy a cambiar la familia de fuentes. La familia de fuentes es, en primer lugar, familia de fuentes y la familia de fuentes es aerial. Esta Helvatka aérea y serif, así que ahora vamos a evolucionar en nuestro rouser cómo se ve, y ahora está buscando medios adecuados ahora nuestro contenido está ahora nuestro contenido Ahora lo que voy a hacer ahora voy a añadir este color azul en nuestro continer diff Entonces, para agregar color azul en nuestro continuer Diff significa en el fondo, tienes que seleccionar ese continuo dip El nombre de clase del dif era contenedor, así que por eso he seleccionado la clase. Entonces contenedores, U y TEI y su contenedor dentro de los corchetes, voy a agregar el color de fondo Así que el color de fondo. Y los colores de fondo códigos hex, uh, 4075 EF, 4075 Así que ahora vamos a añadir un poco de relleno en nuestro color de fondo. Por qué estamos agregando relleno, estamos agregando relleno porque queremos que este color de fondo sea un poco grande desde adentro. Para que nuestro color de fondo sea grande, estamos agregando relleno y el relleno será de 40 píxeles. Vamos a guardar y echemos un vistazo en nuestro navegador cómo se ve. Como puedes ver, este no es el proyecto en el que estás trabajando. Estamos trabajando en este proyecto. Ahora como pueden ver, estamos obteniendo este fondo azul, pero los bordes no están redondeados. Para hacer los bordes redondeados, se puede utilizar el propertyym border radius, il type des Y el radio del borde será de ocho píxeles. Ahora vamos a echar un vistazo en nuestro navegador. Ahora se ve como es correcto. Ahora solo se ve así, supongo, luciendo así mismo. Ahora tenemos que hacer este campo de entrada un poco grande como este campo de entrada es grande. Significa que tenemos agrega algo de relleno en este campo de entrada. Hagámoslo. Ahora voy a agregar estilo el estilo dentro del campo de entrada. Seleccionaré la entrada y seleccionaré específicamente este tipo de texto porque quiero agregar estilo en esta área de texto del campo de entrada. Entonces voy a copiar este tipo de texto, y tengo que crear corchetes y dentro de corchetes, puedo escribir texto tipo. Y ahora agreguemos relleno a esto. Por qué estamos agregando relleno. Estamos agregando relleno porque queremos que sea grande. Por lo que el relleno y el relleno serán de 20 píxeles. Entonces digamos y echemos un vistazo en nuestro navegador cómo se ve. Está funcionando o no. Entonces sí, ahora, como pueden ver, esto se ve casi similar. Ahora tengo que aumentar la familia de fuentes de este texto, no familia de fuentes tamaño de fuente de este texto para aumentar el tamaño de fuente, puedo escribir tamaño de fuente tamaño y el tamaño de fuente de este texto será de 16 píxeles. Ahora voy a añadir margen derecho. Por qué agrego ISU. Vamos a guardar una mirada en nuestro rowser. Estamos agregando margen derecho porque no hay espacio entre este botón y este campo de entrada. Para crear algo de espacio entre este botón y el campo de entrada, estamos agregando algún margen a la derecha. Ahora voy a escribir margen derecho. Y el margen derecho será de diez píxeles y tenemos que quitar el borde de esta entrada. Para quitar los bordes, solo puedes escribir border monja. Entonces no habrá ningún borde, escriba border y luego ninguno. Ahora vamos a guardar una mirada en nuestro router cómo se ve. Ahora como puedes ver, se ve casi igual, pero tenemos que darle estilo a este botón. Para darle estilo a este botón, seleccionaré este botón botón técnico. Dentro de este botón tech, quiero aumentar el tamaño de este icono para aumentar el tamaño de este icono, voy a agregar relleno y el relleno será de diez píxeles. Y el color de fondo del botón será transparente porque hay algún color de fondo como puedes ver. Este color de fondo está ahí. Entonces, para eliminar este color de fondo del botón, puede escribir color de fondo color de fondo transparente, y el color de fondo será transparente. Así que ahora echemos un vistazo en nuestro navegador. Ahora como puedes ver, se ha quitado el color de fondo , pero hay algún borde. Entonces ahora para eliminar border, puedes escribir border, none so border, y luego none. Ahora digamos echemos un vistazo en nuestro navegador. Ahora como pueden ver, nuestro campo de entrada se ve uh, un poco similar así. Pero ahora lo que tenemos que hacer es que tenemos que aumentar el tamaño del supongo, y tenemos que hacer que estos iconos sean de color blanco, y tenemos que alinear este icono en el centro. Hagámoslo. Primero, agregaré el color a ese icono para agregar el color, solo escribiré color y el color será blanco. Y para alinear ese icono en el centro, puedo escribir vertical align middle. Hay una propiedad con el nombre de vertical align, que alineará nuestro elemento vertical y verticalmente donde queremos alinear, queremos alinear en medio para que puedas escribir middle. Ahora si comprobamos, ahora se puede ver que está alineado en el centro significa que el icono está alineado en el centro de este contenedor. Ahora tenemos que aumentar el tamaño de fuente de este icono para aumentar el tamaño de fuente, puedes escribir tamaño de fuente. Y el tamaño de la fuente será de 16 píxeles. Ahora bien, si echas un vistazo en nuestro rouser, ahora puedes ver que se ve un poco más grande, solo pareces así Ahora puedes ver que hay una barra de desplazamiento en esta página, pero no hay ninguna barra de desplazamiento en esta página. Por qué hay barra de desplazamiento, hay barra de desplazamiento en nuestro proyecto actualmente en funcionamiento porque no hemos agregado margen cero en nuestro cuerpo. Si agrega margen cero en su cuerpo, entonces se eliminará la barra de desplazamiento. Margen cero. Ahora vamos a guardar y echar un vistazo en nuestro navegador. Ahora como puedes ver, nuestra barra de desplazamiento ha sido eliminada de este proyecto. Por qué agregamos margen cero en este proyecto, agregamos margen cero porque por defecto CSS le da algún margen a esta página y por ese margen, estábamos obteniendo esa barra de desplazamiento. Ahora cuando eliminamos ese margen, por defecto margen, no hay barra de desplazamiento. Ahora tenemos que añadir algo de Hefe supongo. Hay algún efecto de hover en este icono. Y no hay efecto de cómo Para agregar Su efecto, tengo que seleccionar este botón. Y dentro de este botón, estoy agregando efecto Ho así que por eso estoy seleccionando botón. Y luego para agregar efecto H, simplemente escriba dos puntos y luego flote Entonces, ¿qué quieres hacer cuando pasemos el cursor sobre ese botón, queremos cambiar el color de fondo Así que solo copia este color de fondo y hazlo un poco más claro. Control C y Control V. Escribiré el código hexadecimal de este color en sí. El código hexadecimal de este color será tres dobles 59, tres, cinco, doble nueve. Ahora echemos un vistazo en nuestro rowser. Ahora bien, si coloco el cursor sobre este icono, hay un efecto hover y vamos en nuestro proyecto final, si flojo, hay un radio de borde significa que los bordes Entonces, para hacer estos bordes redondeados, solo puedes agregar radio de borde dentro de este botón. Entonces solo agrega radio de borde. Y el radio del borde será de cuatro píxeles. Así que ahora vamos a guardar y echemos un vistazo en nuestro navegador. Ahora bien, si sobre esto, fondo tiene algunas esquinas redondeadas, igual que nuestro proyecto final. Bien, entonces este fue nuestro proyecto final, y este es nuestro proyecto actual en el que estamos trabajando. Entonces ahora vamos a comprobarlo. Entonces esto también tiene radio de borde en este color de fondo, y este también tiene radio de borde en este color de fondo. Esto es para este video. Ahora agreguemos JavaScript en este 5. Javascript: Entonces ahora vamos a escribir código JavaScript para este proyecto. Entonces, ¿por qué estamos escribiendo código JavaScript? Estamos escribiendo código JavaScript porque si hago clic en este botón, no pasará nada. Significa que este texto que está escrito dentro de este campo de entrada no será copiado. Para agregar esta funcionalidad, ¿qué funcionalidad? Cuando hago clic en este botón, quiero copiar el texto que está escrito dentro del campo de entrada. Para agregar esta funcionalidad, voy a escribir código JavaScript. Entonces ahora vamos a aprender a agregar este tipo de funcionalidad usando JavaScript. Abriré mi codador y abriré mi archivo JavaScript. Dentro de este archivo JavaScript, voy a crear una función. La función y el nombre de esta función serán texto de copia. Y ahora lo que queremos copiar, queremos copiar el valor del campo de entrada significa ¿cuál es el valor del campo de entrada? Lo que escribamos dentro este campo de entrada será el valor. Entonces para copiar el texto que se escribe dentro del campo de entrada, tenemos que seleccionar este campo de entrada para seleccionar el campo de entrada, voy a crear una variable y el nombre de la variable será entrada. Y para seleccionar esto usaré el selector de consulta de punto de documento, el selector de consulta de punto y la etiqueta onm. ¿Cuál es el nombre tecnológico? El tegame es input, type input. Ahora para copiar el texto que está escrito dentro del archivo de entrada, obtenemos un método. El nombre del método es navigator dot clipBortText. Simplemente escriba navegador portapapeles de punto. Texto punteado. Este es el nombre del método y ahora crea estos corchetes y dentro de este corchete, tienes que definir lo que quieres copiar. Lo que queremos que este método copie, queremos que este método copie el valor de entrada. Cuál es el texto que vamos a escribir dentro del campo de entrada es el valor. Entonces queremos que este método copie el valor de entrada. Escriba input mientras estamos escribiendo input, estamos escribiendo input porque porque el nombre de la variable donde seleccionamos input ten es input. Si el nombre de la variable era otra cosa, estaremos escribiendo eso otra cosa aquí. Y ahora lo que queremos seleccionar, queremos seleccionar el valor de este campo de entrada. Así que solo escriba el valor de punto de entrada. Y ahora este método seleccionará el valor de este campo de entrada. Ahora tenemos que definir cuándo queremos llamar a esta función. Queremos llamar a esta función cuando hagamos clic en este botón. Así que vamos a seleccionar este botón en este JavaScript. Para seleccionar voy a crear una variable, el nombre de la variable será Btn luego para seleccionar Voy a escribir documento punto selector de consulta, entonces documento punto selector de consulta, y lo que queremos seleccionar, queremos seleccionar botón tech, así que simplemente escriba el nombre de la etiqueta, el nombre la etiqueta es botón Y ahora lo que queremos hacer, queremos llamar a esta función cuando hacemos clic en este botón. Entonces para hacer eso, hay que agregar incluso oyente en esta tecnología de botón Así que solo selecciona esta variable y luego simplemente typebtnt agregar incluso Y entonces qué evento escuchará este botón el evento que este botón escuchará es evento click, significa que queremos llamar a una función cuando hacemos clic en este botón. Así que simplemente escriba click y luego el nombre de la función a la que desea llamar cuando se haga clic en este botón El nombre de la función que queremos llamar cuando se haga clic en este botón es esta función de copiar texto Así que solo copia esto y pegarlo aquí. Ahora vamos a guardar y vamos a echar un vistazo en nuestro navegador, así que voy a guardar esto también esto y todos los archivos que voy a guardar y ahora vamos a echar un vistazo en nuestro navegador. Este es el proyecto significa que este fue el proyecto final, y este es el proyecto en el que estamos trabajando ahora. Entonces voy a escribir algún texto aquí. Entonces lo que sea que pueda escribir, y voy a hacer clic en este botón, o voy a hacer clic en este icono, y voy a quitar esto y lo voy a pegar aquí, simplemente haga clic derecho y haga clic en este pegar. Ahora puedes ver que se trata de texto escrito en copia. Volveré a hacer algo y volveré a hacer clic en este botón. Y luego voy a quitar esto y voy a hacer clic en Control V. Esto no está funcionando. ¿Por qué esto no está funcionando? Vamos a comprobarlo. El error fue, hemos escrito mal este método . ¿Qué hemos escrito mal? Deberíamos escribir tablero navegador punto R texto, escribir texto también. Este es el nombre del método. Ahora si guardamos y abrimos nuestro navegador y comprobamos, voy a hacer clic en esto y lo pegaré Control V. Ahora está funcionando. Voy a escribir otra cosa y hacer clic en esto y voy a quitar esto y otra vez, pegarlo. Ahora está funcionando. Ahora voy a escribir otra vez algo así voy a escribir y voy a hacer clic en este botón y ahora voy a quitar esto y voy a dar clic derecho y luego dar clic en este botón Pegar. Ahora como pueden ver, esto está funcionando y esto es todo para este video para esta clase, hemos creado esta función de copia a texto, y espero que les guste esta clase.