Como hacer un sistema de notificaciones "toast" con animaciones | HTML, CSS y Javascript

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ต.ค. 2024

ความคิดเห็น • 113

  • @FalconMasters
    @FalconMasters  ปีที่แล้ว +50

    Hola! Despues de un año sin subir videos estoy de regreso. Espero que les guste este tutorial
    Aviso: En unos días se viene mi mega curso de javascript desde cero, de mas de 190 capítulos y 33 horas.

    • @Djsore22
      @Djsore22 ปีที่แล้ว

      wow y gratis que genial

    • @sebasks93
      @sebasks93 ปีที่แล้ว

      Ya no vas actualizar el curso de React en udemy?

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +2

      @@sebasks93 Mi curso de React esta actualizado, pero de todas formas si pienso agregar capítulos adicionales para explicar cosas nuevas como vite y redux toolkit.

    • @carlose1462
      @carlose1462 ปีที่แล้ว +1

      @@Djsore22 El de JS no será gratis, estará para comprarlo en Udemy

    • @Djsore22
      @Djsore22 ปีที่แล้ว +1

      @@carlose1462 oh 😥 ya no es genial no hay money 🤣

  • @enmimaquinaandaba
    @enmimaquinaandaba ปีที่แล้ว +14

    Volvió el papá de los TH-camrs de desarrollo web

  • @pedrozarate8083
    @pedrozarate8083 ปีที่แล้ว +7

    Lo queremos estimado Carlos. Tiene una forma paciente de explicar, eso es propio de los buenos profesores. Que Dios lo bendiga mucho!🐝

  • @gears2confidencial
    @gears2confidencial ปีที่แล้ว +12

    Que gusto me da ver que retomas la actividad en youtube! Quisiera agradecerte ya que gracias a tus videos mi vida ha cambiado por completo! Soy Ing. en Mecatrónica, pero es una carrera que no me gusta, no ponía atención en clases y honestamente nunca terminé de entenderla, por lo que despertó en mi un gran miedo al no saber que sería de mi en el futuro. Pero en un proyecto final de mi carrera (el cual estaba relacionado con la industria 4.0), debíamos implementar una página web. En nuestra carrera no nos enseñaron nada sobre desarrollo web, por lo que decidí hacerme cargo de esa tarea ya que lo demás relacionado a la mecatrónica no me gustaba... Así es como empecé a ver tus videos para sacar adelante mi parte del proyecto, y poco a poco me fui interesando más en el desarrollo web. Terminando la universidad conseguí un trabajo como desarrollador Front-end durante poco más de 1 año (debido a problemas con el gerente de la empresa xD). Pero ahora estoy trabajando como Analista de operaciones tecnológicas para una empresa en la ciudad de méxico, mientras hago home office debido a que vivo hasta el norte del país. Tengo un buen sueldo, ya no tengo que tomar un camión para ir a trabajar a una empresa aburrida, mi stress ha disminuido, tengo la fortuna de convivir más tiempo con mi familia, y esa sensación de miedo e incertidumbre que tenía hace años desapareció. Muchas gracias por hacer estos videos, te deseo mucho éxito en todo lo que hagas! Te mando un fuerte abrazo! Saludos bro!

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +6

      Hola Rogelio, muchas muchas gracias por compartir esto conmigo, significa mucho para mi que mis videos hayan sido un efecto positivo en tu vida y ahora puedas vivir mejor gracias a esos conocimientos. Me esfuerzo mucho por que mis videos enseñen muchas cosas pero muchas veces no me doy cuenta del impacto que tendrán los videos.
      Muchas felicidades por tu gran carrera, sigue así!
      Te mando también un gran saludo!

  • @davidcanalespaez4967
    @davidcanalespaez4967 3 หลายเดือนก่อน

    Terminé, todo el video, esrmado Maestro. Además de ser instructivo es un ejemplo muy bello. Felicitaciones, querido Carlos.

    • @FalconMasters
      @FalconMasters  3 หลายเดือนก่อน +1

      Muchas gracias David! Me da mucho gusto que te gustara mi video, espero que hayas aprendido mucho.

  • @danielniebles4570
    @danielniebles4570 ปีที่แล้ว +1

    La manera que tienes para explicar el css y html es muy increíble, me había costado tanto tiempo entender cómo funcionaba css, muchas veces ni siquiera sabía porque había colocado esa propiedad ahí pero como funciono, funcionó. Ahora volviendo a ver mi trabajo pude entender y corregir muchas cosas. Muchas gracias por el video, me ha servido mucho!.

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      Hola Daniel! Muchas gracias por tu comentario, lo aprecio mucho y me da mucho gusto que te gusten y sirvan mis videos. Gracias por el apoyo, te mando un gran saludo!

  • @danielmorin7659
    @danielmorin7659 ปีที่แล้ว

    Estimado Carlos que bueno es tenerte de regreso en esta plataforma.... Gracias por tus enseñanzas tengo muchos años programando y he aprenddo de gente joven como tu....

  • @jsanchezp78
    @jsanchezp78 ปีที่แล้ว +1

    Saludos y felicitaciones, terminado el video e inclusive compre tu nuevo CURSO ---- Javascript: El Curso Completo, Práctico y desde Cero. --- CREO QUE APRENDERE UN MONTÓN SALUDOS

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Muchas gracias Jonatan por ver el video, espero que hayas aprendido muchas cosas nuevas, y el curso estoy seguro de que también te gustara y lo disfrutaras mucho. Saludos!

  • @franciscovaldemoro1
    @franciscovaldemoro1 9 หลายเดือนก่อน

    Hola, muchas gracias por compartir. Gran trabajo , gran explicación. Muy bien estructurado y apoyado con los ejemplos en cada caso. Mis más sinceras felicitaciones.

  • @christopherps3547
    @christopherps3547 ปีที่แล้ว

    Me siento muy contento de que vuelvas a dar actividad en TH-cam, no dejes de subir videos que tu contenido es de muy buena calidad 💪💪💪

  • @argempusrecords
    @argempusrecords 8 หลายเดือนก่อน

    Hola, muchas gracias por estos videos, llegue hasta el final copiando linea por linea y analizando todo, me gusta como explicas bien detallado, un saludo!

    • @FalconMasters
      @FalconMasters  8 หลายเดือนก่อน

      Estupendo! Me da mucho gusto que te sirvan mis videos y mi forma de explicar.

  • @jonathandajome690
    @jonathandajome690 ปีที่แล้ว +2

    Has revivido!! 🎉 Gracias por el curso, crack

  • @zcoder8940
    @zcoder8940 ปีที่แล้ว

    ¡Welcome back Crack! Comencé poco antes de la pandemia, y mis inicios fueron con tus vídeos. No tienes ni idea de los influyente que has sido en este mi maravilloso viaje de desarrollo web. También te sigo en Udemy, donde adquirí y estudié React. Te felicito y que continúen los éxitos..

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Muchas gracias!!
      Que gusto que mis videos te hayan servido para comenzar tu carrera en el desarrollo web, muchas gracias por tu comentario, lo aprecio mucho y el que tiene que dar las gracias soy yo a ti por apoyar mi contenido.
      Te mando un gran saludo!

  • @Henry_Nunez
    @Henry_Nunez ปีที่แล้ว +2

    *Bravoooo* 👏👏 Valió la pena esperar un año para ver otro interesante video de tu maravilloso canal. Video visto completo y es verdad lo que dices: requiere de mucho código. Es genial tu trabajo y te felicito por ello. No creo que tenga que volver a esperar otro año mas para ver el próximo video verdad ? 👍😀

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      Muchas gracias por tomarte el tiempo de ver mi video! Y no te preocupes, que justo mañana se viene mi curso de Javascript, y sera el video mas largo de la historia de mi canal de youtube.

  • @AntonioGonzalez-dd2ce
    @AntonioGonzalez-dd2ce 19 วันที่ผ่านมา

    Carlos eres un makina. Tu código es óptimo y agradable. Gracias

  • @iAm_castillo
    @iAm_castillo ปีที่แล้ว +1

    Todo con muy buena explicación, muchas gracias ❤

  • @nelsondiaze1
    @nelsondiaze1 ปีที่แล้ว

    Realmente gracias, aprendí un montón. San Carlos, Cojedes - Venezuela

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Me alegra que aprendieras mucho! Te mando un gran saludo.

  • @jairoandresagudelo6811
    @jairoandresagudelo6811 ปีที่แล้ว

    Este proyecto estuvo genial, Gracias Profesor Carlos !!

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Muchas gracias Jairo! Me alegra que te gustara.

  • @santosyamaha
    @santosyamaha ปีที่แล้ว +2

    Se extrañaba los contenidos, gracias por todo el contenido que en lo personal me ayudo mucho, saludos bro 🇦🇷

  • @kevinkaal
    @kevinkaal 8 หลายเดือนก่อน

    Gracias por compartir tus conocimientos, me ayudan a mejorar mucho junto con tus cursos en Udemy

    • @FalconMasters
      @FalconMasters  8 หลายเดือนก่อน

      Muchas gracias! Me alegra que mis videos y cursos te sirvan. Te mando un gran saludo

  • @rubenrojasgles
    @rubenrojasgles ปีที่แล้ว

    Mi estimado Charly, excelente Video, siempre es grato ver contenido creado con CSS y Javascript puro, sin utilizar Frameworks, que bueno que estas de regreso, salu2 desde la CDMX.

  • @paulocornejo8203
    @paulocornejo8203 ปีที่แล้ว

    Se extrañaba sus videos educativos, bienvenido, un gusto que este de vuelta y gracias por este nuevo video. 👍💪

  • @vzas280268
    @vzas280268 8 หลายเดือนก่อน

    Gracias por esta enseñanza, Genio!

  • @salvahdzcep11
    @salvahdzcep11 ปีที่แล้ว

    Termine el vídeo y lo vería a ver solo por gusto XD. Muchas gracias ❤

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      Hey muchas gracias! Eres la primer persona en terminar el video, y tal como lo prometí. Felicidades y gracias, espero que hayas aprendido algunas cosas nuevas. Gracias por el apoyo a mis videos. Te mando un gran saludo!

  • @angelrivero6143
    @angelrivero6143 ปีที่แล้ว

    Gracias por toda la información! Saludos desde Venezuela! 👋🏻

  • @zluthers8515
    @zluthers8515 ปีที่แล้ว +1

    Eres un crack, gracias por todos los cursos y ayudas

  • @eduardochx_
    @eduardochx_ ปีที่แล้ว

    Un gustazo verte de vuelta! ✌🏼

  • @4practicss
    @4practicss ปีที่แล้ว

    Falcoooon tanto tiempoooo que bueno verte por aca.... ni he visto el video aun pero ya le di like jasjdajd

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Muchas gracias, lo aprecio mucho :D

  • @arntor8353
    @arntor8353 ปีที่แล้ว

    Excelente, aprendí mucho.

  • @alejandrorios6999
    @alejandrorios6999 ปีที่แล้ว

    Que bueno que hayas vuelto master

  • @absoluterightsir4574
    @absoluterightsir4574 ปีที่แล้ว

    VOLVISTE MANOOOOOOOOOOOOO!

  • @erickhernandez5199
    @erickhernandez5199 9 หลายเดือนก่อน

    Videooo terminado! 1 nuevo suscriptor

  • @rodrigoriveros7432
    @rodrigoriveros7432 ปีที่แล้ว

    Volvisteee! Que crack, segui asi, tus videos de youtube y cursos de udemy me ayudaron bastante!

  • @22Victorioso
    @22Victorioso ปีที่แล้ว

    Por fin un video despues de milenios jejeje, saludos amigo, y gracias por todo tu esfuerzo.

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      Ya iba siendo hora de volver, gracias a ti por el apoyo!

  • @BrandonVelandiaCuartas
    @BrandonVelandiaCuartas ปีที่แล้ว

    Que bueno verte de vuelta amigo!

  • @jorgevalbuena4502
    @jorgevalbuena4502 ปีที่แล้ว +1

    Volviste Carlitos🎉🎉

  • @urieltenorio9480
    @urieltenorio9480 ปีที่แล้ว

    ¡Ha vuelto! ¡Ha vuelto!

  • @mkr_codigo9512
    @mkr_codigo9512 ปีที่แล้ว

    !Gracias por el video, bro¡

  • @gabrielcarmnn
    @gabrielcarmnn ปีที่แล้ว

    Volvioooooooooo😅😰 , aunque hay librerias para crear los toasts no esta demas aprender a crearlas desde 0 👌

  • @Rechick3n
    @Rechick3n 6 หลายเดือนก่อน

    gracias Krilin

  • @UECenter
    @UECenter ปีที่แล้ว

    Sensacional! 😃

  • @whoar27
    @whoar27 ปีที่แล้ว

    Estupendo video, mil gracias. Amigo, deberías organizarlo como librería para poderlo usar en nuestros proyectos. Like para que Falcon lo haga tipo Sweetheart2 y ToastAlert. 🖤

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      Es muy buena idea la verdad, pero para eso tendría que pulir más varios detalles, y eso es algo que ya varias librerías hacen muy bien así que mejor les recomendaría usar esas librerías.

    • @whoar27
      @whoar27 ปีที่แล้ว

      @@FalconMasters Es cierto bro, pero valdría la pena. Tu comunidad te apoyamos. Gracias por todo crack.

  • @GustavoGalarza
    @GustavoGalarza ปีที่แล้ว

    Excelente video..!!!

  • @kikemaya7758
    @kikemaya7758 ปีที่แล้ว

    Maestro. Regreso... :')

  • @inquisidorojo
    @inquisidorojo ปีที่แล้ว

    Buen video. Deberías hacer uno sobre las notificaciones que salen a través del navegador. Browser notifications.

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Gracias!, nunca las he utilizado pero les voy a dar un vistazo.

  • @agustinibarrola8931
    @agustinibarrola8931 ปีที่แล้ว

    wowwwww apareciste se extrañaba

  • @zerotet
    @zerotet ปีที่แล้ว +1

    Primero!🤗

  • @alfredopou2948
    @alfredopou2948 ปีที่แล้ว

    Genial! Me encantó!! Pero me quedó una duda, por qué para cerrar el toast con autocierre creaste un timeout, no se puede agregar otro if al animationend y que se cierre cuando termina esa animación? 🤔

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Si de hecho así es como debería de ser, solo que no quería ya complicar el código con otro evento animationend.

  • @AlojamientoCantabriaPuntoNet
    @AlojamientoCantabriaPuntoNet ปีที่แล้ว

    Cómo es que no tienes 1 millon de suscriptores?😊😊😊

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      No sé, pero estoy a 3,000 de los 500,000 🥳

    • @AlojamientoCantabriaPuntoNet
      @AlojamientoCantabriaPuntoNet ปีที่แล้ว

      @@FalconMasters Te conozco de hace un montón de años, desde cuándo empezaste, como pasa el tiempo

  • @Ramuelcl
    @Ramuelcl ปีที่แล้ว

    muy buen video, muchas gracias. aprovecho para preguntar cómo llamo agregarToast() desde PHP?

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Hola Ramuel, javascript se ejecuta del lado del cliente, así que con tu servidor de PHP tendrías que mandarle decir a PHP mediante websockets que ejecute agregarToast()

    • @Ramuelcl
      @Ramuelcl ปีที่แล้ว

      @@FalconMasters ok, yo uso laravel livewire, he intentado hacerlo pero no me funciona con $emit. gracias por responder

  • @rolandoalanis7716
    @rolandoalanis7716 ปีที่แล้ว

    Hola maestro!! Espero el curso de javascript!! Lo vas a subir a este canal?

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +2

      Si, el curso estará en youtube y también tendré una versión premium en Udemy con 6 super proyectos.

    • @rolandoalanis7716
      @rolandoalanis7716 ปีที่แล้ว +1

      @@FalconMasters Excelente Carlos... espero los 2 entonces.. un abrazo!!!

  • @jhosteen1792
    @jhosteen1792 ปีที่แล้ว +1

    No mames volviste de la muerte

  • @pw4645
    @pw4645 ปีที่แล้ว

    Seria bueno tambien que se pudieran pocisionar en la parte TOP y no solo abajo. 👌👌💥💥

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว

      Eso es muy fácil, simplemente puedes cambiar en el código css la propiedad y poner un top: 40px.

  • @salvahdzcep11
    @salvahdzcep11 ปีที่แล้ว

    😮😊❤🎉

  • @cristianpoveda4884
    @cristianpoveda4884 ปีที่แล้ว

    😢 volviste

  • @normanejm
    @normanejm ปีที่แล้ว

    (Cómo haces para borrar el contenido dentro de " " Rápidamente?? )

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      Estoy utilizando vim, así que solo entro al modo normal presionando Esc y escribo "cit" que significa "change in tag" y borra el contenido dentro de la etiqueta.

    • @normanejm
      @normanejm ปีที่แล้ว

      @@FalconMasters Ah de acuerdo. Te agradezco mucho. Y excelente vídeo!!

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      @@normanejm Muchas gracias! Espero pronto poder hacer un tutorial o curso de vim

    • @normanejm
      @normanejm ปีที่แล้ว

      @@FalconMasters Sería genial! Gracias

  • @springprogramming
    @springprogramming ปีที่แล้ว

    es como la biblioteca izitoast

  • @eliasortega8681
    @eliasortega8681 3 หลายเดือนก่อน

    no entiendo que sentido tiene tener botones que haga que salta el toats

  • @jaimeviloriogreen
    @jaimeviloriogreen ปีที่แล้ว

    Estabas perdido!!!

  • @FrankGP.com.
    @FrankGP.com. ปีที่แล้ว

    Hola Carlos Arturo después de un año, con tus videos aprendí mucho ahora estoy en nivel avanzado 🎉

    • @FalconMasters
      @FalconMasters  ปีที่แล้ว +1

      Muchas gracias y felicidades por tu progreso!