Implemente su primera aplicación de lista de tareas pendientes: 8 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

Si eres completamente nuevo en la codificación o tienes experiencia en codificación, es posible que te preguntes por dónde empezar a aprender. Necesita aprender cómo, qué, dónde codificar y luego, una vez que el código esté listo, cómo implementarlo para que todo el mundo lo vea.

Bueno, la buena noticia es que codificar no es difícil.

Público objetivo: este tutorial está destinado a principiantes que desean comenzar una carrera en el desarrollo web, tener conocimientos de las tecnologías web en general.

Tiempo de construcción: 90 minutos.

Dificultad: Fácil.

Paso 1: ¿Qué construiremos?

Al final de este tutorial:

• Cree una aplicación web de lista de tareas pendientes utilizando HTML5.
• Integre Bootstrap con nuestra aplicación para agregar un estilo atractivo y rápido.
• Use JavaScript y la biblioteca JQuery para agregar un comportamiento dinámico a nuestra aplicación.
• Implemente nuestra aplicación en la nube usando Ziet / now.

En acción:

Paso 2: Introducción a HTML, Bootstrap, JavaScript y JQuery

¿Qué es HTML?

Hyper Text Markup Language (HTML) se puede considerar como "el lenguaje de Internet". HTML es el lenguaje de marcado estándar que se utiliza para crear páginas web. Originalmente fue diseñado para compartir documentos científicos. Las adaptaciones a HTML a lo largo de los años lo hicieron adecuado para describir varios otros tipos de documentos que pueden mostrarse como páginas web en Internet.

El único requisito que se necesita para mostrar una página HTML es un navegador web, como Microsoft Internet Explorer (IE), Mozilla Firefox, Google Chrome o Apple Safari.

¿Qué es Bootstrap?

Bootstrap es el marco de trabajo HTML, CSS y JavaScript más popular para crear sitios web móviles que respondan primero. Bootstrap es un proyecto de código abierto desarrollado por Twitter. consta de clases CSS que se pueden aplicar a elementos para diseñarlos de manera coherente y código JavaScript que realiza una mejora adicional.

¿Qué es JavaScript?

JavaScript es un lenguaje de programación que se utiliza para la programación del lado del cliente en aplicaciones web. El navegador ejecuta el código JavaScript y permite a los programadores de aplicaciones web crear contenido web dinámico, como componentes que se muestran o están ocultos de forma dinámica, cambian de apariencia y validan la entrada del usuario.

¿Qué es JQuery?

JQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones, hace que cosas como el recorrido y la manipulación de documentos HTML, el manejo de eventos y la animación sean mucho más simples.

Se accede a todo el poder de JQuery a través de JavaScript, por lo que tener una sólida comprensión de JavaScript es esencial para comprender, estructurar y depurar su código.

Para más detalles:

HTML

JavaScript

JQuery

Oreja

Paso 3: su primera página con HTML

PASO 1: cree una nueva carpeta:

mkdir simple-todolist

PASO 2: cree un nuevo archivo dentro de la carpeta de lista simple y asígnele el nombre index.html.

cd simple-todolist

touch index.html

PASO 3: agregue el siguiente código a index.html.

Lista de quehaceres

Mi lista de tareas pendientes

PASO 4: Abra index.html en su navegador.

Verá que se muestra Mi lista de tareas pendientes (vea la foto de arriba).

Paso 4: agregar Bootstrap

En esta sección, agregaremos compatibilidad con Bootstrap a nuestra página index.html, para agregar un estilo rápido y bueno a la aplicación Lista de tareas pendientes.

Aviso: en esta aplicación usaremos Bootstrap 3, usted usa cualquier otro marco CSS, como la interfaz de usuario semántica.

PASO 1: agregue el archivo Bootstrap CSS en la etiqueta principal:

PASO 2: agregue los archivos de scripts de Bootstrap y JQuery CDN al final de la etiqueta del cuerpo:

PASO 3: Abra index.html en su navegador.

Felicitaciones, agregamos con éxito el soporte de Bootstrap a nuestra página en unos pocos pasos.

Paso 5: completa la interfaz de usuario

Después de que agreguemos con éxito el soporte de Bootstrap a nuestra aplicación. Ahora vamos a competir con la IU (Interfaz de usuario) para permitir que el usuario agregue nuevas tareas. La lista de tareas pendientes podrá agregar nuevos elementos a una lista, así como eliminar elementos existentes.

PASO 1: agregue el siguiente código a index.html.

Agregar nueva tarea Agregar Borrar todo!

Mi lista de tareas

PASO 2: abra el archivo index.html en su navegador.

Paso 6: agregar la lógica a la aplicación

Cuando ingresa un nombre de tarea y hace clic en el botón Agregar, no sucede nada en este momento. Arreglemos eso.

Al final de este paso, convertiremos nuestro index.html en una página dinámica, por lo que se comportará con la interacción del usuario.

PASO 1: cree una nueva carpeta dentro de simple-todolist, asígnele el nombre js y un nuevo archivo con el nombre script.js dentro de esa carpeta:

mkdir js

cd js touch script.js

PASO 2: vincule el script.js al index.html agregando el siguiente código al final de la etiqueta principal:

PASO 3: agregue el siguiente código al archivo script.js

$ (documento).ready (() => {

var tasks = 0 $ ("# removeAll"). hide (); / * agregar nuevo controlador de tareas * / $ ("# agregar"). on ("clic", (evento) => {evento.preventDefault (); event.stopPropagation (); var val = $ ("entrada"). val (); if (val! == "") {tareas + = 1; var elm = $ ("

• "); $ (" # mylist "). append (elem); $ (" input "). val (" "); / * eliminar el controlador de tareas único * / $ (". text-right "). on (" clikc ", function (event) {event.preventDefault (); event.stopPropagation (); tasks - = 1; $ (this).parent.remove ();}); / * mostrar el botón removeAll cuando tenemos más de 3 tareas * / if (tareas> 2) {$ ("# remveAll"). show ();} / * removeAll handler * / $ ("# removeAll"). on ("click", event => {event.preventDefault (); event.stopPropagation (); $ (". disabled"). siblings (). remove (); tasks = 0; $ ("# removeAll"). hide ();});}});});

  Nota: Puede clonar o descargar el ZIP del código de mi repositorio de GitHub, esto le evitará tocar.

  git clone github.com/ahmnouira/simple-todolist

  PASO 4: prueba el código

  Abra su navegador e ingrese una tarea luego haga clic en Agregar, verá que se agrega una nueva tarea a la lista, si agrega 3 tareas notará que aparece un botón clearAll, este botón nos permite eliminar todas las tareas agregadas, usted También puede eliminar solo una tarea comprar haciendo clic en su botón.

  Paso 7: (Opcional) Implementar la aplicación

  

  Hasta ahora, creamos una aplicación de lista de tareas simple, ahora es el momento de implementarla en la nube y compartir nuestro trabajo con otros en todo el mundo.

  Para lograrlo usaremos una plataforma en la nube llamada ZEIT Now.

  ¿Qué es ZEIT Now?

  ZEIt Now es una plataforma en la nube para sitios estáticos y funciones sin servidor, permite a los desarrolladores alojar sitios web y servicios web que se implementan instantáneamente, todo esto sin configuración.

  1. Instalar ahora CLI

  Para implementar con ZEIT Now, necesitará instalar Now CLI.

  importante: asegúrese de tener npm instalado.

  npm -v # compruebe si npm se instala

  npm install -g now @ latest # instale la última versión de Now CLI globalmente ahora -v # compruebe si Now CLI está instalado e imprímalo.

  2. Implementar

  Todo lo que tiene que hacer es moverse al directorio y luego implementar su aplicación con un solo comando:

  ahora --prod # implementar la aplicación

  Una vez implementado, obtendrá una URL de vista previa que se asigna en cada implementación para compartir los últimos cambios bajo la dirección.

  mi aplicación:

  Paso 8: Conclusión

  Eso es todo al respecto !

  Siéntase libre de explorar el código estableciendo nuevas funciones y expandiendo la aplicación, y comparta su experiencia y preguntas en el área de comentarios.

  Para ver más mis trabajos, visite mi código abierto en GitHub.

  myYouTube.

  myLinkedIn

  Gracias por tener un tiempo para leer mis instrucciones ^^.

  Que tenga un lindo día.

  Ahmed Nouira