Aprende como crear tu propia aplicación de lista de tareas básica con Javascript.

Share on Pinterest
Comparte con tus amigos










Enviar

Como parte del Curso de Javascript Básico desde 0 hoy vamos aprender a hacer una aplicación web sencilla, en especifico una App para listas de tareas, similar a las famosas apps para tareas como Wunderlist!

El ejemplo de lo que estaremos realizando lo puedes ver desde nuestro codepen:

See the Pen App Lista de Tareas Basica con JS by Carlos Arturo Esparza (@falconmasters) on CodePen.5968

 

El tutorial se divide en 2 videos en los cuales explicaremos de forma rapida la estructura html y algunas clases importantes de CSS que estaremos utilizando, después pasaremos al código JS en donde estableceremos los eventos de nuestros elementos y programaremos las funciones que ejecutara cada evento.

Como hacer una App Lista de Tareas con Javascript (Curso JS)

[Parte #2 en unas horas]

Código en Github: https://github.com/falconmasters/lista-tareas

Código HTML:

Importante!

Ten en cuenta que para que funcione el código correctamente tienes que tener correctamente la ruta de tus archivos CSS y JS, en mi caso los he puesto dentro de la carpeta CSS y JS cada uno en su respectiva carpeta.

Código CSS:

Código JS:

 

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Nelson Diaz

    Me gusto mucho el video!! , ya pude hacer que que la tarea se guarde , Muchas gracias por tus tutoriales , saludos!

    • Jetpack83

      ¿como le hiciste para que la tarea se guarde? cada vez que refresco la pagina, se borran las tareas que ingrese anteriormente

      • KikeZ

        Para que se guarden debes hacer la parte de backend… programar la grabada en el servidor de base de datos… eso se hace con lenguajes php ruby etc… tienes que investigar

  • Miguel Gomez

    Excelente el video la verdad, me gusto mucho la practica.

    Tengo una pregunta, en el caso de tenga varios inputs, por ejemplo que posea nombre, apellido y correo, como crear todos los elemento dentro de la lista, tocaria crear uno por uno o hay alguna forma de crearlos todo con un siclo.

    Algo mas o menos como esta en la imagen.

    • Es igual, agregas un nuevo div que seria el contenedor de user info, y a cada uno le vas agregando el nuevo elemento creado, en la practica de la lista de tareas creabamos el elemento li y poniamos dentro el elemento a, aqui en este caso tu crearias el div y dentro del div crearias varios parrafos.

  • el jefe diversion

    falconmaster y para agregar tambien hora como ago

  • Miguel Gomez

    Tengo una pregunta con respecto aun ejercicio que intentado hacer y no logro corregirlo, tengo 3 arreglos ( nombre, apellidos y hobbies), y quiero crear una tablar con javascript en donde por cada elemento del arreglo me crea un junto con los 3 de cada elemento de los arreglos, logro recorrer los arreglos pero al momento de crear la tabla me imprime todos los elementos dentro en un solo , como podria hacer para que por cada iteracion me cree un y luego agregarlo a un nuevo para que quede como una tabla.

  • Nelson Pineda

    Gracias FM, ahora veo que estos son los #23 y #24 del curso , al no seguir la secuencia numerica en Youtube me perdi, pero al entrar al canal lo resolvi. voy a probar harce todo esto, Saludos.

  • erick jr bernett meza

    Necesito ayuda en como poner un espacio en mi sitio web para cambiar password :(

  • Oye @FalconMasters deverias hacer un curso de Gráficos Vectoriales SVG, creo que es una buena idea.

  • Juan Pablo Palomino Mantilla

    Buenos días, tengo una pregunta, porque me sale esto si ya hice y copie todo como estaba??

  • Jetpack83

    ¿Como puedo hacer para que las tareas se guarden? cada vez que refresco la pagina, se borran las tareas.

    • Eduardo Hernandez Hernandez

      Hola,

      Te recomiendo que los guardes en un arreglo en una variable de cesión y cada vez que la necesites recorrelo con un for y al igual puedes guardar mas datos, modificar y eliminar desde el arreglo.

      • Jetpack83

        Gracias por la respuesta. ¿Que es una variable de cesion? estuve investigando y no encuentro nada con relacion a eso, ¿no es una variable de sesion?

  • Andrés Lill

    Hola!
    Estoy llevando el curso de PHP y MySQL, me gusta mucho el curso; pero tambien tengo interés en el curso de JS lo que pasa es que no lo encuentro dentro de la lista de cursos, donde lo puedo encontrar o cual me recomiendan para empezar desde 0??

  • Adrian Valderrey

    Excelente post, Falcon. Eres un buen tutor. Los que puedas pasen por mi blog: http://www.tickteam.com.ve/blog

  • julio500

    Hola, muy buen tutorial.
    Tengo dos incidencias de funcionamiento, la primera es con el JS, que en la línea 40 dice tearea.Input en lugar de tarea.Input, esta se solucionó con esta corrección.
    La segunda, es que “Agrega una tarea válida” no se imprime en color rojo en Chrome ni Safari, sólo aparece en color rojo en Firefox.
    Alguien sabe como solucionar esto?

    • Anthony Serquén

      Eso ya es tema del navegador y creo que no se puede solucionar :’v

  • fitosis

    Excelente Post!!, podrías hacer este ejemplo con Local Storage? ahi no sería necesario usar php

  • TomCode

    FalconMaster me sale un error en la parte del js, al momento de eliminar una tarea me sale que no puede leer la propiedad ‘removeChild’ of null

  • Cristian

    Hola, Donde puedo descargar JavaScript ?


Aprende con nuestros cursos

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso
Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso