Proyecto en JavaScript: crea una aplicación para contar chistes

1. INTRODUCCIÓN: Todos en esta clase, vamos a construir una aplicación de cajero de bromas usando JavoScript Así va a quedar nuestra aplicación Broma. Para generar un nuevo chiste, tienes que dar click en este. Dime un botón de broma. Voy a hacer clic en esto me un botón de broma y aquí se generará una nueva broma. Si quieres generar otra broma nueva, entonces tienes que hacer clic en este botón una y otra vez, se generará una nueva broma. Si quieres generar otra nueva broma, entonces otra vez, tienes que hacer clic en este botón, y nuevamente, se generará otra nueva broma. Voy a hacer clic en este botón correctamente, y como pueden ver, tenemos otra broma nueva aquí. Si quieres aprender a construir este tipo de aplicaciones usando JavoScript, puedes unirte a esta clase y a partir del siguiente video, vamos a construir esta aplicación de broma. Nos vemos dentro de la clase. 2. Configuración: Este video, vamos a montar para nuestro proyecto. Escribir código, vamos a usar el codador de Visual Studio. Si no tienes instalado el codator de Visual Studio en tu computadora, entonces puedes instalarlo desde Google Así que solo abre tu navegador y busca VSCode, luego abre este Y si tienes Windows SPC, verás el botón de descarga para Windows, y si tienes Mac, verás el botón de descarga para Mac. Entonces haz clic en este botón y descarga este codador de Visual Studio después de la descarga, verás este tipo de interfaz, y ahora tienes que instalar alguna extensión Entonces para instalar la extensión, hay que hacer clic en este botón Botón de extensiones, y aquí hay que buscar Live Server. Y hay que instalar este servidor de extensión en vivo, y después de instalar esta extensión, haga clic en este botón Explorar y crear una carpeta er. Ya he creado una carpeta aquí. El nombre de la carpeta es cajero de chistes. Así que también hay que crear esta carpeta y crear algunos archivos dentro de esta carpeta. Entonces el nombre del primer archivo será punto índice. Entonces segundo nombre de archivo será estilo CSS. Entonces el tercer nombre de archivo será adt Js. Adt Js. nombre de archivo puede ser cualquier cosa, pero las extensiones deben ser puntos punto html y punto css Al igual que en lugar de ags, podrías escribir JavaScript dot js o podrías escribir script dot js, pero la extensión debería ser puntos al final del nombre del archivo Ahora abre este archivo HTML índice y dentro de este archivo Index tal, voy a crear HTML repetitivo Si sabes escribir código EML, ya sabes que para escribir código HTML, creamos uno repetitivo HTML y dentro de ese repetitivo HTML, podemos Para crear HTML repetitivo, si estás usando visual studio Btor, obtenemos un El st corte es haga clic en el signo de exclamación y haga clic en este Entrar Entonces este correo electrónico automáticamente escribirá este repetitivo para nosotros Dentro de este Bite, podemos escribir código TML. Escribamos algún código como cada uno y luego escribiré Joke Teller Y haga clic en el botón Guardar para guardar puede hacer clic Control pluss luego haga clic derecho sobre el mouse, luego haga clic en Abrir con Live Server Y ahora como puedes ver, nuestro código STmal está funcionando. Esta fue la configuración de nuestro proyecto ahora escribamos código STML del siguiente video 3. escribir HTML: En este video, escribiremos código extremo para nuestra aplicación de cajero de bromas Para escribir código extremo, eliminaré este H one te aquí y luego crearé uno Deftek así escribiré Y entonces el nombre de clase de esta tecnología Def será contenedor. Entonces voy a escribir clase. Y entonces nombre de la clase será contenedor de broma. Entonces bromea se dobla luego contenedor. Después dentro de este gif, escribiremos nuestro código HTML. Entonces, para escribir el código H tal, tomaré la ayuda de nuestra vieja aplicación de cajero de bromas significa esta aplicación de cajero de broma real Entonces, antes que nada, necesitamos un cajero de chistes cada uno dentro de este H uno escribió Joke Teller aquí Entonces necesitamos tecnología de un botón. Entonces necesitamos una toma de párrafo para mostrar nuestro chiste. Entonces voy a crear uno H uno decir aquí, H uno, y dentro de este H uno, voy a escribir cajero de broma Después después de cada uno, voy a crear una toma de botón, así voy a escribir botón. Y dentro de este botón, voy a escribir lo que está escrito. Entonces voy a escribir dime un chiste. Entonces dime un chiste aquí. Dime un chiste. Entonces después de este botón te, voy a crear una toma de párrafo para mostrar nuestro chiste. Voy a escribir el párrafo aquí. Significa que voy a crear un párrafo tech y luego voy a dar un nombre de clase al párrafo tech o voy a dar ID al párrafo tech. El ID será texto de broma, texto Ds. Entonces le daré algunas identificaciones a este botón h1n. H one tech no necesita ninguna clase o identificación. Dejaré ID a esta etiqueta de botón Escribiré ID y luego el ID será BTN Ahora voy a guardar esto y ver esto en nuestro navegador. Para ver esto en nuestro rowser podemos dar click en abrir con Live server Así es como se ve nuestra aplicación ahora. Voy a escribir un párrafo aquí para escribir párrafo, voy a ir dentro de este párrafo tech y escribir Lim. Y luego si quiero 30 texto, entonces puedo escribir Lom 30 y luego dar clic en Entrar Automáticamente obtendré 30 mensajes de texto aquí. Voy a hacer clic en Alt y jet. Entonces después de hacer clic en Al Jet, nuestro representante de palabras estará habilitado. Escribir Lom 30 fue un truco, que te enseñé. Si quieres escribir más textos como quieres escribir 60 textos, entonces tienes que escribir LEM y luego dar clic en 60. Entonces obtendremos 60 letras de texto fum bajo así. Ahora tenemos 60 cartas. Ahora escribamos 20 cartas. Entonces, para escribir 20, escribiré LEM 20, y después obtendré 20 letras de texto Lowm No letras, conseguiremos 20 palabras. Como uno, dos, tres, cuatro. Si quieres contar, puedes contar son 20 palabras. Vamos a guardarlo y verlo en nuestro navegador. Para que veas que tenemos nuestro párrafo, tenemos nuestra etiqueta de botón y dentro esta etiqueta de botón está escrita dime una broma. Y luego conseguimos un H one tech donde está escrito Joke Teller Ahora vamos a comprobar cómo se ve nuestro viejo epi significa qué tan real se ve el eps Entonces como pueden ver, dentro de este botón, hemos escrito, dime un chiste y luego está un signo de exclamación Pero aquí, no hay signo de exclamación. Escribiré signo de exclamación aquí dentro de esta etiqueta de botón, y después de esta broma, escribiré Y guárdalo y véalo en navegador. Entonces ahora, como pueden ver, nuestro botón se ve así. No luciendo así, agregaremos CSS en el siguiente video, entonces nuestro botón se verá así. No solo botón. Nuestra aplicación se verá así después de agregar CSS en esta aplicación. Entonces, en el siguiente video, agreguemos CSS a esta aplicación de cajero de bromas 4. Estilizar la aplicación: En este video, vamos a escribir código CSS para nuestro proyecto. Déjame revisar primero lo que necesitamos escribir. Voy a abrir esta aplicación de broma tenor. Lo primero, lo que voy a hacer es agregar un color de fondo, y luego cambiaré esta familia de fuentes. Hagámoslo. Para agregar un color de fondo, seleccionaré body tech y dentro de esta body tech, agregaré color de fondo, escribiré body y dentro de esta body tech, escribiré color de fondo. Y el color de fondo WV tiene 28 39d7. Voy a escribir tiene 28 39d7. Después voy a cambiar la familia de fuentes para cambiar la familia de fuentes, voy a escribir familia de fuentes y la familia de fuentes será sensor ARL Entonces esto es Aerial Sensoridespués de esto, voy a agregar Margin zero padding zero para agregar Margin zero, antes de agregar margin y padding, te mostraré cómo se ve nuestro sitio web ahora Voy a guardar esto y abrir nuestro navegador y aquí se puede ver que no estamos recibiendo ningún cambio, así que voy a recargar esto tengo el problema. ¿Cuál es el problema? El problema es que no hemos vinculado nuestro H t al CSS. Para vincular esta tabla H a CSS, hay que escribir una etiqueta. El domar es link, así que voy a escribir link aquí y luego dar click en este link columna CSS. Entonces automáticamente su archivo CSS vinculará con la tabla H. Pero solo si tu nombre de archivo CSS es Styleot CSS, porque style CSS es por defecto Si tu nombre de archivo es diferente, entonces escribe el nombre de archivo diferente. Si tu nombre de archivo es diferente, entonces escribe tu nombre de archivo aquí y tu CSS se vinculará a Entonces como mi nombre final es estilo CSS. Escribí dentro de este CSS estilo HRF, y mi estilo CSS ahora está vinculado con este Así que vamos a guardar esto y guardar el CSS estiloide, luego vamos a verlo en nuestro navegador Entonces ahora, como pueden ver, estamos recibiendo nuestra llamada de antecedentes. Ahora lo que quiero hacer, ahora quiero agregar algo de margen, algo de relleno y luego traeré este contenido al centro. Para poner este contenido al centro, tengo que usar Flexbox. Entonces vamos a hacer esta cosa. Lo primero que voy a hacer es que voy a pading cero y margen cero, escribo margen y el margen será cero ¿Por qué estoy escribiendo pading zero y margin zero? Estoy escribiendo esto porque en CSS, obtenemos Bdfault margin y Bdfault padding Entonces para eliminar ese margen de Bdfault y pedding, estoy escribiendo margen cero y relleno cero Después de escribir el margen cero y el relleno cero, nuestro margen predeterminado Bi y el relleno se eliminarán y se convertirán en cero. Ahora llevemos nuestro contenido al centro para llevar nuestro contenido al centro, tenemos que escribir Flexbox Para escribir flexbox, lo primero que tenemos que hacer es escribir display flex para y luego escribir flex y luego justificar content center, Alignm center, y luego Mint será 100 VH escribiré Justify content y luego Entonces escribiré Alignm también será centro, después escribiré altura media, altura media y altura media serán 100 Vg Cien vistas significa 100 vistas a la altura de la olla. Guardemos esto y echemos un vistazo en nuestro rowser cómo se ve Ahora como puedes ver, nuestro contenido está en el centro, pero no está correctamente centrado, significa que tenemos que alinear nuestro texto al centro ahora. Para alinear nuestro texto al centro, lo haremos en diferentes pasos. Ahora cambiemos el color del texto. Para cambiar el color del texto, voy a añadir color. Voy a escribir color y el color será como tres. Tiene 33. Ahora voy a guardar esto y ahora seleccionaré este contenedor de broma de clase. Voy a copiar esto y dentro de este css escribiré punto, luego haga clic en Control V y crearé estos corchetes y dentro de este wack rizado escribiré texto align center porque queremos alinear nuestro texto al centro, escribir texto align, y text align será centro Vamos a guardarlo y evolucionar en nuestro navegador. Ahora como puedes ver, nuestro texto está alineado al centro. Ahora voy a cambiar el color de fondo de esta cosa porque nuestro color de fondo era blanco. Como puedes ver aquí, nuestro color de fondo es el blanco, así que voy a escribir el color de fondo, blanco aquí significa dentro de este contenedor, color de fondo y el color de fondo serán blancos. Así que vamos a guardar esto y echar un vistazo en nuestro navegador. Entonces como puedes ver, ahora nuestro color de fondo es el blanco. Ahora lo que voy a hacer. Ahora voy a añadir un poco de relleno aquí y después voy a añadir radio boder para hacer estas esquinas alrededor Y luego podemos agregar alguna caja do a este contenedor. Después agregaré algo de ancho a este contenedor. Entonces para hacer esto, voy a entrar este contenedor de broma cajero y dentro de este contenedor, voy a escribir Relleno, el relleno será de dos REM, por lo que el relleno, dos REM y luego el radio del borde. Entonces el radio del borde, y luego el radio del borde será de diez píxeles. Después agrego alguna caja para agregar cuadro a Voy a escribir cuadro SDO, y luego dentro de esta caja para, tengo que escribir cero y luego espacio luego cuatro píxeles, luego espacio luego ocho píxeles, y luego darle un color a esta caja a Para darle un color, escribiré RGBA. Y entonces rojo, verde, azul el valor será cero, cero, cero, cero. Voy a quitar este rojo y escribir cero aquí, luego aquí también cero y aquí también cero. Significa en este azul, voy a quitar este azul y escribir cero. Y el Alfa será 0.1, entonces 0.1. Y agreguemos el ancho máximo aquí, así que el ancho máximo y el ancho máximo serán de 400 píxeles. Guardemos esto y echemos un vistazo en nuestro navegador. Este es nuestro proyecto. Ahora, como puede ver, nuestra aplicación de cajero de chistes se ve similar a esta Ahora tenemos que aumentar el tamaño de fuente de este cajero de chistes, entonces tenemos que agregar un poco de estilo a esta tecnología de botones Hagámoslo. Ahora voy a seleccionar este H one tech. Dentro de este H one tech, voy a escribir tamaño de fuente para aumentar el tamaño de fuente Estoy escribiendo tamaño de fuente y el tamaño de fuente será de dos RM. Y luego voy a teclear margen abajo aquí. ¿Por qué estoy escribiendo margin bottom o por qué le estoy dando margin bottom a este H one te? Le estoy dando margen inferior a este H one tech porque queremos un poco de espacio entre este cajero de broma se pierda este H uno y luego este botón tech Por eso estoy dando un poco de fondo de margen. Por lo que el fondo del margen será de un borde. Entonces agreguemos algo de color a este texto. Escribir color y luego el valor de color tendrá 242424. Escribir tiene 242424. Ahora agreguemos un poco de estilo a nuestra tacha de botones. Para agregar un poco de estilo a nuestra tachueta de botones, seleccionaré esta tachueta de botón, escribiré y luego le daré este soporte de color. Se selecciona nuestra tacha de botones. Ahora voy a agregar algo de color de fondo a este botón para agregar color de fondo, voy a escribir color de fondo. El color de fondo será V tiene 3f18 CC, por lo que tiene uno no 31, 3f18 doble Z. luego hacer que el color de nuestro botón sea blanco. luego hacer que el color Significa que el color del texto de nuestro botón será blanco. Así que voy a escribir blanco aquí, y después voy añadir un poco de relleno a este botón para agregar relleno, voy a escribir relleno. Entonces la parte superior e inferior serán 0.7 llanta, entonces 0.7 llanta. Izquierda y derecha serán 1.5 llantas, así que 1.5 llanta. Digamos que cuando mire en nuestro perdedor cómo se ve nuestro botón Entonces así es como se ve nuestro botón ahora. Entonces ahora tenemos que quitar este borde de este botón, luego agregar algún radio de borde para hacer que este botón lo redondee un poco. Entonces queremos convertir este cursor en puntero cuando pasemos el cursor sobre este botón Entonces hagámoslo. Entonces, lo primero que voy a hacer es quitar la frontera. Entonces para sacar la botella, vamos a escribir frontera, ninguna. Entonces para agregar algún radio de borde, escribiré radio de borde, y el radio de borde será de cinco píxeles. Y vamos a aumentar el tamaño de la fuente para aumentar el tamaño del teléfono, voy a escribir el tamaño del teléfono. El tamaño de la fuente será de un borde. Y luego para convertir el cursor en puntero, tenemos que escribir cursor. El nombre de la propiedad es cursor y nuestro cursor será puntero cada vez que pasemos el cursor sobre él, así que escribiré puntero Así que vamos a guardar esto y echar un vistazo en nuestro navegador. Entonces así es como se ve nuestro botón ahora, y así es como se ve antes. Así que vamos a hacer zoom un poco a esto. Entonces ahora nuestra aplicación se ve así y nuestra aplicación real se ve así. Entonces no hay diferencia. Voy a quitar esto. Voy a cambiar este chiste. Entonces esta es nuestra verdadera aplicación de broma, y esta es nuestra aplicación actual de Joker Ahora agreguemos un poco de estilo a este párrafo t y antes de agregar un poco de estilo, agregaré este efecto hover a este botón Para agregar efecto hover, voy a escribir. Voy a seleccionar esta etiqueta de botón y después voy a escribir hover para escribir hover, hay que dar columna y dentro de esta columna, que escribir hover Después agrego algo de transición a este botón a transición, tengo que escribir transición. La transición es para el efecto H, y luego la transición será color de fondo, 0.3 segundos es, voy a escribir color de fondo. Significa que el color de fondo tardará 0.3 segundos en completar este efecto de hora. Escribiré el color de fondo, y el tiempo será de 0.3 segundos. Entonces el efecto será Es. Dentro de este efecto Su, voy a añadir diferente color de fondo , escribir color de fondo, y el color de fondo diferente será un 27136, así que voy a escribir tiene 271 36e Guardemos esto y echemos un vistazo en nuestro navegador y colocaré el cursor sobre esto No esto, esta es nuestra verdadera aplicación Joc. Esta es nuestra aplicación Joc actual, así que colocaré el cursor sobre este botón Entonces como puedes ver, estamos obteniendo este efecto hover en nuestro botón con una transición de segundo es de punto cero Y ahora voy a añadir un poco de estilo a este párrafo tech. Para agregar estilo a este párrafo tech, seleccionaré este párrafo tech, así que p aquí. O tengo puedo escribir esta broma texto ID también o simplemente puedo seleccionar este párrafo. Ahora quiero seleccionar este párrafo usando ID, así que escribiré un, luego haga clic en Control V significa el ID de nuestro párrafo y luego agregaré algo de estilo a esto. Este estilo será de tamaño de fuente uno RM. Entonces el margen superior será de 1.5 ram. La altura de la línea será de 1.5. Y el color tiene cinco. Color significa que el color de nuestra periglap tiene triple cinco. Ahora vamos a guardar esto y echar un vistazo en nuestro navegador. Entonces así es como se ve nuestro texto de párrafo ahora, y así se ve nuestro texto de párrafo original , que es el mismo. Sólo esto tiene un estilo atrevido, que agregaremos esto en JavaScript, pero esto es lo mismo. Señorita estilismo de esta cosa, lío este párrafo es similar a esto. Entonces eso es todo para este video. En el siguiente video, agregaremos JavaScript a esta aplicación Jokell ¿Por qué agregar JavaScript? Queremos agregar JavaScript porque cada vez que hacemos clic en el botón de decirme un chiste, queremos generar una nueva broma aquí. Entonces para generar una nueva broma aquí, tenemos que usar alguna API y para usar APA, tenemos que usar JavaScript. Significa llamar a esa web APA para usar JavoScript. En el siguiente video, escribamos JavaScript para este proyecto. 5. API de recuperación de formularios de datos: En este video, vamos a escribir código JavaScript para nuestra postulación. Para escribir código JavaScript, voy a abrir este archivo JavaScript. El nombre del archivo JavaScript era web dot js, así que abrí este archivo JavaScript. Ahora, lo primero que quiero hacer es seleccionar este botón. Para seleccionar este botón, voy a crear una variable aquí, para crear una variable, tengo que escribir Cs luego el enlace de la variable. El costo será CONST el nombre de la variable puede ser cualquier cosa, pero voy a escribir botón aquí Ahora para seleccionar este botón, tengo que escribir documento Dot get element by ID, BTN ¿Por qué estoy escribiendo documento Dot get element by ID? Porque he dado identificación aquí en este botón. Por eso estoy escribiendo documento punto get elemento por ID. Voy a escribir documento punto obtener elemento por ID. La Dame será, tengo que comprobar la D el nombre D es BTN, así que voy a copiar esta cosa y pegarla aquí Control V. Ahora se selecciona el botón en JavaScript. Ahora, lo que quiero hacer con este botón es cada vez que hacemos clic en este botón, quiero llamar a una función. Para ello, tengo que añadir un Eve Listener en este botón. Para agregar un evistener tengo que escribir esta variable nombre punto agregar incluso Botón punto agregar oyente de eventos. En el que incluso va a escuchar escuchará el evento click. Significa que queremos llamar a una función cada vez que hacemos clic en este botón. Para escuchar el evento click, tengo que dar click aquí. Entonces a qué función queremos llamar cada vez que se haga clic en este botón, queremos llamar a una función con el nombre de Gt Joke Voy a escribir Gad Joe J estará en mayúscula porque aquí estamos usando tripa de camello Carcasa de camello significa en lugar de espacio, escribiremos la segunda primera letra en mayúscula así. Voy a escribir broma ahora. J está en mayúscula y estará en minúsculas normales. Ahora vamos a crear esta función obtener broma. Para crear esta función, voy a escribir función aquí y el nombre de la función será esta broma get. Voy a copiar esto y pegarlo aquí. Y luego crear paréntesis y después de paréntesis, tenemos que dar uno entre corchetes y dentro de este corchete, vamos a escribir código JavaScript. Qué queremos hacer cada vez que hacemos clic en este botón. Siempre que estemos haciendo clic en este botón, llamaremos a esta función y a qué va a hacer esta función, esta función va a conseguir broma para nosotros, cómo conseguir broma. Para conseguir una broma, vamos a usar una APA. Para eso tienes que abrir tu navegador, estoy abriendo mi navegador y busco broma APA. Haga clic en este primer sitio web, SV 43. Haga clic en este sitio web. Y luego desplácese hacia abajo. Entonces conseguirás este secone pruébalo aquí. Ahora puedes seleccionar las categorías de broma que quieras. Si quieres todas las categorías broma, significa programación Misk dark, juegos de palabras, punky y navidad Si quieres todo, entonces puedes hacer clic en cualquiera. Pero si quieres personalizar esta categoría, entonces puedes hacer clic en esta personalizada. Ahora quiero conseguir solo programación y broma navideña. Entonces seleccionaré programación y Navidad. Entonces el lenguaje del chiste será en inglés. Si quieres en otro idioma, puedes seleccionar otro idioma aquí. Queremos en inglés, así que seleccionaré inglés aquí. Entonces puedes poner en la lista negra estos copos si no quieres broma religiosa, puedes seleccionar esto, si no quieres chistes políticos Puedes seleccionar esto el formato de respuesta que queremos es JSON, que por defecto está seleccionado. No queremos XML o YAML o Plaintex. Queremos JSNFMatrsponse. Entonces sólo tiene que copiar esta URL. Si eliges N, entonces la URL será N significa broma barra diagonal N. Si seleccionas Personalizado, entonces será He seleccionado programación en Navidad En URL, se escribirá programación navideña. Voy a copiar esto y luego voy a crear una función fetch aquí Para crear una función fetch, tengo que escribir fetch. Entonces dentro de este corchete o dentro del paréntesis, tengo que pegar mi entrada APA o la URL que hemos copiado así Entonces para Respose vamos a crear uno entonces método, escribir punto luego y escribir respuesta aquí Entonces tenemos que usar la función de flecha aquí. Para la función de flecha, voy a dar igual a entonces mayor que símbolo después de que los corchetes pero carb no es necesario simplemente, pero ahora voy a dar corchetes de curva o puede ser confuso para usted Por eso aquí le doy los corchetes. Lo que quiero devolver, quiero devolver JSNFMatrsponse. Para hacer eso, voy a escribir retorno. En lo que he escrito, voy a devolver esta respuesta en JCNFMat Tengo que escribir respuesta punto JSON. Y ahora voy a crear otro que no sea Mesode para los datos. Entonces voy a escribir, así que puntear entonces. Para que pueda escribir cualquier cosa aquí. Ahora voy a escribir datos de broma. Entonces otra vez, voy a crear función de error para esto tengo que escribir Equest y mayor que símbolo que los corchetes Dentro de este wicket rizado, lo que quiero devolver, quiero devolver los datos Pero no sabemos qué datos vamos a obtener. Entonces para eso, puedo consolar registrar esta respuesta que está obteniendo de esta APA. Entonces voy a escribir consola dot log. Datos de broma. Lo guardaremos y echaremos un vistazo en nuestro navegador. Para ello, tengo que abrir esto en servidor en vivo. Ya está abierto como, así que almacenamos. Vuelva a cargar este espacio y luego haga clic en F 12. Haga clic en este botón dime una broma. Aquí no pasa nada, vamos a ver por qué no pasa nada. 6. Visualización de datos: Entonces el error aquí es que no hemos vinculado nuestro script Java con HTML. Como puedes ver en nuestro código HTML, no hemos vinculado nuestro JavoScript a Entonces vinculo esto para enlazar esto, tengo que escribir script y hacer clic en este script SRC el SRC será el El nombre del archivo es Abdo Js, así que voy a escribir dot js aquí Entonces guarda esto y haz clic en guardar en este Abd Js también y luego abre tu navegador Ahora haz clic en este botón dime un chiste. Y después de hacer clic en este botón dime un chiste, obtendremos nuestro objeto, y dentro de este objeto, hay muchos elementos. Entonces vamos a expandir este objeto. Y dentro de este objeto, obtendremos error de categoría que broma de identificación de bandera. Entonces, lo que queremos mostrar aquí, queremos exhibir broma. Entonces para exhibir broma aquí, tenemos que seleccionar esta broma. Entonces ahora la pregunta es ¿cómo vamos a exhibir aquí esta broma? Entonces para mostrar esta broma aquí, tenemos que escribir broma de datos de broma punto broma dentro de este párrafo t Así que hagámoslo. Entonces para eso voy a entrar en este chiste datos entonces método. Y dentro de este entonces método, ¿ qué queremos hacer? Queremos mostrar esa broma dentro de este párrafo t Así que ahora voy a seleccionar este párrafo tech dentro de este entonces método. Para seleccionar este párrafo tech, tengo que escribir documento punto get elemento por ID. Escribo documento punto obtener elemento por ID, documento punto obtener elemento por ID, y el nombre de identificación es tengo que verificar ID. El nombre D es texto de broma, así que voy a copiar esto y pegarlo aquí. Control V. Dentro de este párrafo tech, queremos guardar estos datos de broma. Para D tenemos que escribir punto HTML interno. Y lo interno será. Tengo que usar este back ticks ahora quiero crear una etiqueta más aquí. El te Name será fuerte, así lo hizo nuestro chiste estará en negrita. Escribiré fuerte aquí FUERTE fuerte. Ahora para mostrar esa broma, tenemos que escribir broma jokedata punto Entonces para lo hice voy a escribir este símbolo de dólar y luego corchetes de curva, luego escribiré broma de punto de datos de broma. Ahora cierra esta tecnología fuerte, para cerrar este te fuerte, escribiré slash y luego fuerte Entonces ahora echemos un vistazo en nuestro navegador, controladores y abra su navegador y haga clic en este botón dime un chiste, entonces puedes ver que estamos recibiendo una broma aquí. Entonces haz clic en esto de nuevo, luego vamos a obtener otra broma aquí, haz clic en esto de nuevo, luego vamos a conseguir otra broma aquí. Ahora tomemos nuestro objeto y dentro de este objeto. Dentro de este objeto, no hay nada más que podamos mostrar o que podamos mostrar en nuestra app. Entonces, ¿ahora qué queremos hacer? Ahora queremos crear un método de caché para el error. Si se produce un error en este punto final de API o algo así al obtener estos datos de la API, si ocurre algún tipo de error, entonces tenemos que ejecutar este método de caché. Voy a crear un método de caché aquí. Dentro de este mensaje de boceto, pasaré error y usaré esta función de error, corchetes y dentro de los corchetes. Lo que voy a escribir o lo que vamos a hacer bien la consola registrar este error. Para que la consola logre ese error, tengo que escribir el registro de puntos de consola. Si ocurre algún error al obtener estos datos de este APA en pinta, mostraremos este error en Console t. ¿Qué error se mostrará Bueno mostrar algo así como error al buscar broma. Escribiré error al buscar. La ortografía no es correcta, supongo , tengo que escribir buscando F, ETH NG, luego escribir broma Ahora dale esta columna, luego mostraremos ese error. Entonces coma y luego error. Vamos a guardar esto. Con esto, hemos completado nuestro proyecto Joke Teller usando JavaScript. Volvamos a revisar el código. ¿Hay algún error o no? No hay error supongo, todo es correcto. Sí. Todo es correcto, a. ahora me dio el error. El error es que cada vez que recarguemos esta app, obtendremos este Loompsm Ahora lo que quiero hacer es que quiero escribir haga clic en el botón para obtener el chiste. Voy a hacer clic en el botón. Para obtener broma. Voy a guardar esto y abrir esto en el navegador. Ahora como puedes ver, está escrito haz clic en el botón para obtener chistes. Ahora vamos a hacer clic en este botón y vamos a conseguir una broma aquí. Eso es. Hemos completado nuestra aplicación de broma usando JavaScript.