C贸mo Hacer Operaciones CRUD En JavaScript Creando Una Aplicaci贸n Todo

Hoy vamos a aprender c贸mo hacer operaciones CRUD en JavaScript creando una aplicaci贸n Todo. Empecemos 馃敟

Esta es la aplicaci贸n que estamos haciendo hoy:

Aplicaci贸n que estamos haciendo hoy

驴Qu茅 es CRUD?

descripci贸n de la imagen

CRUD significa -

  • c: crear
  • R: Leer
  • U: Actualizar
  • D: Eliminar

CRUD de forma completa

CRUD es un tipo de mecanismo que le permite crear datos, leer datos, editarlos y eliminar esos datos. En nuestro caso, vamos a crear una aplicaci贸n Todo, por lo que tendremos 4 opciones para crear tareas, leer tareas, actualizar tareas o eliminar tareas.

Comprender los principios CRUD

Antes de comenzar el tutorial, primero, comprendamos los principios CRUD. Para eso, creemos una aplicaci贸n de redes sociales muy, muy simple.

Proyecto de aplicaci贸n de redes sociales

Configuraci贸n

Configuraci贸n del proyecto

Para este proyecto, seguiremos los siguientes pasos:

  • Cree 3 archivos llamados index.html, style.css y main.js
  • Vincule el archivo JavaScript y CSS a index.html
  • Inicie su servidor en vivo

HTML

Dentro de la etiqueta del cuerpo, crea un div con un nombre de clase .container. Ah铆 tendremos 2 secciones, .lefty .right馃憞

<body>
  <h1>Social Media App</h1>
  <div class="container">

    <div class="left"></div>
    <div class="right"></div>

  </div>
</body>

En el lado izquierdo, crearemos nuestras publicaciones. En el lado derecho, podemos ver, actualizar y eliminar nuestras publicaciones. Ahora, crea un formulario dentro de la etiqueta div .left 馃憞

<div class="left">
  <form id="form">
    <label for="post"> Write your post here</label>
    <br><br>
    <textarea name="post" id="input" cols="30" rows="10"></textarea>
    <br> <br>
    <div id="msg"></div>
    <button type="submit">Post</button>
  </form>
</div>

Escribe este c贸digo dentro del HTML para que podamos mostrar nuestra publicaci贸n en el lado derecho 馃憞

<div class="right">
  <h3>Your posts here</h3>
  <div id="posts"></div>
</div>

A continuaci贸n, insertaremos el CDN font-awesome dentro de la etiqueta de encabezado para usar sus fuentes en nuestro proyecto 馃憞

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Ahora, vamos a hacer algunas publicaciones de muestra con 铆conos de eliminar y editar. Escribe este c贸digo dentro del div con el id #posts: 馃憞

<div id="posts">
  <div>
    <p>Hello world post 1</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>

  <div >
    <p>Hello world post 2</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>
</div>

El resultado hasta ahora se ve as铆:

Resultado de marcado HTML

CSS

Agregar CSS para el proyecto 1

Manteng谩moslo simple. Escribe estos estilos dentro de tu hoja de estilo: 馃憞

body {
  font-family: sans-serif;
  margin: 0 50px;
}

.container {
  display: flex;
  gap: 50px;
}

#posts {
  width: 400px;
}

i {
  cursor: pointer;
}

Ahora, escribe estos estilos para los 铆conos de opci贸n y div posteriores: 馃憞

#posts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options {
  display: flex;
  gap: 25px;
}

#msg {
  color: red;
}

Los resultados hasta ahora se ven as铆: 馃憞

El resultado despu茅s de agregar el proyecto de parte css 1

Parte de JavaScript

Comenzando la parte de javascript

De acuerdo con este diagrama de flujo, seguiremos adelante con el proyecto. No te preocupes, te explicar茅 todo en el camino. 馃憞

diagrama de flujo

Validaci贸n de formulario

Primero, apuntemos a todos los selectores de ID del HTML en JavaScript. As铆: 馃憞

let form = document.getElementById("form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");

Luego, cree un detector de eventos de env铆o para el formulario para que pueda evitar el comportamiento predeterminado de nuestra aplicaci贸n. Al mismo tiempo, crearemos una funci贸n llamada formValidation. 馃憞

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("button clicked");

  formValidation();
});

let formValidation = () => {};

Ahora, vamos a hacer una declaraci贸n if else dentro de nuestra formValidationfunci贸n. Esto nos ayudar谩 a evitar que los usuarios env铆en campos de entrada en blanco. 馃憞

let formValidation = () => {
  if (input.value === "") {
    msg.innerHTML = "Post cannot be blank";
    console.log("failure");
  } else {
    console.log("successs");
    msg.innerHTML = "";
  }
};

Aqu铆 est谩 el resultado hasta ahora: 馃憞

7sb8faq21j5dzy9vlswj

Como puede ver, tambi茅n aparecer谩 un mensaje si el usuario intenta enviar el formulario en blanco.

C贸mo aceptar datos de campos de entrada

Cualesquiera que sean los datos que obtengamos de los campos de entrada, los almacenaremos en un objeto. Vamos a crear un objeto llamado data. Y crea una funci贸n llamada acceptData: 馃憞

let data = {};

let acceptData = () => {};

La idea principal es que, usando la funci贸n, recopilamos datos de las entradas y los almacenamos en nuestro objeto llamado data. Ahora terminemos de construir nuestra acceptDatafunci贸n.

let acceptData = () => {
  data["text"] = input.value;
  console.log(data);
};

Adem谩s, necesitamos que la acceptDatafunci贸n funcione cuando el usuario haga clic en el bot贸n Enviar. Para eso, activaremos esta funci贸n en la instrucci贸n else de nuestra formValidationfunci贸n. 馃憞

let formValidation = () => {
  if (input.value === "") {
    // Other codes are here
  } else {
    // Other codes are here
    acceptData();
  }
};

Cuando ingresamos datos y enviamos el formulario, en la consola podemos ver un objeto que contiene los valores de entrada de nuestro usuario. As铆: 馃憞

resultado hasta ahora en la consola

C贸mo crear publicaciones usando literales de plantilla de JavaScript

Para publicar nuestros datos de entrada en el lado derecho, necesitamos crear un elemento div y agregarlo al div de publicaciones. Primero, creemos una funci贸n y escribamos estas l铆neas: 馃憞

let createPost = () => {
  posts.innerHTML += ``;
};

Los acentos graves son literales de plantilla. Funcionar谩 como una plantilla para nosotros. Aqu铆, necesitamos 3 cosas: un div principal, la entrada en s铆 y el div de opciones que lleva los 铆conos de edici贸n y eliminaci贸n. Terminemos nuestra funci贸n 馃憞

let createPost = () => {
  posts.innerHTML += `
  <div>
    <p>${data.text}</p>
    <span class="options">
      <i onClick="editPost(this)" class="fas fa-edit"></i>
      <i onClick="deletePost(this)" class="fas fa-trash-alt"></i>
    </span>
  </div>
  `;
  input.value = "";
};

En nuestra acceptdatafunci贸n, activaremos nuestra createPostfunci贸n. As铆: 馃憞

let acceptData = () => {
  // Other codes are here

  createPost();
};

El resultado hasta ahora: 馃憞

resultado hasta ahora

Hasta ahora todo bien chicos, casi hemos terminado con el proyecto 1.

Hasta ahora, todo bien

C贸mo eliminar una publicaci贸n

Para eliminar una publicaci贸n, en primer lugar, creemos una funci贸n dentro de nuestro archivo javascript:

let deletePost = (e) => {};

A continuaci贸n, activamos esta deletePostfunci贸n dentro de todos nuestros 铆conos de eliminaci贸n usando un atributo onClick. Escribir谩 estas l铆neas en HTML y en el literal de la plantilla. 馃憞

<i onClick="deletePost(this)" class="fas fa-trash-alt"></i>

La thispalabra clave se referir谩 al elemento que dispar贸 el evento. en nuestro caso, el thisse refiere al bot贸n eliminar.

Mire con cuidado, el padre del bot贸n Eliminar es el tramo con opciones de nombre de clase. El padre del lapso es el div. Entonces, escribimos parentElementdos veces para que podamos saltar del 铆cono de eliminar al div y apuntarlo directamente para eliminarlo.

Terminemos nuestra funci贸n. 馃憞

let deletePost = (e) => {
  e.parentElement.parentElement.remove();
};

El resultado hasta ahora: 馃憞

eliminar el resultado de una publicaci贸n

C贸mo editar una publicaci贸n

Para editar una publicaci贸n, en primer lugar, creemos una funci贸n dentro de nuestro archivo JavaScript:

let editPost = (e) => {};

A continuaci贸n, activamos esta editPostfunci贸n dentro de todos nuestros 铆conos de edici贸n usando un atributo onClick. Escribir谩 estas l铆neas en HTML y en el literal de la plantilla. 馃憞

<i onClick="editPost(this)" class="fas fa-edit"></i>

La thispalabra clave se referir谩 al elemento que dispar贸 el evento. En nuestro caso, el thisse refiere al bot贸n editar.

Mire con cuidado, el padre del bot贸n de edici贸n es el tramo con opciones de nombre de clase. El padre del lapso es el div. Entonces, escribimos parentElementdos veces para que podamos saltar del 铆cono de edici贸n al div y apuntarlo directamente para eliminarlo.

Luego, cualquier dato que est茅 dentro de la publicaci贸n, lo traemos de vuelta al campo de entrada para editarlo.

Terminemos nuestra funci贸n. 馃憞

let editPost = (e) => {
  input.value = e.parentElement.previousElementSibling.innerHTML;
  e.parentElement.parentElement.remove();
};

El resultado hasta ahora: 馃憞

Editar el resultado de una publicaci贸n

隆Tomar un descanso!

Tomar un descanso

Felicitaciones a todos por completar el proyecto 1. Ahora, 隆t贸mense un peque帽o descanso!

C贸mo hacer una aplicaci贸n de tareas pendientes usando operaciones CRUD

Hagamos una aplicaci贸n de tareas

Comencemos a hacer el proyecto 2, que es una aplicaci贸n To-Do.

Configuraci贸n del proyecto

configuraci贸n del proyecto

Para este proyecto, seguiremos los siguientes pasos:

  • Cree 3 archivos llamados index.html, style.css y main.js
  • Vincule los archivos JavaScript y CSS a index.html
  • Inicie nuestro servidor en vivo

HTML

Escribe este c贸digo de inicio dentro del archivo HTML: 馃憞

<div class="app">
  <h4 class="mb-3">TODO App</h4>

  <div id="addNew" data-bs-toggle="modal" data-bs-target="#form">
    <span>Add New Task</span>
    <i class="fas fa-plus"></i>
  </div>
</div>

El div con una identificaci贸n addNewes el bot贸n que abrir谩 el modal. El intervalo se mostrar谩 en el bot贸n. El ies el 铆cono de font-awesome.

Vamos a usar bootstrap para hacer nuestro modal. Usaremos el modal para agregar nuevas tareas. Para eso, agregue el enlace CDN de arranque dentro de la etiqueta principal. 馃憞

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

Para ver las tareas creadas, usaremos un div con una tarea de identificaci贸n, dentro del div con la aplicaci贸n de nombre de clase. 馃憞

<h5 class="text-center my-3">Tasks</h5>

<div id="tasks"></div>

Inserte el CDN font-awesome dentro de la etiqueta principal para usar fuentes en nuestro proyecto 馃憞

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Copie y pegue el c贸digo a continuaci贸n que proviene del modal de arranque. Lleva un formulario con 3 campos de entrada y un bot贸n de env铆o. Si lo desea, puede buscar en el sitio web de Bootstrap escribiendo 'modal' en la barra de b煤squeda.

<!-- Modal -->
<form
  class="modal fade"
  id="form"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>Task Title</p>
        <input type="text" class="form-control" name="" id="textInput" />
        <div id="msg"></div>
        <br />
        <p>Due Date</p>
        <input type="date" class="form-control" name="" id="dateInput" />
        <br />
        <p>Description</p>
        <textarea
          name=""
          class="form-control"
          id="textarea"
          cols="30"
          rows="5"
        ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="submit" id="add" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</form>

El resultado hasta ahora: 馃憞

Configuraci贸n del archivo HTML

Hemos terminado con la configuraci贸n del archivo HTML. Comencemos el CSS.

CSS

Agregar la parte css

Agregue estos estilos en el cuerpo para que podamos mantener nuestra aplicaci贸n en el centro exacto de la pantalla.

body {
  font-family: sans-serif;
  margin: 0 50px;
  background-color: #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Apliquemos estilo al div con la aplicaci贸n classname. 馃憞

.app {
  background-color: #fff;
  width: 300px;
  height: 500px;
  border: 5px solid #abcea1;
  border-radius: 8px;
  padding: 15px;
}

El resultado hasta ahora: 馃憞

Estilos de aplicaciones

Ahora, dise帽emos el bot贸n con el id addNew. 馃憞

#addNew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(171, 206, 161, 0.35);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.fa-plus {
  background-color: #abcea1;
  padding: 3px;
  border-radius: 3px;
}

El resultado hasta ahora: 馃憞

Agregar nueva tarea Bot贸n

Si hace clic en el bot贸n, el modal aparece as铆: 馃憞

Estallidos modales

Agregar el JS

Agregar el JavaScript

En el archivo JavaScript, en primer lugar, seleccione todos los selectores del HTML que necesitamos usar. 馃憞

let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let dateInput = document.getElementById("dateInput");
let textarea = document.getElementById("textarea");
let msg = document.getElementById("msg");
let tasks = document.getElementById("tasks");
let add = document.getElementById("add");

Validaciones de formulario

No podemos permitir que un usuario env铆e campos de entrada en blanco. Entonces, necesitamos validar los campos de entrada. 馃憞

form.addEventListener("submit", (e) => {
  e.preventDefault();
  formValidation();
});

let formValidation = () => {
  if (textInput.value === "") {
    console.log("failure");
    msg.innerHTML = "Task cannot be blank";
  } else {
    console.log("success");
    msg.innerHTML = "";
  }
};

Adem谩s, agregue esta l铆nea dentro del CSS:

#msg {
  color: red;
}

El resultado hasta ahora: 馃憞

descripci贸n de la imagen

Como puede ver, la validaci贸n est谩 funcionando. El c贸digo JavaScript no permite que el usuario env铆e campos de entrada en blanco; de lo contrario, ver谩 un mensaje de error.

C贸mo recopilar datos y utilizar el almacenamiento local

Independientemente de las entradas que escriba el usuario, debemos recopilarlas y almacenarlas en el almacenamiento local.

Primero, recopilamos los datos de los campos de entrada, usando la funci贸n named acceptDatay una matriz llamada data. Luego los empujamos dentro del almacenamiento local as铆: 馃憞

let data = [];

let acceptData = () => {
  data.push({
    text: textInput.value,
    date: dateInput.value,
    description: textarea.value,
  });

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

Tambi茅n tenga en cuenta que esto nunca funcionar谩 a menos que invoque la funci贸n acceptDatadentro de la declaraci贸n else de la validaci贸n del formulario. S铆guenos aqu铆: 馃憞

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
  }
};

Es posible que haya notado que el modal no se cierra autom谩ticamente. Para resolver esto, escribe esta peque帽a funci贸n dentro de la instrucci贸n else de la validaci贸n del formulario: 馃憞

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
    add.setAttribute("data-bs-dismiss", "modal");
    add.click();

    (() => {
      add.setAttribute("data-bs-dismiss", "");
    })();
  }
};

Si abre las herramientas de desarrollo de Chrome, vaya a la aplicaci贸n y abra el almacenamiento local. Puedes ver este resultado: 馃憞

Resultado de almacenamiento local

C贸mo crear nuevas tareas

Para crear una nueva tarea, necesitamos crear una funci贸n, usar literales de plantilla para crear los elementos HTML y usar un mapa para insertar los datos recopilados del usuario dentro de la plantilla. S铆guenos aqu铆: 馃憞

let createTasks = () => {
  tasks.innerHTML = "";
  data.map((x, y) => {
    return (tasks.innerHTML += `
    <div id=${y}>
          <span class="fw-bold">${x.text}</span>
          <span class="small text-secondary">${x.date}</span>
          <p>${x.description}</p>
  
          <span class="options">
            <i onClick= "editTask(this)" data-bs-toggle="modal" data-bs-target="#form" class="fas fa-edit"></i>
            <i onClick ="deleteTask(this);createTasks()" class="fas fa-trash-alt"></i>
          </span>
        </div>
    `);
  });

  resetForm();
};

Tambi茅n tenga en cuenta que la funci贸n nunca se ejecutar谩 a menos que la invoque dentro de la acceptDatafunci贸n, as铆: 馃憞

let acceptData = () => {
  // Other codes are here

  createTasks();
};

Una vez que hayamos terminado de recopilar y aceptar datos del usuario, debemos borrar los campos de entrada. Para eso creamos una funci贸n llamada resetForm. S铆guenos: 馃憞

let resetForm = () => {
  textInput.value = "";
  dateInput.value = "";
  textarea.value = "";
};

El resultado hasta ahora: 馃憞

Adici贸n de tarjetas de tareas

Como puede ver, no hay estilos con la tarjeta. Agreguemos algunos estilos: 馃憞

#tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#tasks div {
  border: 3px solid #abcea1;
  background-color: #e2eede;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
}

Dale estilo a los botones de editar y eliminar con este c贸digo: 馃憞

#tasks div .options {
  justify-self: center;
  display: flex;
  gap: 20px;
}

#tasks div .options i {
  cursor: pointer;
}

El resultado hasta ahora: 馃憞

Plantillas de tarjetas de estilos

Funci贸n para eliminar una tarea

Mire aqu铆 cuidadosamente, agregu茅 3 l铆neas de c贸digo dentro de la funci贸n.

  • La primera l铆nea eliminar谩 el elemento HTML de la pantalla,
  • la segunda l铆nea eliminar谩 la tarea objetivo de la matriz de datos,
  • y la tercera l铆nea actualizar谩 el almacenamiento local con los nuevos datos.
let deleteTask = (e) => {
  e.parentElement.parentElement.remove();

  data.splice(e.parentElement.parentElement.id, 1);

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

Ahora cree una tarea ficticia e intente eliminarla. El resultado hasta ahora se ve as铆: 馃憞

descripci贸n de la imagen

Funci贸n para editar tareas

Mire aqu铆 cuidadosamente, agregu茅 5 l铆neas de c贸digo dentro de la funci贸n.

  • La l铆nea 1 apunta a la tarea que seleccionamos para editar
  • Las l铆neas 2, 3 y 4 apuntan a los valores [tarea, fecha, descripci贸n] de la tarea que seleccionamos para editar
  • la l铆nea 5 est谩 ejecutando la funci贸n de eliminaci贸n para eliminar los datos seleccionados tanto del almacenamiento local, el elemento HTML y la matriz de datos.
let editTask = (e) => {
  let selectedTask = e.parentElement.parentElement;

  textInput.value = selectedTask.children[0].innerHTML;
  dateInput.value = selectedTask.children[1].innerHTML;
  textarea.value = selectedTask.children[2].innerHTML;

  deleteTask(e);
};

Ahora, intente crear una tarea ficticia y ed铆tela. El resultado hasta ahora: 馃憞

Edici贸n de una tarea

C贸mo obtener datos del almacenamiento local

Si actualiza la p谩gina, notar谩 que todos sus datos han desaparecido. Para resolver ese problema, ejecutamos un IIFE (expresi贸n de funci贸n invocada inmediatamente) para recuperar los datos del almacenamiento local. S铆guenos: 馃憞

(() => {
  data = JSON.parse(localStorage.getItem("data")) || [];
  console.log(data);
  createTasks();
})();

Ahora los datos aparecer谩n incluso si actualiza la p谩gina.

Conclusi贸n

Felicidades

Felicitaciones por completar con 茅xito este tutorial. Ha aprendido a crear una aplicaci贸n de lista de tareas mediante operaciones CRUD. Ahora, puede crear su propia aplicaci贸n CRUD usando este tutorial.

Aqu铆 est谩 tu medalla por leer hasta el final. 鉂わ笍

Fuente: https://www.freecodecamp.org/news/learn-crud-operations-in-javascript-by-building-todo-app/ 

#javascript #crud #operator #todoapp

What is GEEK

Buddha Community

C贸mo Hacer Operaciones CRUD En JavaScript Creando Una Aplicaci贸n Todo

C贸mo Hacer Operaciones CRUD En JavaScript Creando Una Aplicaci贸n Todo

Hoy vamos a aprender c贸mo hacer operaciones CRUD en JavaScript creando una aplicaci贸n Todo. Empecemos 馃敟

Esta es la aplicaci贸n que estamos haciendo hoy:

Aplicaci贸n que estamos haciendo hoy

驴Qu茅 es CRUD?

descripci贸n de la imagen

CRUD significa -

  • c: crear
  • R: Leer
  • U: Actualizar
  • D: Eliminar

CRUD de forma completa

CRUD es un tipo de mecanismo que le permite crear datos, leer datos, editarlos y eliminar esos datos. En nuestro caso, vamos a crear una aplicaci贸n Todo, por lo que tendremos 4 opciones para crear tareas, leer tareas, actualizar tareas o eliminar tareas.

Comprender los principios CRUD

Antes de comenzar el tutorial, primero, comprendamos los principios CRUD. Para eso, creemos una aplicaci贸n de redes sociales muy, muy simple.

Proyecto de aplicaci贸n de redes sociales

Configuraci贸n

Configuraci贸n del proyecto

Para este proyecto, seguiremos los siguientes pasos:

  • Cree 3 archivos llamados index.html, style.css y main.js
  • Vincule el archivo JavaScript y CSS a index.html
  • Inicie su servidor en vivo

HTML

Dentro de la etiqueta del cuerpo, crea un div con un nombre de clase .container. Ah铆 tendremos 2 secciones, .lefty .right馃憞

<body>
  <h1>Social Media App</h1>
  <div class="container">

    <div class="left"></div>
    <div class="right"></div>

  </div>
</body>

En el lado izquierdo, crearemos nuestras publicaciones. En el lado derecho, podemos ver, actualizar y eliminar nuestras publicaciones. Ahora, crea un formulario dentro de la etiqueta div .left 馃憞

<div class="left">
  <form id="form">
    <label for="post"> Write your post here</label>
    <br><br>
    <textarea name="post" id="input" cols="30" rows="10"></textarea>
    <br> <br>
    <div id="msg"></div>
    <button type="submit">Post</button>
  </form>
</div>

Escribe este c贸digo dentro del HTML para que podamos mostrar nuestra publicaci贸n en el lado derecho 馃憞

<div class="right">
  <h3>Your posts here</h3>
  <div id="posts"></div>
</div>

A continuaci贸n, insertaremos el CDN font-awesome dentro de la etiqueta de encabezado para usar sus fuentes en nuestro proyecto 馃憞

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Ahora, vamos a hacer algunas publicaciones de muestra con 铆conos de eliminar y editar. Escribe este c贸digo dentro del div con el id #posts: 馃憞

<div id="posts">
  <div>
    <p>Hello world post 1</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>

  <div >
    <p>Hello world post 2</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>
</div>

El resultado hasta ahora se ve as铆:

Resultado de marcado HTML

CSS

Agregar CSS para el proyecto 1

Manteng谩moslo simple. Escribe estos estilos dentro de tu hoja de estilo: 馃憞

body {
  font-family: sans-serif;
  margin: 0 50px;
}

.container {
  display: flex;
  gap: 50px;
}

#posts {
  width: 400px;
}

i {
  cursor: pointer;
}

Ahora, escribe estos estilos para los 铆conos de opci贸n y div posteriores: 馃憞

#posts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options {
  display: flex;
  gap: 25px;
}

#msg {
  color: red;
}

Los resultados hasta ahora se ven as铆: 馃憞

El resultado despu茅s de agregar el proyecto de parte css 1

Parte de JavaScript

Comenzando la parte de javascript

De acuerdo con este diagrama de flujo, seguiremos adelante con el proyecto. No te preocupes, te explicar茅 todo en el camino. 馃憞

diagrama de flujo

Validaci贸n de formulario

Primero, apuntemos a todos los selectores de ID del HTML en JavaScript. As铆: 馃憞

let form = document.getElementById("form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");

Luego, cree un detector de eventos de env铆o para el formulario para que pueda evitar el comportamiento predeterminado de nuestra aplicaci贸n. Al mismo tiempo, crearemos una funci贸n llamada formValidation. 馃憞

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("button clicked");

  formValidation();
});

let formValidation = () => {};

Ahora, vamos a hacer una declaraci贸n if else dentro de nuestra formValidationfunci贸n. Esto nos ayudar谩 a evitar que los usuarios env铆en campos de entrada en blanco. 馃憞

let formValidation = () => {
  if (input.value === "") {
    msg.innerHTML = "Post cannot be blank";
    console.log("failure");
  } else {
    console.log("successs");
    msg.innerHTML = "";
  }
};

Aqu铆 est谩 el resultado hasta ahora: 馃憞

7sb8faq21j5dzy9vlswj

Como puede ver, tambi茅n aparecer谩 un mensaje si el usuario intenta enviar el formulario en blanco.

C贸mo aceptar datos de campos de entrada

Cualesquiera que sean los datos que obtengamos de los campos de entrada, los almacenaremos en un objeto. Vamos a crear un objeto llamado data. Y crea una funci贸n llamada acceptData: 馃憞

let data = {};

let acceptData = () => {};

La idea principal es que, usando la funci贸n, recopilamos datos de las entradas y los almacenamos en nuestro objeto llamado data. Ahora terminemos de construir nuestra acceptDatafunci贸n.

let acceptData = () => {
  data["text"] = input.value;
  console.log(data);
};

Adem谩s, necesitamos que la acceptDatafunci贸n funcione cuando el usuario haga clic en el bot贸n Enviar. Para eso, activaremos esta funci贸n en la instrucci贸n else de nuestra formValidationfunci贸n. 馃憞

let formValidation = () => {
  if (input.value === "") {
    // Other codes are here
  } else {
    // Other codes are here
    acceptData();
  }
};

Cuando ingresamos datos y enviamos el formulario, en la consola podemos ver un objeto que contiene los valores de entrada de nuestro usuario. As铆: 馃憞

resultado hasta ahora en la consola

C贸mo crear publicaciones usando literales de plantilla de JavaScript

Para publicar nuestros datos de entrada en el lado derecho, necesitamos crear un elemento div y agregarlo al div de publicaciones. Primero, creemos una funci贸n y escribamos estas l铆neas: 馃憞

let createPost = () => {
  posts.innerHTML += ``;
};

Los acentos graves son literales de plantilla. Funcionar谩 como una plantilla para nosotros. Aqu铆, necesitamos 3 cosas: un div principal, la entrada en s铆 y el div de opciones que lleva los 铆conos de edici贸n y eliminaci贸n. Terminemos nuestra funci贸n 馃憞

let createPost = () => {
  posts.innerHTML += `
  <div>
    <p>${data.text}</p>
    <span class="options">
      <i onClick="editPost(this)" class="fas fa-edit"></i>
      <i onClick="deletePost(this)" class="fas fa-trash-alt"></i>
    </span>
  </div>
  `;
  input.value = "";
};

En nuestra acceptdatafunci贸n, activaremos nuestra createPostfunci贸n. As铆: 馃憞

let acceptData = () => {
  // Other codes are here

  createPost();
};

El resultado hasta ahora: 馃憞

resultado hasta ahora

Hasta ahora todo bien chicos, casi hemos terminado con el proyecto 1.

Hasta ahora, todo bien

C贸mo eliminar una publicaci贸n

Para eliminar una publicaci贸n, en primer lugar, creemos una funci贸n dentro de nuestro archivo javascript:

let deletePost = (e) => {};

A continuaci贸n, activamos esta deletePostfunci贸n dentro de todos nuestros 铆conos de eliminaci贸n usando un atributo onClick. Escribir谩 estas l铆neas en HTML y en el literal de la plantilla. 馃憞

<i onClick="deletePost(this)" class="fas fa-trash-alt"></i>

La thispalabra clave se referir谩 al elemento que dispar贸 el evento. en nuestro caso, el thisse refiere al bot贸n eliminar.

Mire con cuidado, el padre del bot贸n Eliminar es el tramo con opciones de nombre de clase. El padre del lapso es el div. Entonces, escribimos parentElementdos veces para que podamos saltar del 铆cono de eliminar al div y apuntarlo directamente para eliminarlo.

Terminemos nuestra funci贸n. 馃憞

let deletePost = (e) => {
  e.parentElement.parentElement.remove();
};

El resultado hasta ahora: 馃憞

eliminar el resultado de una publicaci贸n

C贸mo editar una publicaci贸n

Para editar una publicaci贸n, en primer lugar, creemos una funci贸n dentro de nuestro archivo JavaScript:

let editPost = (e) => {};

A continuaci贸n, activamos esta editPostfunci贸n dentro de todos nuestros 铆conos de edici贸n usando un atributo onClick. Escribir谩 estas l铆neas en HTML y en el literal de la plantilla. 馃憞

<i onClick="editPost(this)" class="fas fa-edit"></i>

La thispalabra clave se referir谩 al elemento que dispar贸 el evento. En nuestro caso, el thisse refiere al bot贸n editar.

Mire con cuidado, el padre del bot贸n de edici贸n es el tramo con opciones de nombre de clase. El padre del lapso es el div. Entonces, escribimos parentElementdos veces para que podamos saltar del 铆cono de edici贸n al div y apuntarlo directamente para eliminarlo.

Luego, cualquier dato que est茅 dentro de la publicaci贸n, lo traemos de vuelta al campo de entrada para editarlo.

Terminemos nuestra funci贸n. 馃憞

let editPost = (e) => {
  input.value = e.parentElement.previousElementSibling.innerHTML;
  e.parentElement.parentElement.remove();
};

El resultado hasta ahora: 馃憞

Editar el resultado de una publicaci贸n

隆Tomar un descanso!

Tomar un descanso

Felicitaciones a todos por completar el proyecto 1. Ahora, 隆t贸mense un peque帽o descanso!

C贸mo hacer una aplicaci贸n de tareas pendientes usando operaciones CRUD

Hagamos una aplicaci贸n de tareas

Comencemos a hacer el proyecto 2, que es una aplicaci贸n To-Do.

Configuraci贸n del proyecto

configuraci贸n del proyecto

Para este proyecto, seguiremos los siguientes pasos:

  • Cree 3 archivos llamados index.html, style.css y main.js
  • Vincule los archivos JavaScript y CSS a index.html
  • Inicie nuestro servidor en vivo

HTML

Escribe este c贸digo de inicio dentro del archivo HTML: 馃憞

<div class="app">
  <h4 class="mb-3">TODO App</h4>

  <div id="addNew" data-bs-toggle="modal" data-bs-target="#form">
    <span>Add New Task</span>
    <i class="fas fa-plus"></i>
  </div>
</div>

El div con una identificaci贸n addNewes el bot贸n que abrir谩 el modal. El intervalo se mostrar谩 en el bot贸n. El ies el 铆cono de font-awesome.

Vamos a usar bootstrap para hacer nuestro modal. Usaremos el modal para agregar nuevas tareas. Para eso, agregue el enlace CDN de arranque dentro de la etiqueta principal. 馃憞

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

Para ver las tareas creadas, usaremos un div con una tarea de identificaci贸n, dentro del div con la aplicaci贸n de nombre de clase. 馃憞

<h5 class="text-center my-3">Tasks</h5>

<div id="tasks"></div>

Inserte el CDN font-awesome dentro de la etiqueta principal para usar fuentes en nuestro proyecto 馃憞

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Copie y pegue el c贸digo a continuaci贸n que proviene del modal de arranque. Lleva un formulario con 3 campos de entrada y un bot贸n de env铆o. Si lo desea, puede buscar en el sitio web de Bootstrap escribiendo 'modal' en la barra de b煤squeda.

<!-- Modal -->
<form
  class="modal fade"
  id="form"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>Task Title</p>
        <input type="text" class="form-control" name="" id="textInput" />
        <div id="msg"></div>
        <br />
        <p>Due Date</p>
        <input type="date" class="form-control" name="" id="dateInput" />
        <br />
        <p>Description</p>
        <textarea
          name=""
          class="form-control"
          id="textarea"
          cols="30"
          rows="5"
        ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="submit" id="add" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</form>

El resultado hasta ahora: 馃憞

Configuraci贸n del archivo HTML

Hemos terminado con la configuraci贸n del archivo HTML. Comencemos el CSS.

CSS

Agregar la parte css

Agregue estos estilos en el cuerpo para que podamos mantener nuestra aplicaci贸n en el centro exacto de la pantalla.

body {
  font-family: sans-serif;
  margin: 0 50px;
  background-color: #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Apliquemos estilo al div con la aplicaci贸n classname. 馃憞

.app {
  background-color: #fff;
  width: 300px;
  height: 500px;
  border: 5px solid #abcea1;
  border-radius: 8px;
  padding: 15px;
}

El resultado hasta ahora: 馃憞

Estilos de aplicaciones

Ahora, dise帽emos el bot贸n con el id addNew. 馃憞

#addNew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(171, 206, 161, 0.35);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.fa-plus {
  background-color: #abcea1;
  padding: 3px;
  border-radius: 3px;
}

El resultado hasta ahora: 馃憞

Agregar nueva tarea Bot贸n

Si hace clic en el bot贸n, el modal aparece as铆: 馃憞

Estallidos modales

Agregar el JS

Agregar el JavaScript

En el archivo JavaScript, en primer lugar, seleccione todos los selectores del HTML que necesitamos usar. 馃憞

let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let dateInput = document.getElementById("dateInput");
let textarea = document.getElementById("textarea");
let msg = document.getElementById("msg");
let tasks = document.getElementById("tasks");
let add = document.getElementById("add");

Validaciones de formulario

No podemos permitir que un usuario env铆e campos de entrada en blanco. Entonces, necesitamos validar los campos de entrada. 馃憞

form.addEventListener("submit", (e) => {
  e.preventDefault();
  formValidation();
});

let formValidation = () => {
  if (textInput.value === "") {
    console.log("failure");
    msg.innerHTML = "Task cannot be blank";
  } else {
    console.log("success");
    msg.innerHTML = "";
  }
};

Adem谩s, agregue esta l铆nea dentro del CSS:

#msg {
  color: red;
}

El resultado hasta ahora: 馃憞

descripci贸n de la imagen

Como puede ver, la validaci贸n est谩 funcionando. El c贸digo JavaScript no permite que el usuario env铆e campos de entrada en blanco; de lo contrario, ver谩 un mensaje de error.

C贸mo recopilar datos y utilizar el almacenamiento local

Independientemente de las entradas que escriba el usuario, debemos recopilarlas y almacenarlas en el almacenamiento local.

Primero, recopilamos los datos de los campos de entrada, usando la funci贸n named acceptDatay una matriz llamada data. Luego los empujamos dentro del almacenamiento local as铆: 馃憞

let data = [];

let acceptData = () => {
  data.push({
    text: textInput.value,
    date: dateInput.value,
    description: textarea.value,
  });

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

Tambi茅n tenga en cuenta que esto nunca funcionar谩 a menos que invoque la funci贸n acceptDatadentro de la declaraci贸n else de la validaci贸n del formulario. S铆guenos aqu铆: 馃憞

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
  }
};

Es posible que haya notado que el modal no se cierra autom谩ticamente. Para resolver esto, escribe esta peque帽a funci贸n dentro de la instrucci贸n else de la validaci贸n del formulario: 馃憞

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
    add.setAttribute("data-bs-dismiss", "modal");
    add.click();

    (() => {
      add.setAttribute("data-bs-dismiss", "");
    })();
  }
};

Si abre las herramientas de desarrollo de Chrome, vaya a la aplicaci贸n y abra el almacenamiento local. Puedes ver este resultado: 馃憞

Resultado de almacenamiento local

C贸mo crear nuevas tareas

Para crear una nueva tarea, necesitamos crear una funci贸n, usar literales de plantilla para crear los elementos HTML y usar un mapa para insertar los datos recopilados del usuario dentro de la plantilla. S铆guenos aqu铆: 馃憞

let createTasks = () => {
  tasks.innerHTML = "";
  data.map((x, y) => {
    return (tasks.innerHTML += `
    <div id=${y}>
          <span class="fw-bold">${x.text}</span>
          <span class="small text-secondary">${x.date}</span>
          <p>${x.description}</p>
  
          <span class="options">
            <i onClick= "editTask(this)" data-bs-toggle="modal" data-bs-target="#form" class="fas fa-edit"></i>
            <i onClick ="deleteTask(this);createTasks()" class="fas fa-trash-alt"></i>
          </span>
        </div>
    `);
  });

  resetForm();
};

Tambi茅n tenga en cuenta que la funci贸n nunca se ejecutar谩 a menos que la invoque dentro de la acceptDatafunci贸n, as铆: 馃憞

let acceptData = () => {
  // Other codes are here

  createTasks();
};

Una vez que hayamos terminado de recopilar y aceptar datos del usuario, debemos borrar los campos de entrada. Para eso creamos una funci贸n llamada resetForm. S铆guenos: 馃憞

let resetForm = () => {
  textInput.value = "";
  dateInput.value = "";
  textarea.value = "";
};

El resultado hasta ahora: 馃憞

Adici贸n de tarjetas de tareas

Como puede ver, no hay estilos con la tarjeta. Agreguemos algunos estilos: 馃憞

#tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#tasks div {
  border: 3px solid #abcea1;
  background-color: #e2eede;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
}

Dale estilo a los botones de editar y eliminar con este c贸digo: 馃憞

#tasks div .options {
  justify-self: center;
  display: flex;
  gap: 20px;
}

#tasks div .options i {
  cursor: pointer;
}

El resultado hasta ahora: 馃憞

Plantillas de tarjetas de estilos

Funci贸n para eliminar una tarea

Mire aqu铆 cuidadosamente, agregu茅 3 l铆neas de c贸digo dentro de la funci贸n.

  • La primera l铆nea eliminar谩 el elemento HTML de la pantalla,
  • la segunda l铆nea eliminar谩 la tarea objetivo de la matriz de datos,
  • y la tercera l铆nea actualizar谩 el almacenamiento local con los nuevos datos.
let deleteTask = (e) => {
  e.parentElement.parentElement.remove();

  data.splice(e.parentElement.parentElement.id, 1);

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

Ahora cree una tarea ficticia e intente eliminarla. El resultado hasta ahora se ve as铆: 馃憞

descripci贸n de la imagen

Funci贸n para editar tareas

Mire aqu铆 cuidadosamente, agregu茅 5 l铆neas de c贸digo dentro de la funci贸n.

  • La l铆nea 1 apunta a la tarea que seleccionamos para editar
  • Las l铆neas 2, 3 y 4 apuntan a los valores [tarea, fecha, descripci贸n] de la tarea que seleccionamos para editar
  • la l铆nea 5 est谩 ejecutando la funci贸n de eliminaci贸n para eliminar los datos seleccionados tanto del almacenamiento local, el elemento HTML y la matriz de datos.
let editTask = (e) => {
  let selectedTask = e.parentElement.parentElement;

  textInput.value = selectedTask.children[0].innerHTML;
  dateInput.value = selectedTask.children[1].innerHTML;
  textarea.value = selectedTask.children[2].innerHTML;

  deleteTask(e);
};

Ahora, intente crear una tarea ficticia y ed铆tela. El resultado hasta ahora: 馃憞

Edici贸n de una tarea

C贸mo obtener datos del almacenamiento local

Si actualiza la p谩gina, notar谩 que todos sus datos han desaparecido. Para resolver ese problema, ejecutamos un IIFE (expresi贸n de funci贸n invocada inmediatamente) para recuperar los datos del almacenamiento local. S铆guenos: 馃憞

(() => {
  data = JSON.parse(localStorage.getItem("data")) || [];
  console.log(data);
  createTasks();
})();

Ahora los datos aparecer谩n incluso si actualiza la p谩gina.

Conclusi贸n

Felicidades

Felicitaciones por completar con 茅xito este tutorial. Ha aprendido a crear una aplicaci贸n de lista de tareas mediante operaciones CRUD. Ahora, puede crear su propia aplicaci贸n CRUD usando este tutorial.

Aqu铆 est谩 tu medalla por leer hasta el final. 鉂わ笍

Fuente: https://www.freecodecamp.org/news/learn-crud-operations-in-javascript-by-building-todo-app/ 

#javascript #crud #operator #todoapp

Thai  Son

Thai Son

1650865080

CRUD Trong JavaScript B岷眓g C谩ch X芒y D峄眓g 峄╪g D峄g TODO

H么m nay ch煤ng ta s岷 h峄峜 c谩ch th峄眂 hi峄噉 c谩c Thao t谩c CRUD trong JavaScript b岷眓g c谩ch t岷 峄╪g d峄g Todo. B岷痶 膽岷 th么i 馃敟

膼芒y l脿 峄﹏g d峄g ch煤ng t么i t岷 ra h么m nay:

峄╪g d峄g m脿 ch煤ng t么i 膽ang l脿m h么m nay

CRUD l脿 g矛?

M么 t岷 h矛nh 岷h

CRUD l脿 vi岷縯 t岷痶 c峄 -

  • C: Create
  • R: Read
  • U: Update
  • D: Delete

CRUD 膽岷 膽峄

CRUD l脿 m峄檛 lo岷 c啤 ch岷 cho ph茅p b岷 t岷 d峄 li峄噓, 膽峄峜 d峄 li峄噓, ch峄塶h s峄璦 v脿 x贸a c谩c d峄 li峄噓 膽贸. Trong tr瓢峄漬g h峄 c峄 ch煤ng t么i, ch煤ng t么i s岷 t岷 m峄檛 峄﹏g d峄g Todo, v矛 v岷瓂 ch煤ng t么i s岷 c贸 4 t霉y ch峄峮 膽峄 t岷 t谩c v峄, 膽峄峜 t谩c v峄, c岷璸 nh岷璽 t谩c v峄 ho岷穋 x贸a t谩c v峄.

Hi峄僽 c谩c nguy锚n t岷痗 CRUD

Tr瓢峄沜 khi b岷痶 膽岷 h瓢峄沶g d岷玭, tr瓢峄沜 ti锚n, ch煤ng ta h茫y hi峄僽 c谩c nguy锚n t岷痗 CRUD. 膼峄 l脿m 膽瓢峄 膽i峄乽 膽贸, h茫y t岷 m峄檛 峄╪g d峄g Truy峄乶 th么ng X茫 h峄檌 r岷 膽啤n gi岷.

D峄 谩n 峄﹏g d峄g truy峄乶 th么ng x茫 h峄檌

C脿i 膽岷穞

Thi岷縯 l岷璸 d峄 谩n

膼峄慽 v峄沬 d峄 谩n n脿y, ch煤ng t么i s岷 th峄眂 hi峄噉 theo c谩c b瓢峄沜 sau:

  • T岷 3 t峄噋 c贸 t锚n index.html, style.css v脿 main.js
  • Li锚n k岷縯 t峄噋 JavaScript v脿 CSS v峄沬 index.html
  • Kh峄焛 膽峄檔g m谩y ch峄 tr峄眂 ti岷縫 c峄 b岷

HTML

B锚n trong th岷 body, h茫y t岷 m峄檛 div c贸 t锚n l峄沺 .container. 峄 膽贸, ch煤ng ta s岷 c贸 2 ph岷, .leftv脿 .right馃憞

<body>
  <h1>Social Media App</h1>
  <div class="container">

    <div class="left"></div>
    <div class="right"></div>

  </div>
</body>

峄 ph铆a b锚n tr谩i, ch煤ng t么i s岷 t岷 c谩c b脿i 膽膬ng c峄 ch煤ng t么i. 峄 ph铆a b锚n ph岷, ch煤ng ta c贸 th峄 xem, c岷璸 nh岷璽 v脿 x贸a c谩c b脿i 膽膬ng c峄 m矛nh. B芒y gi峄, h茫y t岷 m峄檛 bi峄僽 m岷玼 b锚n trong th岷 div .left 馃憞

<div class="left">
  <form id="form">
    <label for="post"> Write your post here</label>
    <br><br>
    <textarea name="post" id="input" cols="30" rows="10"></textarea>
    <br> <br>
    <div id="msg"></div>
    <button type="submit">Post</button>
  </form>
</div>

Vi岷縯 m茫 n脿y b锚n trong HTML 膽峄 ch煤ng t么i c贸 th峄 hi峄僴 th峄 b脿i 膽膬ng c峄 m矛nh 峄 ph铆a b锚n ph岷 馃憞

<div class="right">
  <h3>Your posts here</h3>
  <div id="posts"></div>
</div>

Ti岷縫 theo, ch煤ng t么i s岷 ch猫n CDN ph么ng ch峄 tuy峄噒 v峄漣 b锚n trong th岷 head 膽峄 s峄 d峄g ph么ng ch峄 c峄 n贸 trong d峄 谩n c峄 ch煤ng t么i 馃憞

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

B芒y gi峄, ch煤ng t么i s岷 t岷 m峄檛 s峄 b脿i 膽膬ng m岷玼 v峄沬 c谩c bi峄僽 t瓢峄g x贸a v脿 ch峄塶h s峄璦. Vi岷縯 m茫 n脿y b锚n trong div v峄沬 id #posts: 馃憞

<div id="posts">
  <div>
    <p>Hello world post 1</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>

  <div >
    <p>Hello world post 2</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>
</div>

K岷縯 qu岷 cho 膽岷縩 nay tr么ng nh瓢 th岷 n脿y:

K岷縯 qu岷 膽谩nh d岷 HTML

CSS

Th锚m CSS cho d峄 谩n 1

H茫y gi峄 n贸 膽啤n gi岷. Vi岷縯 c谩c ki峄僽 n脿y b锚n trong b岷g 膽峄媙h ki峄僽 c峄 b岷: 馃憞

body {
  font-family: sans-serif;
  margin: 0 50px;
}

.container {
  display: flex;
  gap: 50px;
}

#posts {
  width: 400px;
}

i {
  cursor: pointer;
}

B芒y gi峄, h茫y vi岷縯 c谩c ki峄僽 n脿y cho c谩c bi峄僽 t瓢峄g div v脿 t霉y ch峄峮 c峄 b脿i 膽膬ng: 馃憞

#posts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options {
  display: flex;
  gap: 25px;
}

#msg {
  color: red;
}

K岷縯 qu岷 cho 膽岷縩 nay tr么ng nh瓢 th岷 n脿y: 馃憞

K岷縯 qu岷 sau khi th锚m d峄 谩n ph岷 css 1

Ph岷 JavaScript

B岷痶 膽岷 ph岷 javascript

Theo bi峄僽 膽峄 n脿y, ch煤ng t么i s岷 ti岷縫 t峄 v峄沬 d峄 谩n. 膼峄玭g lo l岷痭g, t么i s岷 gi岷 th铆ch m峄峣 th峄 tr锚n 膽瓢峄漬g 膽i. 馃憞

s啤 膽峄

X谩c th峄眂 bi峄僽 m岷玼

膼岷 ti锚n, h茫y nh岷痬 m峄 ti锚u t岷 c岷 c谩c b峄 ch峄峮 ID t峄 HTML trong JavaScript. Nh瓢 th岷 n脿y: 馃憞

let form = document.getElementById("form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");

Sau 膽贸, x芒y d峄眓g tr矛nh x峄 l媒 s峄 ki峄噉 g峄璱 cho bi峄僽 m岷玼 膽峄 bi峄僽 m岷玼 c贸 th峄 ng膬n ch岷穘 h脿nh vi m岷穋 膽峄媙h c峄 峄╪g d峄g c峄 ch煤ng t么i. 膼峄搉g th峄漣, ch煤ng ta s岷 t岷 m峄檛 h脿m c贸 t锚n formValidation. 馃憞

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("button clicked");

  formValidation();
});

let formValidation = () => {};

B芒y gi峄, ch煤ng ta s岷 t岷 m峄檛 c芒u l峄噉h if else b锚n trong formValidationh脿m c峄 ch煤ng ta. 膼i峄乽 n脿y s岷 gi煤p ch煤ng t么i ng膬n ng瓢峄漣 d霉ng g峄璱 c谩c tr瓢峄漬g nh岷璸 tr峄憂g. 馃憞

let formValidation = () => {
  if (input.value === "") {
    msg.innerHTML = "Post cannot be blank";
    console.log("failure");
  } else {
    console.log("successs");
    msg.innerHTML = "";
  }
};

膼芒y l脿 k岷縯 qu岷 cho 膽岷縩 nay: 馃憞

7sb8faq21j5dzy9vlswj

Nh瓢 b岷 c贸 th峄 th岷, m峄檛 th么ng b谩o c农ng s岷 hi峄僴 th峄 n岷縰 ng瓢峄漣 d霉ng c峄 g岷痭g g峄璱 bi峄僽 m岷玼 tr峄憂g.

C谩ch ch岷 nh岷璶 d峄 li峄噓 t峄 c谩c tr瓢峄漬g 膽岷 v脿o

B岷 k峄 d峄 li峄噓 n脿o ch煤ng t么i nh岷璶 膽瓢峄 t峄 c谩c tr瓢峄漬g 膽岷 v脿o, ch煤ng t么i s岷 l瓢u tr峄 ch煤ng trong m峄檛 膽峄慽 t瓢峄g. H茫y t岷 m峄檛 膽峄慽 t瓢峄g c贸 t锚n data. V脿, t岷 m峄檛 h脿m c贸 t锚n acceptData: 馃憞

let data = {};

let acceptData = () => {};

脻 t瓢峄焠g ch铆nh l脿, b岷眓g c谩ch s峄 d峄g h脿m, ch煤ng t么i thu th岷璸 d峄 li峄噓 t峄 c谩c 膽岷 v脿o v脿 l瓢u tr峄 ch煤ng trong 膽峄慽 t瓢峄g 膽瓢峄 膽岷穞 t锚n c峄 ch煤ng t么i data. B芒y gi峄 ch煤ng ta h茫y ho脿n th脿nh vi峄嘽 x芒y d峄眓g acceptDatach峄ヽ n膬ng c峄 ch煤ng ta.

let acceptData = () => {
  data["text"] = input.value;
  console.log(data);
};

Ngo脿i ra, ch煤ng ta c岷 acceptDatach峄ヽ n膬ng ho岷 膽峄檔g khi ng瓢峄漣 d霉ng nh岷 v脿o n煤t g峄璱. V矛 v岷瓂, ch煤ng ta s岷 k铆ch ho岷 h脿m n脿y trong c芒u l峄噉h else c峄 formValidationh脿m c峄 ch煤ng ta. 馃憞

let formValidation = () => {
  if (input.value === "") {
    // Other codes are here
  } else {
    // Other codes are here
    acceptData();
  }
};

Khi ch煤ng t么i nh岷璸 d峄 li峄噓 v脿 g峄璱 bi峄僽 m岷玼, tr锚n b岷g 膽i峄乽 khi峄僴, ch煤ng t么i c贸 th峄 th岷 m峄檛 膽峄慽 t瓢峄g ch峄゛ c谩c gi谩 tr峄 膽岷 v脿o c峄 ng瓢峄漣 d霉ng c峄 ch煤ng t么i. Nh瓢 th岷 n脿y: 馃憞

k岷縯 qu岷 cho 膽岷縩 nay tr锚n b岷g 膽i峄乽 khi峄僴

C谩ch t岷 b脿i 膽膬ng b岷眓g c谩ch s峄 d峄g c谩c k媒 t峄 m岷玼 JavaScript

膼峄 膽膬ng d峄 li峄噓 膽岷 v脿o c峄 ch煤ng t么i 峄 ph铆a b锚n ph岷, ch煤ng t么i c岷 t岷 m峄檛 ph岷 t峄 div v脿 n峄慽 n贸 v脿o div b脿i vi岷縯. 膼岷 ti锚n, h茫y t岷 m峄檛 h脿m v脿 vi岷縯 nh峄痭g d貌ng sau: 馃憞

let createPost = () => {
  posts.innerHTML += ``;
};

C谩c d岷 g岷h ng瓢峄 l脿 c谩c k媒 t峄 m岷玼. N贸 s岷 ho岷 膽峄檔g nh瓢 m峄檛 m岷玼 cho ch煤ng t么i. 峄 膽芒y, ch煤ng ta c岷 3 th峄: div cha, ch铆nh 膽岷 v脿o v脿 div t霉y ch峄峮 mang c谩c bi峄僽 t瓢峄g ch峄塶h s峄璦 v脿 x贸a. H茫y ho脿n th脿nh ch峄ヽ n膬ng c峄 ch煤ng ta 馃憞

let createPost = () => {
  posts.innerHTML += `
  <div>
    <p>${data.text}</p>
    <span class="options">
      <i onClick="editPost(this)" class="fas fa-edit"></i>
      <i onClick="deletePost(this)" class="fas fa-trash-alt"></i>
    </span>
  </div>
  `;
  input.value = "";
};

Trong acceptdatach峄ヽ n膬ng c峄 ch煤ng t么i, ch煤ng t么i s岷 k铆ch createPostho岷 ch峄ヽ n膬ng c峄 m矛nh. Nh瓢 th岷 n脿y: 馃憞

let acceptData = () => {
  // Other codes are here

  createPost();
};

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

K岷縯 qu岷 cho 膽岷縩 nay

Cho 膽岷縩 nay, c谩c b岷 t峄憈, ch煤ng ta g岷 nh瓢 膽茫 ho脿n th脿nh xong d峄 谩n 1.

c脿ng xa c脿ng t峄憈

C谩ch x贸a m峄檛 b脿i 膽膬ng

膼峄 x贸a m峄檛 b脿i 膽膬ng, tr瓢峄沜 h岷縯, h茫y t岷 m峄檛 h脿m b锚n trong t峄噋 javascript c峄 ch煤ng t么i:

let deletePost = (e) => {};

Ti岷縫 theo, ch煤ng t么i k铆ch deletePostho岷 ch峄ヽ n膬ng n脿y b锚n trong t岷 c岷 c谩c bi峄僽 t瓢峄g x贸a c峄 ch煤ng t么i b岷眓g c谩ch s峄 d峄g thu峄檆 t铆nh onClick. B岷 s岷 vi岷縯 nh峄痭g d貌ng n脿y b岷眓g HTML v脿 tr锚n m岷玼. 馃憞

<i onClick="deletePost(this)" class="fas fa-trash-alt"></i>

T峄 thiskh贸a s岷 tham chi岷縰 膽岷縩 ph岷 t峄 膽茫 k铆ch ho岷 s峄 ki峄噉. trong tr瓢峄漬g h峄 c峄 ch煤ng t么i, this膽峄 c岷璸 膽岷縩 n煤t x贸a.

H茫y xem x茅t k峄, cha c峄 n煤t x贸a l脿 kho岷g c谩ch v峄沬 c谩c t霉y ch峄峮 t锚n l峄沺. Cha c峄 span l脿 div. V矛 v岷瓂, ch煤ng t么i vi岷縯 parentElementhai l岷 膽峄 ch煤ng t么i c贸 th峄 chuy峄僴 t峄 bi峄僽 t瓢峄g x贸a sang div v脿 nh岷痬 m峄 ti锚u tr峄眂 ti岷縫 膽峄 x贸a n贸.

H茫y ho脿n th脿nh ch峄ヽ n膬ng c峄 ch煤ng ta. 馃憞

let deletePost = (e) => {
  e.parentElement.parentElement.remove();
};

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

x贸a k岷縯 qu岷 b脿i 膽膬ng

C谩ch ch峄塶h s峄璦 m峄檛 b脿i 膽膬ng

膼峄 ch峄塶h s峄璦 m峄檛 b脿i 膽膬ng, tr瓢峄沜 h岷縯, h茫y t岷 m峄檛 h脿m b锚n trong t峄噋 JavaScript c峄 ch煤ng t么i:

let editPost = (e) => {};

Ti岷縫 theo, ch煤ng t么i k铆ch editPostho岷 ch峄ヽ n膬ng n脿y b锚n trong t岷 c岷 c谩c bi峄僽 t瓢峄g ch峄塶h s峄璦 c峄 ch煤ng t么i b岷眓g c谩ch s峄 d峄g thu峄檆 t铆nh onClick. B岷 s岷 vi岷縯 nh峄痭g d貌ng n脿y b岷眓g HTML v脿 tr锚n m岷玼. 馃憞

<i onClick="editPost(this)" class="fas fa-edit"></i>

T峄 thiskh贸a s岷 tham chi岷縰 膽岷縩 ph岷 t峄 膽茫 k铆ch ho岷 s峄 ki峄噉. Trong tr瓢峄漬g h峄 c峄 ch煤ng t么i, tham chi岷縰 this膽岷縩 n煤t ch峄塶h s峄璦.

Xem k峄, cha c峄 n煤t ch峄塶h s峄璦 l脿 kho岷g c谩ch v峄沬 c谩c t霉y ch峄峮 t锚n l峄沺. Cha c峄 span l脿 div. V矛 v岷瓂, ch煤ng t么i vi岷縯 parentElementhai l岷 膽峄 ch煤ng t么i c贸 th峄 chuy峄僴 t峄 bi峄僽 t瓢峄g ch峄塶h s峄璦 sang div v脿 nh岷痬 m峄 ti锚u tr峄眂 ti岷縫 膽峄 x贸a n贸.

Sau 膽贸, b岷 k峄 d峄 li峄噓 n脿o c贸 trong b脿i 膽膬ng, ch煤ng t么i 膽瓢a d峄 li峄噓 膽贸 tr峄 l岷 tr瓢峄漬g 膽岷 v脿o 膽峄 ch峄塶h s峄璦.

H茫y ho脿n th脿nh ch峄ヽ n膬ng c峄 ch煤ng ta. 馃憞

let editPost = (e) => {
  input.value = e.parentElement.previousElementSibling.innerHTML;
  e.parentElement.parentElement.remove();
};

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

Ch峄塶h s峄璦 k岷縯 qu岷 b脿i 膽膬ng

Ngh峄 ng啤i m峄檛 l谩t!

Ngh峄 ng啤i m峄檛 l谩t

Xin ch煤c m峄玭g m峄峣 ng瓢峄漣 膽茫 ho脿n th脿nh d峄 谩n 1. B芒y gi峄, h茫y ngh峄 ng啤i m峄檛 ch煤t!

C谩ch t岷 峄﹏g d峄g vi峄嘽 c岷 l脿m b岷眓g Thao t谩c CRUD

H茫y t岷 m峄檛 峄﹏g d峄g todo

H茫y b岷痶 膽岷 l脿m d峄 谩n 2, 膽贸 l脿 峄╪g d峄g vi峄嘽 c岷 l脿m.

Thi岷縯 l岷璸 d峄 谩n

Thi岷縯 l岷璸 d峄 谩n

膼峄慽 v峄沬 d峄 谩n n脿y, ch煤ng t么i s岷 th峄眂 hi峄噉 theo c谩c b瓢峄沜 sau:

  • T岷 3 t峄噋 c贸 t锚n index.html, style.css v脿 main.js
  • Li锚n k岷縯 c谩c t峄噋 JavaScript v脿 CSS v峄沬 index.html
  • Kh峄焛 膽峄檔g m谩y ch峄 tr峄眂 ti岷縫 c峄 ch煤ng t么i

HTML

Vi岷縯 m茫 kh峄焛 膽峄檔g n脿y b锚n trong t峄噋 HTML: 馃憞

<div class="app">
  <h4 class="mb-3">TODO App</h4>

  <div id="addNew" data-bs-toggle="modal" data-bs-target="#form">
    <span>Add New Task</span>
    <i class="fas fa-plus"></i>
  </div>
</div>

Div c贸 id addNewl脿 n煤t s岷 m峄 ph瓢啤ng th峄ヽ. Kho岷g c谩ch s岷 膽瓢峄 hi峄僴 th峄 tr锚n n煤t. 膼芒y il脿 bi峄僽 t瓢峄g t峄 ph么ng ch峄 tuy峄噒 v峄漣.

Ch煤ng t么i s岷 s峄 d峄g bootstrap 膽峄 l脿m ph瓢啤ng th峄ヽ c峄 ch煤ng t么i. Ch煤ng t么i s岷 s峄 d峄g ph瓢啤ng th峄ヽ 膽峄 th锚m c谩c nhi峄噈 v峄 m峄沬. 膼峄慽 v峄沬 膽i峄乽 膽贸, h茫y th锚m li锚n k岷縯 bootstrap CDN b锚n trong th岷 head. 馃憞

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

膼峄 xem c谩c t谩c v峄 膽茫 t岷, ch煤ng t么i s岷 s峄 d峄g m峄檛 div v峄沬 m峄檛 nhi峄噈 v峄 id, b锚n trong div c贸 峄﹏g d峄g t锚n l峄沺. 馃憞

<h5 class="text-center my-3">Tasks</h5>

<div id="tasks"></div>

Ch猫n CDN ph么ng ch峄 tuy峄噒 v峄漣 b锚n trong th岷 head 膽峄 s峄 d峄g ph么ng ch峄 trong d峄 谩n c峄 ch煤ng t么i 馃憞

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

Sao ch茅p v脿 d谩n m茫 b锚n d瓢峄沬 t峄 ph瓢啤ng th峄ヽ bootstrap. N贸 mang m峄檛 bi峄僽 m岷玼 v峄沬 3 tr瓢峄漬g 膽岷 v脿o v脿 m峄檛 n煤t g峄璱. N岷縰 mu峄憂, b岷 c贸 th峄 t矛m ki岷縨 trang web c峄 Bootstrap b岷眓g c谩ch vi岷縯 'modal' v脿o thanh t矛m ki岷縨.

<!-- Modal -->
<form
  class="modal fade"
  id="form"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>Task Title</p>
        <input type="text" class="form-control" name="" id="textInput" />
        <div id="msg"></div>
        <br />
        <p>Due Date</p>
        <input type="date" class="form-control" name="" id="dateInput" />
        <br />
        <p>Description</p>
        <textarea
          name=""
          class="form-control"
          id="textarea"
          cols="30"
          rows="5"
        ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="submit" id="add" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</form>

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

Thi岷縯 l岷璸 t峄噋 html

Ch煤ng t么i 膽茫 ho脿n t岷 vi峄嘽 thi岷縯 l岷璸 t峄噋 HTML. H茫y b岷痶 膽岷 CSS.

CSS

Th锚m ph岷 css

Th锚m c谩c ki峄僽 n脿y v脿o ph岷 n峄檌 dung 膽峄 ch煤ng t么i c贸 th峄 gi峄 峄﹏g d峄g c峄 m矛nh 峄 ch铆nh gi峄痑 m脿n h矛nh.

body {
  font-family: sans-serif;
  margin: 0 50px;
  background-color: #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

H茫y t岷 ki峄僽 div v峄沬 峄﹏g d峄g classname. 馃憞

.app {
  background-color: #fff;
  width: 300px;
  height: 500px;
  border: 5px solid #abcea1;
  border-radius: 8px;
  padding: 15px;
}

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

Ki峄僽 峄﹏g d峄g

B芒y gi峄, h茫y t岷 ki峄僽 cho n煤t v峄沬 id addNew. 馃憞

#addNew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(171, 206, 161, 0.35);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.fa-plus {
  background-color: #abcea1;
  padding: 3px;
  border-radius: 3px;
}

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

Th锚m n煤t t谩c v峄 m峄沬

N岷縰 b岷 nh岷 v脿o n煤t, ph瓢啤ng th峄ヽ s岷 b岷璽 l锚n nh瓢 th岷 n脿y: 馃憞

B岷璽 l锚n ph瓢啤ng th峄ヽ

Th锚m JS

Th锚m JavaScript

Trong t峄噋 JavaScript, tr瓢峄沜 h岷縯, h茫y ch峄峮 t岷 c岷 c谩c b峄 ch峄峮 t峄 HTML m脿 ch煤ng ta c岷 s峄 d峄g. 馃憞

let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let dateInput = document.getElementById("dateInput");
let textarea = document.getElementById("textarea");
let msg = document.getElementById("msg");
let tasks = document.getElementById("tasks");
let add = document.getElementById("add");

X谩c th峄眂 bi峄僽 m岷玼

Ch煤ng t么i kh么ng th峄 膽峄 ng瓢峄漣 d霉ng g峄璱 c谩c tr瓢峄漬g 膽岷 v脿o tr峄憂g. V矛 v岷瓂, ch煤ng ta c岷 x谩c th峄眂 c谩c tr瓢峄漬g 膽岷 v脿o. 馃憞

form.addEventListener("submit", (e) => {
  e.preventDefault();
  formValidation();
});

let formValidation = () => {
  if (textInput.value === "") {
    console.log("failure");
    msg.innerHTML = "Task cannot be blank";
  } else {
    console.log("success");
    msg.innerHTML = "";
  }
};

Ngo脿i ra, h茫y th锚m d貌ng n脿y v脿o b锚n trong CSS:

#msg {
  color: red;
}

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

M么 t岷 h矛nh 岷h

Nh瓢 b岷 c贸 th峄 th岷, x谩c th峄眂 膽ang ho岷 膽峄檔g. M茫 JavaScript kh么ng cho ph茅p ng瓢峄漣 d霉ng g峄璱 c谩c tr瓢峄漬g nh岷璸 tr峄憂g, n岷縰 kh么ng b岷 s岷 th岷 th么ng b谩o l峄梚.

C谩ch thu th岷璸 d峄 li峄噓 v脿 s峄 d峄g b峄 nh峄 c峄 b峄

B岷 k峄 膽岷 v脿o n脿o m脿 ng瓢峄漣 d霉ng vi岷縯, ch煤ng t么i c岷 thu th岷璸 ch煤ng v脿 l瓢u tr峄 ch煤ng trong b峄 nh峄 c峄 b峄.

膼岷 ti锚n, ch煤ng t么i thu th岷璸 d峄 li峄噓 t峄 c谩c tr瓢峄漬g 膽岷 v脿o, s峄 d峄g h脿m 膽瓢峄 膽岷穞 t锚n acceptDatav脿 m峄檛 m岷g 膽瓢峄 膽岷穞 t锚n data. Sau 膽贸, ch煤ng t么i 膽岷﹜ ch煤ng v脿o b锚n trong b峄 nh峄 c峄 b峄 nh瓢 th岷 n脿y: 馃憞

let data = [];

let acceptData = () => {
  data.push({
    text: textInput.value,
    date: dateInput.value,
    description: textarea.value,
  });

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

C农ng l瓢u 媒 r岷眓g 膽i峄乽 n脿y s岷 kh么ng bao gi峄 ho岷 膽峄檔g tr峄 khi b岷 g峄峣 h脿m acceptDatab锚n trong c芒u l峄噉h else c峄 x谩c th峄眂 bi峄僽 m岷玼. C霉ng theo d玫i t岷 膽芒y: 馃憞

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
  }
};

B岷 c贸 th峄 nh岷璶 th岷 r岷眓g ph瓢啤ng th峄ヽ kh么ng t峄 膽峄檔g 膽贸ng. 膼峄 gi岷 quy岷縯 v岷 膽峄 n脿y, h茫y vi岷縯 h脿m nh峄 n脿y b锚n trong c芒u l峄噉h else c峄 x谩c th峄眂 bi峄僽 m岷玼: 馃憞

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
    add.setAttribute("data-bs-dismiss", "modal");
    add.click();

    (() => {
      add.setAttribute("data-bs-dismiss", "");
    })();
  }
};

N岷縰 b岷 m峄 c谩c c么ng c峄 d脿nh cho nh脿 ph谩t tri峄僴 Chrome, h茫y chuy峄僴 膽岷縩 峄﹏g d峄g v脿 m峄 b峄 nh峄 c峄 b峄. B岷 c贸 th峄 xem k岷縯 qu岷 n脿y: 馃憞

K岷縯 qu岷 l瓢u tr峄 c峄 b峄

C谩ch t岷 nhi峄噈 v峄 m峄沬

膼峄 t岷 m峄檛 t谩c v峄 m峄沬, ch煤ng ta c岷 t岷 m峄檛 h脿m, s峄 d峄g c谩c k媒 t峄 m岷玼 膽峄 t岷 c谩c ph岷 t峄 HTML v脿 s峄 d峄g b岷 膽峄 膽峄 膽岷﹜ d峄 li峄噓 膽瓢峄 thu th岷璸 t峄 ng瓢峄漣 d霉ng v脿o b锚n trong m岷玼. C霉ng theo d玫i t岷 膽芒y: 馃憞

let createTasks = () => {
  tasks.innerHTML = "";
  data.map((x, y) => {
    return (tasks.innerHTML += `
    <div id=${y}>
          <span class="fw-bold">${x.text}</span>
          <span class="small text-secondary">${x.date}</span>
          <p>${x.description}</p>
  
          <span class="options">
            <i onClick= "editTask(this)" data-bs-toggle="modal" data-bs-target="#form" class="fas fa-edit"></i>
            <i onClick ="deleteTask(this);createTasks()" class="fas fa-trash-alt"></i>
          </span>
        </div>
    `);
  });

  resetForm();
};

C农ng l瓢u 媒 r岷眓g h脿m s岷 kh么ng bao gi峄 ch岷 tr峄 khi b岷 g峄峣 n贸 b锚n trong acceptDatah脿m, nh瓢 th岷 n脿y: 馃憞

let acceptData = () => {
  // Other codes are here

  createTasks();
};

Khi ch煤ng t么i 膽茫 ho脿n t岷 vi峄嘽 thu th岷璸 v脿 ch岷 nh岷璶 d峄 li峄噓 t峄 ng瓢峄漣 d霉ng, ch煤ng t么i c岷 x贸a c谩c tr瓢峄漬g 膽岷 v脿o. 膼峄慽 v峄沬 膽i峄乽 膽贸, ch煤ng t么i t岷 ra m峄檛 h脿m 膽瓢峄 g峄峣 l脿 resetForm. C霉ng theo d玫i: 馃憞

let resetForm = () => {
  textInput.value = "";
  dateInput.value = "";
  textarea.value = "";
};

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

Th锚m th岷 nhi峄噈 v峄

Nh瓢 b岷 c贸 th峄 th岷, kh么ng c贸 phong c谩ch n脿o v峄沬 th岷. H茫y th锚m m峄檛 s峄 phong c谩ch: 馃憞

#tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#tasks div {
  border: 3px solid #abcea1;
  background-color: #e2eede;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
}

T岷 ki峄僽 cho c谩c n煤t ch峄塶h s峄璦 v脿 x贸a b岷眓g m茫 n脿y: 馃憞

#tasks div .options {
  justify-self: center;
  display: flex;
  gap: 20px;
}

#tasks div .options i {
  cursor: pointer;
}

K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

C谩c m岷玼 th岷 ki峄僽

Ch峄ヽ n膬ng x贸a m峄檛 nhi峄噈 v峄

Xem k峄 峄 膽芒y, t么i 膽茫 th锚m 3 d貌ng m茫 b锚n trong h脿m.

  • D貌ng 膽岷 ti锚n s岷 x贸a ph岷 t峄 HTML kh峄廼 m脿n h矛nh,
  • d貌ng th峄 hai s岷 x贸a Nhi峄噈 v峄 膽瓢峄 nh岷痬 m峄 ti锚u kh峄廼 m岷g d峄 li峄噓,
  • v脿 d貌ng th峄 ba s岷 c岷璸 nh岷璽 b峄 nh峄 c峄 b峄 v峄沬 d峄 li峄噓 m峄沬.
let deleteTask = (e) => {
  e.parentElement.parentElement.remove();

  data.splice(e.parentElement.parentElement.id, 1);

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

B芒y gi峄, h茫y t岷 m峄檛 t谩c v峄 gi岷 v脿 c峄 g岷痭g x贸a n贸. K岷縯 qu岷 cho 膽岷縩 nay tr么ng nh瓢 th岷 n脿y: 馃憞

M么 t岷 h矛nh 岷h

Ch峄ヽ n膬ng ch峄塶h s峄璦 nhi峄噈 v峄

H茫y xem k峄 峄 膽芒y, t么i 膽茫 th锚m 5 d貌ng m茫 b锚n trong h脿m.

  • D貌ng 1 膽ang nh岷痬 m峄 ti锚u nhi峄噈 v峄 m脿 ch煤ng t么i 膽茫 ch峄峮 膽峄 ch峄塶h s峄璦
  • C谩c d貌ng 2, 3 v脿 4, 膽ang nh岷痬 m峄 ti锚u c谩c gi谩 tr峄 [nhi峄噈 v峄, ng脿y th谩ng, m么 t岷 c峄 nhi峄噈 v峄 m脿 ch煤ng t么i 膽茫 ch峄峮 膽峄 ch峄塶h s峄璦
  • d貌ng 5 膽ang ch岷 ch峄ヽ n膬ng x贸a 膽峄 x贸a c岷 d峄 li峄噓 膽茫 ch峄峮 kh峄廼 b峄 nh峄 c峄 b峄, ph岷 t峄 HTML v脿 m岷g d峄 li峄噓.
let editTask = (e) => {
  let selectedTask = e.parentElement.parentElement;

  textInput.value = selectedTask.children[0].innerHTML;
  dateInput.value = selectedTask.children[1].innerHTML;
  textarea.value = selectedTask.children[2].innerHTML;

  deleteTask(e);
};

B芒y gi峄, h茫y th峄 t岷 m峄檛 t谩c v峄 gi岷 v脿 ch峄塶h s峄璦 n贸. K岷縯 qu岷 cho 膽岷縩 nay: 馃憞

Ch峄塶h s峄璦 c么ng vi峄嘽

C谩ch l岷 d峄 li峄噓 t峄 b峄 nh峄 c峄 b峄

N岷縰 b岷 l脿m m峄沬 trang, b岷 s岷 l瓢u 媒 r岷眓g t岷 c岷 d峄 li峄噓 c峄 b岷 膽茫 bi岷縩 m岷. 膼峄 gi岷 quy岷縯 v岷 膽峄 膽贸, ch煤ng t么i ch岷 IIFE (Bi峄僽 th峄ヽ h脿m 膽瓢峄 g峄峣 ngay l岷璸 t峄ヽ) 膽峄 truy xu岷 d峄 li峄噓 t峄 b峄 nh峄 c峄 b峄. C霉ng theo d玫i: 馃憞

(() => {
  data = JSON.parse(localStorage.getItem("data")) || [];
  console.log(data);
  createTasks();
})();

B芒y gi峄 d峄 li峄噓 s岷 hi峄僴 th峄 ngay c岷 khi b岷 l脿m m峄沬 trang.

S峄 k岷縯 lu岷璶

Xin ch煤c m峄玭g

Xin ch煤c m峄玭g v矛 膽茫 ho脿n th脿nh th脿nh c么ng h瓢峄沶g d岷玭 n脿y. B岷 膽茫 h峄峜 c谩ch t岷 m峄檛 峄﹏g d峄g danh s谩ch vi峄嘽 c岷 l脿m b岷眓g c谩c ph茅p to谩n CRUD. B芒y gi峄, b岷 c贸 th峄 t岷 峄﹏g d峄g CRUD c峄 ri锚ng m矛nh b岷眓g c谩ch s峄 d峄g h瓢峄沶g d岷玭 n脿y.

Ngu峄搉: https://www.freecodecamp.org/news/learn-crud-operations-in-javascript-by-building-todo-app/

#javascript #crud #todo 

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, 鈥榙ocument.write鈥 is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * 鈥 鈥 * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

CRUD App In JavaScript With Source Code

Please scroll down and click on the download button to download CRUD App In JavaScript for free.

CRUD App is a simple project in HTML5, CSS, and JavaScript. This is an interesting project. The project contains only the admin side. The project is for adding the numerous records of the users. This project uses CRUD operation for the management system like adding, deleting, and updating users鈥 data.

About the System

This project is simply in HTML, CSS, and JavaScript. The user can add the records of many users with their name, and age. Here, the user can add the data, delete the data whenever they want, and also edit the details of the records if they have to update some data. This project includes a lot of javascript for making validations to certain parts of the project.

#javascript projects #css #html #javascript #crud #crud app

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers