Proyecto JavaScript: crea una aplicación de búsqueda de Gif

1. INTRODUCCIÓN: Todos en esta clase, vamos a construir la búsqueda GF usando JavaScript. Así es como va a quedar nuestra búsqueda JF. En esta A se puede buscar cualquier tipo de JF. Quiero buscar JF relacionado con la risa, así que voy a escribir aquí riendo Voy a quitar este HP y escribir riendo aquí. Y haz clic en este botón de búsqueda. Como pueden ver, nos pusimos riéndonos relacionados con GFS. Ahora quiero buscar Cocina relacionada GF. Voy a escribir aquí Cocinar CWKING Cooking y haz clic en este botón de búsqueda Después me pondré GFS relacionado con la cocina. Ahora quiero buscar para correr JF, así que voy a escribir corriendo aquí y dar clic en este botón de búsqueda Entonces me pondré a correr GF relacionado. Aprendamos a construir este tipo de búsqueda GF usando JavaScript de la siguiente clase 2. Configuración: Este video, vamos a hacer setup para nuestro proyecto. Para escribir código, voy a usar Visual Studio Code Editor. Si no tienes código de Visual Studio iter, solo puedes instalarlo. Para instalar, solo puedes visitar Google y buscar código Vs y hacer clic en este primer enlace o abrir este primer sitio web. Si tienes Windows, puedes hacer clic en este botón de descarga para Windows y si tienes, obtendrás la descarga para el botón Hacer aquí. Después de descargar, vamos a crear alguna carpeta. Aquí he creado una carpeta. El nombre de la carpeta es F generator. También puedes crear una carpeta. El nombre de la carpeta puede ser cualquier cosa. Pero escribí generador JF aquí dentro de esta carpeta, hay tres archivos El primer archivo es el índice de punto HTML. Tu nombre de archivo puede ser cualquier cosa, pero las extensiones serían H punto js y luego Css Sólo tienes que crear estos tres archivos índice html script dot js y estilo CSS. Las llamas pueden ser cualquier cosa, pero las extensiones serían HTML CSS, y JavaScript. Y abre este índice con archivo HTML. He abierto este índice con archivo HTML, y ahora aquí vamos a crear HTML boilerplate Para escribir HTML Bilerbd tenemos que escribir mucho código. Pero si estás usando código de Visual Studio, no tienes que escribir mucho código. Solo puedes usar un truco o un atajo. El acceso directo es solo escribir signo de exclamación y hacer clic en Entrar Dentro de este HTML Voilerb podemos escribir cualquier código HTML. En primer lugar, vincularé este CSS con nuestro HTML. Para vincular CSS con nuestro Html, usaré Link tech, así que escribiré Link aquí y haré clic en este Link CSS, y el Hf debería ser el nombre del archivo Nuestro nombre de archivo tiene estilo CSS, y dentro de este HRF, hemos escrito el estilo He cometido algunos errores. Voy a teclear Control jet y se arreglará. Así que ahora conectemos nuestro script Java con nuestro HTT conectemos JavaScript con cada tamil, solo ve dentro de este body tech y dentro de este body tech, tienes que crear un Scripte así que voy a escribir Y en cuanto escribí SC, recibí algunas sugerencias y de esta sugerencia, tengo que hacer clic en Script SRC Dentro de este SRC, escribiré mi película de JavaScript. Mi película de JavaScript es script dot js, así que escribiré aquí script dot js. Script punto js. Vamos a crear algo de espacio aquí. Eso es. Hemos hecho nuestra configuración correctamente, y a partir del siguiente video, comencemos a escribir nuestro código para este generador JF 3. creación de la interfaz de usuario: Este video, vamos a escribir código TML para nuestro proyecto Para escribir código extremo, voy a entrar dentro de este body tech y dentro de este cuerpo te, voy a crear un contenedor DIF Para crear dif contenedor, simplemente escribiré D y luego escribiré punto y escribiré contenedor y luego haré clic en Entrar. El contenedor DV está listo. Dentro de este Die voy a crear uno más Diftech para entrada y botón Voy a escribir Diffe DIV Div el nombre de clase de este div será contenedor de entrada Voy a escribir clase aquí, clase Claws y el nombre de la clase será contenedor de entrada, IN Poner contenedor de tablero de entrada, y contenedor TI NR Y vamos a crear una tecnología de entrada. Para crear una tecnología de entrada, escribiré input y el tipo de esta entrada será texto y luego le daré un ID a esta entrada y el ID será entrada de búsqueda. Y necesitamos un botón debajo de esta tecnología de entrada. Voy a ir por debajo de esta etiqueta de entrada y crear una etiqueta de botón. En el nombre de este botón se buscará. Debería estar en letra cábala, voy a escribir como en mayúsculas, vamos a comprobar lo que nos falta para verificar Voy a abrir nuestro GF searchab se puede ver, en primer lugar, necesitamos una H una tecnología donde se escribe F searchab, luego necesitamos un campo de entrada, luego necesitamos un botón voy a escribir como en mayúsculas, vamos a comprobar lo que nos falta para verificar Voy a abrir nuestro GF searchab se puede ver, en primer lugar, necesitamos una H una tecnología donde se escribe F searchab, luego necesitamos un campo de entrada, luego necesitamos un botón de búsqueda. Déjame escribir esta búsqueda F encima de este campo de entrada. Voy a ir por encima de este DFTech y por debajo de este continuo DF, voy a crear un H uno tech y dentro de este H one tech, voy a escribir GIF Ahora guardemos esto y echemos un vistazo en nuestro navegador, cómo se ve nuestro sitio web ahora. Entonces, como puedes ver, nuestra búsqueda F se ve así ahora. Vamos a agregar un poco de estilo en este F SearchF y hacerlo así Para agregar estilo, agregaremos este estilo en otro video o en el siguiente video, vamos a agregar estilo en este F SearchF Terminemos primero nuestra mesa H. ¿Qué hay que terminar? Lo último que tenemos que hacer es crear una tecnología Diff para que nuestros GIF signifiquen que nuestros GIF signifiquen para esto que tenemos que crear una tecnología Diff, así que voy a crear una Diffte aquí Debajo de esta entrada anternat, voy a crear una tecnología Diff, y la clase de esta tecnología diff será, déjame escribir clase Déjame escribir divido comió clase. Escribamos IDN, el ID de este dv GIF. Con esta ola escribimos correctamente nuestro código HTML. Ahora agreguemos algo de CSS en este proyecto. 4. estilismo de la UI: En este video, vamos a agregar estilo a nuestro proyecto. Para agregar estilo, voy a abrir el archivo CSS de estilo y dentro de este archivo CSS de estilo, puedo escribir código CSS para nuestro proyecto. Entonces antes que nada, quiero agregar estilo en este contender Dip. Voy a seleccionar este div de contenido en CSS para seleccionar este contenido, puedo copiar esta clase contenedora y en este estilo archivo CSS, solo voy a escribir punto por qué estoy escribiendo punto Porque continuar clase. Si el contenedor era de identificación, entonces estaría escribiendo tiene. Déjame escribir punto porque es clase y haz clic en Cuota de control. Ahora se selecciona nuestro dif contenerlo, ahora podemos agregar estilo a nuestro continente Df. Vamos a comprobar qué tipo de estilo queremos agregar. En este dif continuo queremos agregar esto es revelador significa que queremos traer nuestro centro de defensa continente Para traer este continente Centro Divino, usaré Flexbox. La primera propiedad mientras se usa Flexbox es display flex. Voy a escribir display, y luego flex FLA X flex. Ahora voy a escribir flex dirige y columna, flex dirige y columna y luego justificaré centro de contenido. Justificar contenido y justificar contenido con V centro. Ahora vamos a guardar y echar un vistazo en nuestro rowser. Guardé este archivo y ahora voy a abrir este navegador y volveré a cargar este Como puede ver no hay cambios. Veamos por qué no hay cambios. No hay cambios porque he escrito aquí estilos, pero mi nombre de archivo es estilo. Déjame eliminar esta s y hacer clic en este botón de guardar y luego echemos un vistazo en nuestro navegador. Ahora vamos a recargarlo. Ahora no está funcionando porque tengo que guardar este archivo CSS también. Controle S y luego recargue. Las direcciones flex no serían columnas, así que voy a escribir una fila aquí, quitar esta columna y escribir una fila. Guardar. Ahora como puedes ver, nuestro JF busca en el centro, pero tenemos que agregar más estilos a esto Lo que voy a hacer ahora es ahora voy a cambiar esta dirección a columna en lugar de justificar el centro de contenido, voy a escribir líneas de artículos centro. Líneas al centro. Ahora echemos un vistazo Controles y como puedes ver, ahora nuestra búsqueda F está correctamente alineada en el centro. Ahora vamos a dejar estilo en este campo de entrada y este botón de búsqueda. Para campo de entrada y botón de búsqueda, tengo que seleccionar este contenedor de entrada de clase. Seleccionemos este Control C. Y luego punto Control V. Ahora vamos a alinear esta cosa también en el centro. Este botón de búsqueda está en el lado derecho y el campo de entrada está en el lado izquierdo, pero queremos este botón de búsqueda debajo de este campo de entrada así. Para ello, tenemos que seleccionar este contenedor de entrada y ya hemos seleccionado este contenedor de entrada. Ahora tenemos que centrar esto correctamente. Para centrar esto correctamente, voy a Tiegin display flex aquí. Y flex axon será columna y el ítem Aline será centro Control C y Control V. Ahora vamos a guardar y echar un vistazo en nuestro navegador. Puedes ver ahora el campo de entrada es Ab y el botón está abajo, como el de aquí. Ahora agreguemos un poco de estilo en esta tecnología de botones. Para agregar algo de stelling en este botón Teck, tengo que seleccionar este Como solo tenemos un botón en nuestro proyecto, así puedo seleccionar directamente este botón tech para seleccionar este botón Tek voy a escribir botón aquí y luego agregar algunas ventas en este botón. Lo primero será margin top porque queremos algo de margen desde arriba. Como puede ver, no hay margen desde arriba o no hay margen entre este campo de entrada y este botón. Para crear algún margen entre estos dos, tenemos que escribir margin top. Escribiré margen superior. Serán diez píxeles, y luego tuve algo de relleno en este botón, padding padding será top e bottom ten pixel e left and right, 20 pixel. Diez píxeles superior e inferior, luego espacio, luego para izquierda y derecha, escribiré 20 píxeles. Y luego para hacer que nuestro botón sea redondo, agregaré un radio de borde en este botón, radio de borde, y para que sea correctamente redondeado, tengo que escribir 50 píxeles. Correctamente redondo significa tanto alrededor, como pueden ver, quiero hacer este botón tanto redondo. Para esto, escribiré radio de borde de 50 píxeles. Ahora acabo de escribir border, así que escribiré border radius Entonces ahora nuestro botón será redondo. Echemos un vistazo en nuestro navegador. Como pueden ver, nuestro botón ya es redondo. Ahora voy a aumentar el tamaño de fuente de la búsqueda. Después agregaré algo de color en este botón, y cambiaré el color de este texto de búsqueda. Significa que voy a cambiar el color de esta fuente. Entonces para aumentar el tamaño de fuente el tamaño fuente aquí y el tamaño de fuente será de 24 píxeles, luego para agregar color Ile tipo color de fondo, y el color de fondo será, voy a escribir el acto como 05a4 siete A. Entonces ahora voy a hacer esta fuente color blanco Para hacer esta fuente color blanco, tengo que escribir color y simplemente escribir como FFF Hará que nuestro color sea blanco y luego agregaré algún puntero al cursor. Siempre que coloquemos por encima de este botón, quiero eliminar este símbolo del cursor y traer un símbolo de mano Para traer un símbolo de mano, escribiré cursor, cursor CR SOR, y luego cursor será puntero. Así que vamos a guardar y echar un vistazo en nuestro navegador. Ahora cada vez que voy a poner el cursor sobre este botón, mi cursor se convertirá en puntero Echar de menos este símbolo de mano. Agreguemos algún efecto hover en este botón. Siempre que pase el cursor sobre este botón, quiero cambiar un poco el color de este botón Significa que quiero hacer este color de fondo un poco más oscuro. Para eso, seleccionaré este botón tech y para agregar efecto hover, tengo que escribir dos puntos y luego escribir hover, HOV hover Dentro de este corchete, escribiré color de fondo, y luego este color de fondo será un poco más oscuro. Control V y seleccionaré algún color de fondo oscuro. Baja un poco este cursor, entonces nuestro botón estará un poco más oscuro. Guardemos esto y echemos un vistazo en el navegador. Ahora como puedes ver cómo Su efecto está funcionando correctamente. Ahora quiero agregar estilo en este campo de entrada. Para agregar estilo en este campo de entrada, seleccionaré este campo de entrada para seleccionar el campo de entrada. Simplemente escribiré input porque solo tenemos una etiqueta de entrada en cada tabla. Es por eso que estoy seleccionando directamente este campo de entrada con etiqueta de entrada, no con ninguna clase o ID específico. Entonces, antes que nada, quiero aumentar el tamaño de este campo de entrada. Para aumentar el tamaño de este campo de entrada, tengo que escribir padding y el padding de arriba e abajo será de diez píxeles e izquierda y derecha serán de 20 píxeles, 20 px. Eso guarda y tiene un navegador de inicio de sesión. Ahora puedes ver nuestra entrada ahora nuestro campo de entrada es un poco más grande. Agreguemos un poco más de estilo en este campo de entrada. Quiero hacer este campo de entrada redondo para hacer este radio de borde de tipo Ile redondo, y luego el radio de borde será de 15 píxeles. Y el tamaño de fuente valor 24 píxeles. Entonces agreguemos algún borde en esta película de entrada para agregar border Il type border y dentro de este border, escribiré un pixel solid, y luego algún nombre de color. Un píxel, sólido. Y el nombre del color will tiene tres medios C tiene CCC. Ahora vamos a guardar pasar por alto en nuestro navegador. Como puedes ver ahora nuestro campo de entrada se ve así. Ahora voy a aumentar el tamaño de fuente de este H one te para aumentar el tamaño de fuente de este h1t, tengo que escribir H uno aquí, significa que seleccionaré este H one tech N, solo escribo tamaño de fuente F fuente, y el tamaño de fuente será de alrededor de 24 píxeles Vamos a guardar un pase por alto en nuestro navegador. Ahora mi tamaño de fuente es más pequeño para que sea más grande Aletype mayor tamaño de fuente como 35 píxeles El tamaño sería más como 45 píxeles, ahora echemos un vistazo en nuestro navegador. Ahora nuestro tamaño de fuente es adecuado. Ahora vamos a quitar este borde de este botón para eliminar este borde de este botón, voy a escribir border monja en este botón Entraré dentro de este botón y luego escribiré border, y luego border será ninguno. Vamos a guardar y busco en Navegador. Nuestro borde de color negro se elimina de este botón. Ahora nuestro estilo se ve igual. Esto es estilo en este estilo es lo mismo. Ahora escribamos código JavaScript para nuestro proyecto.