30 días de proyectos de JavaScript | Día1: crea una aplicación de lista de tareas con HTML, CSS y JavaScript

1. Introducción: Hola a todos, y bienvenidos a esta nueva lección de nuestro curso. En esta lección, vamos a crear una lista simple de hacer usando HTML, CSS y JavaScript. Puedes ver aquí tenemos un campo de entrada que dice agrega tu tarea, un botón para agregar la tarea. Entonces si voy aquí y digo, lea un libro, luego haga clic en el botón. Puedes ver que la tarea se agrega aquí con este borde inferior y este ícono de basura a la derecha. Y si agregamos otra tarea, digamos, ir al gimnasio, puedes ver que se agrega aquí debajo de la primera tarea. Muy bien, digamos que terminamos la primera tarea aquí leyendo un libro Podemos ir aquí y dar click en él, y como pueden ver, tiene esta línea de trazo indicando que esta tarea está terminada. Y si queremos eliminar completamente la tarea, podemos dar click en el icono de papelera aquí. Y se puede ver que se ha ido por completo. Este curso es ideal para estudiantes que hayan aprendido los fundamentos de Javascript y quieran aplicar sus conocimientos de manera práctica Al crear una aplicación de lista de tareas simple pero atractiva, los estudiantes obtendrán experiencia práctica, profundizarán su comprensión de los conceptos básicos de Javascript y aumentarán su confianza en desarrollo de proyectos del mundo real Para aprovechar al máximo este curso, se anima a los estudiantes a construir el proyecto por su cuenta y subir su trabajo terminado como archivo zip a la galería del proyecto. 2. Para enumerar el diseño de IU de aplicaciones: Bien, comencemos a crear esta app. Voy a empezar aquí en mi HTML y en un div, darle una clase de contenedor. Después dentro de él, agregaré otro div con una clase de tarea nueva. Entonces este nuevo div tarea contendrá la entrada de texto en que escribiremos nuestra tarea y el botón encargado de agregarla. Bien, vayamos a nuestro CSS y comencemos apuntando al cuerpo. Luego agregando altura, 100 VH, luego fondo, gradiente lineal a la derecha. Por lo que su dirección será de izquierda a derecha. Entonces agregaré estos tres bonitos colores. Y como puedes ver, el cuerpo ahora tiene este gradiente fresco como fondo. Bien, ahora apuntaré al div contenedor. Y agregar ancho, 40% del cuerpo, luego ancho mínimo, 450 píxeles. Entonces, en pantallas más pequeñas, el ancho no disminuirá por debajo de los 450 píxeles, pero en pantallas más grandes , ocupará el 40% del ancho del cuerpo. Entonces para poder verlo, agregaré borde, dos pixeles, sólido, blanco. También agregaré relleno, 30 píxeles de arriba y abajo y 40 píxeles de izquierda y derecha. Y puedes ver aquí tenemos nuestro contenedor div en la esquina superior izquierda. Pero queremos centrarlo horizontal y verticalmente dentro de nuestra página web. Así podemos subir aquí dentro de su contenedor, el cuerpo y agregar display flex, justificar contenido, centrarlo para centrarlo verticalmente, y alinear elementos centro para centrarlo horizontalmente, tal como se ve aquí. Todo bien. Ahora apuntemos al div con la clase de Nueva tarea, que contendrá la entrada de texto y el botón y agregaremos color de fondo. Relleno blanco 30 píxeles desde arriba e abajo y 20 píxeles de izquierda y derecha. Luego radio de borde, cinco píxeles para tener algunas curvas en la esquina, luego sombra de cuadro, cero como desplazamiento horizontal, 15 píxeles como desplazamiento vertical y 30 píxeles como valor de desenfoque. Entonces este color negro semitransparente. Como puedes ver aquí, el nuevo div de tareas se ve mucho mejor. Volvamos a nuestro HTML para agregar los elementos dentro de este div. Voy a agregar una entrada con un tipo de texto, luego un marcador de posición de agregar tu tarea Entonces este será el texto marcador dentro de la entrada, como puedes ver aquí Entonces por debajo de eso, agregaré un botón con una clase de BTN. Entonces diré Add. Se puede ver que tenemos un botón al lado de la entrada. Después iré a mi CSS y apuntaré la entrada dentro de la nueva tarea DIV. Después agregaré width, 70% de la nueva tarea div width, luego height, 45 pixels. Después para aumentar ligeramente el tamaño de fuente del texto, agregaremos tamaño de fuente 15 píxeles, luego borde, dos píxeles, sólido, este color gris claro. También agregaré relleno, 12 pixeles y colocaré este color. Después peso de fuente, 500 y finalmente, radio de borde cinco píxeles. Y ahora se puede ver que la entrada se ve mucho mejor. Y al escribir dentro de él, se puede ver que el texto se ve bastante bien. Pero queremos cambiar este feo color negro cuando nos enfocamos en la entrada. Volvamos aquí y apuntemos de nuevo a la entrada. Y al enfocarnos en él, agregaremos color de borde, este bonito color del degradado corporal. También agregaré esquema. Ninguno. Y ahora cuando voy y me concentro en el insumo, se puede ver que tenemos esta linda frontera. Vamos a darle estilo a este botón aquí. Volveré y lo apuntaré. Después agrega ingenio, 20%, altura, 45 pixeles. Radio de borde, cinco píxeles. Peso de la fuente, 500. Tamaño de fuente, 16 píxeles. Color de fondo, nuestro color favorito, luego borde. Ninguno, color blanco puntero del cursor. Y por último, bosquejo, ninguno. Ahora, como pueden ver, el botón se ve mucho mejor. Ahora queremos presionar el botón hasta el final de la nueva tarea div para que tengamos algo de espaciado en el centro. Podemos hacerlo usando Flexbox. Entonces iré aquí en la nueva tarea div y agregaré display flex, luego justificaré el espacio de contenido entre para que el espacio esté entre la entrada y el botón como ves aquí. Bien, ahora vamos a crear la parte donde mostraremos las tareas agregadas. Volveré a mi HTML, iré por debajo del nuevo div de tareas y agregaré un nuevo div con una clase de tareas. Después volveré a mi CSS para darle estilo a ese div. Yo lo apuntaré. Luego agrega ancho, 100% del ancho del contenedor. Después color de fondo, blanco, relleno, 30 pixeles de arriba e abajo y 20 pixeles de izquierda y derecha. Después margen superior 50 píxeles. Y ahora puedes ver que tenemos este fondo blanco en la parte inferior en el que podemos insertar nuestras tareas. Agreguemos un radio de borde. De diez píxeles, luego caja sombra cero, 15 píxeles, 30 píxeles, y este color semitransparente. Y ahora hemos terminado de diseñar nuestra app de lista de tareas pendientes, y luego la siguiente lección, seguiremos trabajando con JavaScript. Entonces, nos vemos ahí. 3. Adición de tareas con JavaScript: Bienvenidos de nuevo, todos. En esta lección, vamos a seguir trabajando en nuestra lista de tareas pendientes. En la última lección, terminamos el HTML y CSS para nuestra lista de tareas pendientes, y en esta lección, continuaremos construyéndola usando JavaScript. Así que vayamos a nuestro archivo JavaScript y comencemos. En primer lugar, vamos a apuntar a algunos elementos HTML y almacenarlos dentro de variables JavaScript. Voy a crear una nueva variable, nombrarla Botón Agregar tarea. Entonces queremos seleccionar este botón aquí. Entonces agregaré el selector de consulta de punto de documento y agregaré el botón de clase aquí. Entonces duplicaré eso y cambiaré el nombre de la variable a entrada de tareas. Entonces esta variable contendrá la entrada de texto aquí. Entonces cambiaré el botón aquí al div con la clase de nueva tarea y luego agregaré entrada para apuntar a la entrada dentro de ella. También queremos apuntar al marcador de posición div que contendrá nuestras tareas agregadas, esta de aquí Entonces voy a duplicar eso una vez más, cambiar el nombre de la variable a contenedor de tareas. Y apuntar al div con la clase de tareas. Ahora, vamos a implementar la lógica de esta app. Lo que queremos hacer es querer que la tarea que agregamos aquí se muestre en este div en la parte inferior. Pero si no escribimos nada y hacemos clic en el botón, queremos alguna acción que nos impida hacer eso y un mensaje de visualización para que el usuario nos diga que debes ingresar a una tarea. Así que vamos a configurarlo rápidamente como nuestro primer paso. Voy a ir aquí y decir añadir taskbton punto AD Event Después escucharé el evento click y agregaré una función de devolución Entonces lo que acabamos de hacer, todos, es que agregamos el botón agregar Tarea, y queremos responder al hacer clic en este botón. Entonces agregamos add event listener para permitirnos hacer precisamente eso Entonces escuchamos el evento click aquí, es decir, cada vez que hacemos clic en el botón, queríamos hacer algo, y podemos decirle al navegador qué hacer aquí en esta función de devolución Entonces voy a ir aquí dentro de esta función y decir, tareas entrada punto valor punto Longitud igual a cero. Voy a agregar alerta y dentro de ella, diré, Por favor ingrese una tarea. Así que aquí acabamos de verificar usando la condición I. Le dijimos al navegador si el valor que le damos a las tareas ingresadas aquí tiene una longitud de cero o en otras palabras, un número de caracteres igual a cero, y eso solo significa que aún no está escrito nada. Queremos mostrar esta alerta al usuario y decirle que ingrese una tarea. Bien, volvamos y probemos eso. Se puede ver cuando hago clic en el botón sin introducir ningún texto, esta alerta aparece para mí y dice: Por favor ingrese una tarea. Ahora puedo dar clic en Bien y luego comenzar a ingresar a la tarea y agregarla usando este botón. Pero continuemos nuestro trabajo en Javascript. Voy a ir aquí y en el caso donde el usuario ingresó una tarea, podemos traducir eso en el código agregando else. Entonces básicamente queremos agarrar cualquier valor que el usuario haya agregado aquí dentro de la entrada y mostrarlo en este tenedor de lugar div en la parte inferior. Y, por supuesto, todo eso debería suceder cuando hacemos clic en el botón de anuncio. Es por eso que todo nuestro código está dentro de esta función de devolución Entonces voy a agregar contenedor de tareas. Y como queremos insertar las tareas dentro este contenedor envuelto en algunos elementos HTML para darles estilo, voy a añadir punto HTML interno y pondré eso igual a, luego agregaré literales de plantilla, y dentro de él, agregaremos algo de HTML regular Como ves aquí, acabo agregar un div con una clase de tarea, y dentro de él, agregué un span que debería contener la tarea. Entonces queremos agarrar el valor de entrada que agregamos e insertarlo dentro del span aquí. Podemos hacerlo fácilmente yendo aquí y diciendo tareas entrada punto VLU Todo bien. Vamos a probar eso. Iré aquí y agregaré una tarea. Digamos que lee un libro. Luego haz clic en Agregar, y ahora puedes ver que la tarea se agrega aquí. Pero una vez que agrego otra tarea, vamos a enfrentar un nuevo problema. Probemos eso y agreguemos uno nuevo. Después al hacer clic en el botón Agregar, se puede ver que se agrega la nueva tarea, pero se elimina la anterior. Pero queremos mantener el primero y mostrar el segundo debajo de él. Entonces entendamos por qué sucede esto en primer lugar. Cuando miramos aquí, puedes ver que configuramos el contenido HTML del contenedor de tareas para que sea igual a este contenido aquí. Y eso debería suceder al hacer clic en el botón. Así que cada vez que hacemos clic en el botón, este clode aquí se ejecutará, y el contenido HTML se actualizará básicamente desde el cuadrado y contendrá el valor de la entrada Por eso cambia con cada nueva tarea que añadimos. Pero podemos arreglar eso con un simple truco, que es agregar un signo más aquí frente al signo igual. Por lo que será más igual este valor. Y eso básicamente le dice al navegador que agregue el nuevo contenido mientras mantiene el contenido antiguo en su lugar. Y ahora, cuando vuelvo y trato de agregar algunas tareas, puedes ver que las nuevas tareas se agregan debajo de las antiguas, pero ahora es el momento de agregar algunos estilos al div de tarea y al lado span. Iré a mi CSS y apuntaré al div tarea luego agregaré height, 50 pixels, padding, cinco pixeles de arriba e abajo, y diez pixeles de izquierda y derecha. Entonces margen los diez píxeles superiores para que tengamos algún espaciado entre las tareas. También queremos agregar un borde en la parte inferior para separar las tareas. Entonces voy a agregar borde inferior, dos pixeles, sólido este color gris claro. Entonces finalmente, voy a añadir puntero de cursor. Y ahora cuando voy y trato de agregar tareas, puedes ver que las tareas se muestran aquí de una manera mucho mejor. Bien, ahora vamos a diseñar el span dentro de la tarea Div. Voy a apuntar. Y agregue tamaño de fuente, 15 píxeles, peso de fuente, 400. Y así, las tareas se ven exactamente de la manera que queremos. Sigamos adelante. Queremos agregar un icono de papelera en cada tarea para que podamos eliminar la tarea cuando queramos. Entonces volveré a nuestro archivo JavaScript, iré aquí dentro del tastiv y debajo del span y agregaré un botón Con una clase de eliminar Luego dentro de ese botón, agregaremos el icono de papelera, y agregaremos este icono usando el sitio web Font Awesome. Y para incluir iconos Font Awesome en nuestro proyecto, buscaremos Font Awesome CDN Entonces copiaremos aquí este primer código. Vuelve a nuestro HTML y pegarlo aquí encima de la hoja de estilo. Entonces buscaré Font Awesome. Ir a iconos. Después busca Basura. Da click en este icono aquí, luego copia su código. Ir a mi editor de código y pegarlo aquí dentro del botón con la clase de borrar. Ahora cuando voy y agrego una tarea, puedes ver que tenemos este ícono de basura aquí, pero vamos a agregarle algunos estilos. Volveré a mi CSS y seleccionaré el botón que contiene el icono. Después agregaré altura, 100% de la tarea div ancho 40 píxeles, color de fondo, nuestro color rojo, color, radio de borde blanco, cinco píxeles, borde ninguno. Contorno, ninguno, y finalmente, puntero del cursor. Y ahora puedes ver que se ve mucho mejor. Por último, queremos moverlo al final de la tarea div aquí, y podemos hacerlo usando Flexbox yendo aquí dentro del div de tarea y agregando display flex, align items, center para alinearlo verticalmente dentro del task div luego justifique el contenido, espacio entre para que sea empujado hasta el final de la tarea div tal como se ve aquí Bien, todos, eso es todo para esta lección. Recapitulemos rápidamente lo que hicimos. Aquí en nuestro JavaScript, le dijimos al navegador que cuando hacemos clic en el botón de anuncio, queremos ejecutar algún código, y el código a ejecutar se agregará dentro de esta función de devolución Luego dentro de la función callback, comprobamos si el campo de entrada está vacío Y como respuesta a eso, agregamos esta alerta que le dice al usuario que agregue una tarea. Entonces por debajo de eso, simplemente agarramos el valor de la entrada agregada por el usuario, agregamos dentro de un span y un div, luego insertamos dentro del div de tareas en la parte inferior. También agregamos un icono de papelera junto a él usando sitio web Font Awesome para que podamos eliminar la tarea una vez que haya terminado. Bien, en la siguiente lección, aprenderemos cómo podemos eliminar o marcar las tareas como finalizadas. Usaremos algunas funciones geniales de JavaScript para hacer eso, así que te veré ahí. 4. Finalización y eliminación de tareas con JavaScript: Oigan, todo el mundo. Bienvenido de nuevo a la parte final de la creación de esta aplicación de lista de tareas usando HTML, CSS y JavaScript. Después de mostrar nuestras tareas aquí, queremos tener la opción de eliminarlas una vez que las terminemos, y lo haremos usando este ícono de papelera que agregamos aquí. Entonces hagámoslo en nuestro JavaScript. En primer lugar, quiero apuntar los botones aquí a la derecha, así voy a crear una nueva variable, nombra eliminar botones. Entonces voy a decir documento. Y como pueden ser más de un botón en el caso de agregar múltiples tareas, al igual que aquí, voy a decir selector de consulta de puntos todos y dirigirlos por su clase, borre eso que agregamos arriba aquí en nuestro HTML insertado. Entonces al hacer eso, esta variable aquí contendrá todos los botones de las tareas en una lista de nodos. Y para poder escuchar el evento click de cada botón, primero necesitaremos recorrer los botones, luego escuchar el evento click de cada uno. Entonces hagámoslo. Diré eliminar botones, y los recorremos usando para cada método. Entonces voy a decir punto para cada uno. Después agregaré una función de devolución de llamada dentro del bucle. Por lo que esta función se ejecutará en todos los botones dentro de la lista de nodos de eliminar botones. Entonces necesitamos pasar un parámetro aquí que represente cada botón. Entonces voy a agregar botón. Después dentro de la función que se ejecutará en cada botón, queremos escuchar el evento click de cada botón para que podamos eliminar su tarea. Entonces voy a agregar botón, que acabamos de pasar como parámetro aquí. Punto agregar oyente de eventos. Entonces queremos escuchar el evento click. Después agregaré una función de devolución de llamada que se ejecutará cada vez que se haga clic en el botón Después dentro de esta función, queremos eliminar la tarea relativa al botón que pulsamos Si subimos aquí, puedes ver que cada tarea está representada por este div aquí que tiene la clase de tarea y contiene tanto las tareas agregadas como el botón de eliminar. Por lo que tendremos que eliminar todo este div al hacer clic en este botón. Y si te das cuenta, el div que queremos eliminar es un padre del botón de borrar. Entonces voy a bajar aquí y decir botón, punto nodo padre. Eliminar puntos. Entonces, como puedes ver, he apuntado al nodo padre del botón, que es el div con la clase de tarea usando este nodo padre aquí. Después lo eliminé, y todo esto debería suceder una vez que haga clic en el botón de eliminar. Entonces probemos eso. Iré aquí y agregaré algunas tareas. Entonces digamos que quiero eliminar una tarea específica. Puedo ir aquí y hacer clic en el botón de basura, y como pueden ver, se retira. Y también puedo eliminar las otras tareas por completo. Todo bien. Ahora, al terminar una tarea, queremos tener la capacidad de marcarla terminada. Y lo haremos simplemente agregando una línea cruzada a través la tarea al hacer clic en la propia tarea. Entonces para hacer eso, recorreremos las tareas, y al hacer clic en cualquier tarea, agregaremos esa línea. Esto es muy parecido a lo que hicimos aquí. Entonces, antes que nada, queremos seleccionar las tareas agregadas. Entonces voy a crear una nueva variable, nombrarla tareas agregadas. Y voy a establecer eso igual al selector de consulta de punto de documento todos. Y apuntaré a todos los divs que tengan una clase de tarea, que es este div arriba de aquí Entonces fácilmente podemos ir aquí y copiar esta lógica desde aquí. Pégalo y simplemente cambia lo que queremos hacer. En primer lugar, reemplazaré los botones de eliminar con tareas agregadas, por lo que esta vez recorreremos la tarea agregada ellos mismos. Entonces voy a cambiar botón aquí a tarea, que representa cada tarea individual. Después dentro, cambiaremos el botón aquí a tarea también para que podamos escuchar el evento click de cada tarea. Entonces voy a eliminar este código aquí porque claramente no queremos eliminar el padre de la tarea al hacer clic en él. Pero en realidad, queremos agregar una línea simple a través de la tarea, y podemos hacerlo usando CSS. Entonces voy a decir tarea classLT punto Toggle. Y voy a alternar la clase llamada done. Entonces, lo que esto hará es que cada vez que hagamos clic en una tarea, se agregará una clase llamada Don al div con una clase de tarea. Y si volvemos a hacer clic, la clase será eliminada. Entonces probemos eso. Agregaré una tarea luego la inspeccionaré. Y quiero que eches un vistazo más de cerca aquí al div con la clase de tarea. Se puede ver al hacer clic en la tarea, se agrega una clase llamada D. Y al volver a hacer clic, se elimina esta clase D. Y eso está sucediendo debido al método toggle que agregamos aquí. Todo bien. Usaremos esta clase De para darle estilo a la tarea al hacer clic en ella. Entonces iré a mi CSS y apuntaré a la tarea div Y cuando tenga otra clase llamada hecha, agregaré decoración de texto, línea a través. Entonces ve aquí y da click en él. puede ver que se agrega la línea para indicar que hemos terminado esta tarea y esa línea se agrega debido a la clase De. Y al volver a hacer clic, se elimina, y podemos eliminar completamente la tarea haciendo clic en el botón de papelera. Bien, ahora nos queda una cosa. Se puede ver que la tarea en la entrada sigue ahí después de agregar la tarea, pero queremos eliminarla una vez que agreguemos la tarea. En otras palabras, queremos vaciar la entrada que esté lista para que se agregue la siguiente tarea. De esa manera no tendremos que eliminar manualmente el texto de la tarea anterior. Podemos hacerlo fácilmente yendo a nuestro archivo JavaScript, y en la parte inferior aquí voy a decir entrada de tareas. Que es, recuerden, la entrada de texto que seleccionamos aquí. Después voy a añadir valor de punto, y voy a establecer y vaciar cadenas como un valor. Y recuerda, esto sucederá al hacer clic en el botón agregar Tarea. Entonces probemos eso. Voy a añadir una nueva tarea y ahora se puede ver que la entrada se vacía cuando añadimos la tarea. Y al agregar otra tarea, vuelve a estar vacía, y podemos marcar esta tarea como terminada. También podemos eliminar esta tarea. Y con eso, todos, hemos terminado de crear este proyecto. Espero que te haya gustado y sacaras algo de ello, y te veré en otro proyecto de JavaScript.