伊藤  直子

伊藤 直子

1650021960

TODO APPを構築して、JavaScriptでのCRUD操作を学ぶ

今日は、Todoアプリを作成してJavaScriptでCRUD操作を行う方法を学びます。始めましょう🔥

これは私たちが今日作っているアプリです:

今日作っているアプリ

CRUDとは何ですか?

画像の説明

CRUDは-の略です

  • C:作成
  • R:読む
  • U:更新
  • D:削除

CRUDフルフォーム

CRUDは、データの作成、データの読み取り、編集、およびそれらのデータの削除を可能にするメカニズムの一種です。この例では、Todoアプリを作成するので、タスクの作成、タスクの読み取り、タスクの更新、またはタスクの削除を行うための4つのオプションがあります。

CRUDの原則を理解する

チュートリアルを開始する前に、まず、CRUDの原則を理解しましょう。そのために、非常に単純なソーシャルメディアアプリケーションを作成しましょう。

ソーシャルメディアアプリプロジェクト

設定

プロジェクトの設定

このプロジェクトでは、以下の手順に従います。

  • index.html、style.css、main.jsという名前の3つのファイルを作成します
  • JavaScriptおよびCSSファイルをindex.htmlにリンクします
  • ライブサーバーを起動します

HTML

bodyタグ内に、クラス名を使用してdivを作成します.container。そこには2つのセクションがあり.left.right👇

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

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

  </div>
</body>

左側に投稿を作成します。右側では、投稿を表示、更新、削除できます。次に、.leftdivタグ内にフォームを作成します👇

<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>

このコードをHTML内に記述して、投稿を右側に表示できるようにします👇

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

次に、プロジェクトでそのフォントを使用するために、headタグ内にfont-awesomeCDNを挿入します👇

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

次に、削除アイコンと編集アイコンを使用してサンプル投稿を作成します。このコードをdiv内に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>

これまでの結果は次のようになります。

HTMLマークアップの結果

CSS

プロジェクト1のCSSの追加

シンプルにしましょう。スタイルシート内にこれらのスタイルを記述します:👇

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

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

#posts {
  width: 400px;
}

i {
  cursor: pointer;
}

次に、投稿divとオプションアイコンに次のスタイルを記述します。👇

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

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

#msg {
  color: red;
}

これまでの結果は次のようになります:👇

cssパーツプロジェクト1を追加した後の結果

JavaScriptパート

javascript部分を開始します

このフローチャートに従って、プロジェクトを進めていきます。心配しないでください、私は途中ですべてを説明します。👇

フローチャート

フォームの検証

まず、JavaScriptのHTMLからすべてのIDセレクターをターゲットにしましょう。このように:👇

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

次に、フォームの送信イベントリスナーを作成して、アプリのデフォルトの動作を防ぐことができるようにします。同時に、という名前の関数を作成しますformValidation。👇

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

  formValidation();
});

let formValidation = () => {};

次に、関数内でifelseステートメントを作成しformValidationます。これにより、ユーザーが空白の入力フィールドを送信するのを防ぐことができます。👇

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

これまでの結果は次のとおりです:👇

7sb8faq21j5dzy9vlswj

ご覧のとおり、ユーザーがフォームを空白で送信しようとすると、メッセージも表示されます。

入力フィールドからデータを受け入れる方法

入力フィールドから取得するデータが何であれ、それらをオブジェクトに格納します。。という名前のオブジェクトを作成しましょうdata。そして、次の名前の関数を作成しますacceptData:👇

let data = {};

let acceptData = () => {};

主なアイデアは、関数を使用して、入力からデータを収集し、という名前のオブジェクトに格納することdataです。acceptDataそれでは、関数の作成を完了しましょう。

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

また、acceptDataユーザーが送信ボタンをクリックしたときに機能する機能が必要です。そのために、関数のelseステートメントでこの関数を起動しformValidationます。👇

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

データを入力してフォームを送信すると、コンソールにユーザーの入力値を保持しているオブジェクトが表示されます。このように:👇

これまでのコンソールでの結果

JavaScriptテンプレートリテラルを使用して投稿を作成する方法

入力データを右側に投稿するには、div要素を作成し、それを投稿divに追加する必要があります。まず、関数を作成して次の行を記述しましょう:👇

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

バックティックはテンプレートリテラルです。それは私たちのテンプレートとして機能します。ここでは、親div、入力自体、および編集アイコンと削除アイコンを保持するオプションdivの3つが必要です。機能を終了しましょう👇

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 = "";
};

acceptdata関数では、関数を起動しますcreatePost。このように:👇

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

  createPost();
};

これまでの結果:👇

これまでの結果

これまでのところ、プロジェクト1はほぼ完了しています。

ここまでは順調ですね

投稿を削除する方法

投稿を削除するために、まず、javascriptファイル内に関数を作成しましょう。

let deletePost = (e) => {};

deletePost次に、onClick属性を使用して、すべての削除アイコン内でこの関数を起動します。これらの行は、HTMLとテンプレートリテラルで記述します。👇

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

thisキーワードは、イベントを発生させた要素を参照します。この場合、thisは削除ボタンを指します。

注意深く見てください。削除ボタンの親は、クラス名オプションのあるスパンです。スパンの親はdivです。parentElementしたがって、削除アイコンからdivにジャンプし、直接ターゲットにして削除できるように、2回書き込みます。

関数を終了しましょう。👇

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

これまでの結果:👇

投稿結果の削除

投稿を編集する方法

投稿を編集するために、まず、JavaScriptファイル内に関数を作成しましょう。

let editPost = (e) => {};

editPost次に、onClick属性を使用して、すべての編集アイコン内でこの関数を起動します。これらの行は、HTMLとテンプレートリテラルで記述します。👇

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

thisキーワードは、イベントを発生させた要素を参照します。この場合、thisは編集ボタンを指します。

注意深く見てください。編集ボタンの親は、クラス名オプションのあるスパンです。スパンの親はdivです。parentElementしたがって、編集アイコンからdivにジャンプし、直接ターゲットにして削除できるように、2回書き込みます。

次に、投稿内のデータが何であれ、入力フィールドに戻して編集します。

関数を終了しましょう。👇

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

これまでの結果:👇

投稿結果の編集

休憩する!

休憩する

プロジェクト1を完了してくださった皆さん、おめでとうございます。さあ、ちょっと休憩してください。

CRUD操作を使用してToDoアプリを作成する方法

ToDoアプリを作ろう

To-Doアプリであるプロジェクト2の作成を始めましょう。

プロジェクトの設定

プロジェクトの設定

このプロジェクトでは、以下の手順に従います。

  • index.html、style.css、main.jsという名前の3つのファイルを作成します
  • JavaScriptファイルとCSSファイルをindex.htmlにリンクします
  • ライブサーバーを起動します

HTML

このスターターコードを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>

IDを持つdivaddNewは、モーダルを開くボタンです。ボタンにスパンが表示されます。これiはfont-awesomeのアイコンです。

ブートストラップを使用してモーダルを作成します。モーダルを使用して新しいタスクを追加します。そのために、headタグ内にブートストラップCDNリンクを追加します。👇

<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>

作成されたタスクを確認するには、クラス名アプリを使用したdiv内で、idタスクを使用したdivを使用します。👇

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

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

プロジェクトでフォントを使用するには、headタグ内にfont-awesomeCDNを挿入します👇

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

ブートストラップモーダルからの以下のコードをコピーして貼り付けます。3つの入力フィールドと送信ボタンを備えたフォームがあります。必要に応じて、検索バーに「モーダル」と入力して、BootstrapのWebサイトを検索できます。

<!-- 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>

これまでの結果:👇

HTMLファイルの設定

HTMLファイルの設定は完了です。CSSを始めましょう。

CSS

css部分を追加する

これらのスタイルを本文に追加して、アプリを画面の正確な中央に配置できるようにします。

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

classnameアプリでdivのスタイルを設定しましょう。👇

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

これまでの結果:👇

アプリのスタイル

それでは、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;
}

これまでの結果:👇

新しいタスクボタンを追加

ボタンをクリックすると、モーダルが次のようにポップアップ表示されます:👇

モーダルポップ

JSを追加する

JavaScriptを追加する

JavaScriptファイルで、まず、使用する必要のあるHTMLからすべてのセレクターを選択します。👇

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");

フォームの検証

ユーザーに空白の入力フィールドを送信させることはできません。したがって、入力フィールドを検証する必要があります。👇

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 = "";
  }
};

また、CSS内に次の行を追加します。

#msg {
  color: red;
}

これまでの結果:👇

画像の説明

ご覧のとおり、検証は機能しています。JavaScriptコードでは、ユーザーが空白の入力フィールドを送信することはできません。そうしないと、エラーメッセージが表示されます。

データを収集してローカルストレージを使用する方法

ユーザーが書き込んだ入力が何であれ、それらを収集してローカルストレージに保存する必要があります。

まず、という名前の関数とという名前acceptDataの配列を使用して、入力フィールドからデータを収集しますdata。次に、次のようにローカルストレージ内にプッシュします:👇

let data = [];

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

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

  console.log(data);
};

acceptDataまた、フォーム検証のelseステートメント内で関数を呼び出さない限り、これは機能しないことに注意してください。ここに従ってください:👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
  }
};

モーダルが自動的に閉じないことに気付いたかもしれません。これを解決するには、フォーム検証のelseステートメント内にこの小さな関数を記述します。👇

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", "");
    })();
  }
};

Chrome開発ツールを開く場合は、アプリケーションに移動してローカルストレージを開きます。あなたはこの結果を見ることができます:👇

ローカルストレージの結果

新しいタスクを作成する方法

新しいタスクを作成するには、関数を作成し、テンプレートリテラルを使用してHTML要素を作成し、マップを使用してユーザーから収集したデータをテンプレート内にプッシュする必要があります。ここに従ってください:👇

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();
};

また、次のacceptDataように、関数内で呼び出さない限り、関数は実行されないことに注意してください。👇

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

  createTasks();
};

ユーザーからのデータの収集と受け入れが完了したら、入力フィールドをクリアする必要があります。そのために、と呼ばれる関数を作成しますresetForm。フォローする:👇

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

これまでの結果:👇

タスクカードの追加

ご覧のとおり、このカードにはスタイルはありません。いくつかのスタイルを追加しましょう:👇

#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;
}

次のコードで編集ボタンと削除ボタンのスタイルを設定します:👇

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

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

これまでの結果:👇

スタイルカードテンプレート

タスクを削除する機能

ここを注意深く見てください。関数内に3行のコードを追加しました。

  • 最初の行は、画面からHTML要素を削除します。
  • 2行目は、ターゲットのタスクをデータ配列から削除します。
  • 3行目は、ローカルストレージを新しいデータで更新します。
let deleteTask = (e) => {
  e.parentElement.parentElement.remove();

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

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

  console.log(data);
};

次に、ダミータスクを作成し、それを削除してみます。これまでの結果は次のようになります:👇

画像の説明

タスクを編集する機能

ここを注意深く見てください。関数内に5行のコードを追加しました。

  • 1行目は、編集するために選択したタスクを対象としています
  • 2行目、3行目、および4行目は、編集するために選択したタスクの値[タスク、日付、説明]を対象としています。
  • 5行目では、削除機能を実行して、選択したデータをローカルストレージ、HTML要素、およびデータ配列の両方から削除しています。
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);
};

次に、ダミータスクを作成して編集してみます。これまでの結果:👇

タスクの編集

ローカルストレージからデータを取得する方法

ページを更新すると、すべてのデータが失われていることに気付くでしょう。この問題を解決するために、IIFE(即時呼び出し関数式)を実行して、ローカルストレージからデータを取得します。フォローする:👇

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

これで、ページを更新してもデータが表示されます。

結論

おめでとう

このチュートリアルを正常に完了しました。おめでとうございます。CRUD操作を使用してToDoリストアプリケーションを作成する方法を学習しました。これで、このチュートリアルを使用して独自のCRUDアプリケーションを作成できます。

これが最後まで読むためのあなたのメダルです。❤️

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

#javascript #crud #operator #todoapp 

TODO APPを構築して、JavaScriptでのCRUD操作を学ぶ

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

Cómo Hacer Operaciones CRUD En JavaScript Creando Una Aplicación Todo
Joanne  Bauch

Joanne Bauch

1628313000

TodoApp with React and Firestore #7 Update Todos

Application Live Demo: https://todoappwithreactandfirebase.web.app/
Github Link: https://github.com/HamzaAnwar1998/TodoAppWithReactAndFirestore

Hello! In this video I will update our todos in firestore and attach the realtime listner to update the todos in realtime for our UI.

Sorry for the weird buzz sound after 17:00

If you want to develop the same project with vanilla javaScript and Firestore then here is the link for video tutorial:

https://www.youtube.com/watch?v=nz-f37qpADQ&t=7s

Todo App With Vanilla JS (Live Link): https://todoappwithvanillajs.firebaseapp.com/

How to update the data in firestore
How to update the data in firestore with reactjs
React Firebase Realtime update

#firestore #react #todoapp

TodoApp with React and Firestore #7 Update Todos
Joanne  Bauch

Joanne Bauch

1628226420

TodoApp with React and Firestore #5 Display Todos

Application Live Demo: https://todoappwithreactandfirebase.web.app/
Github Link: https://github.com/HamzaAnwar1998/TodoAppWithReactAndFirestore

Hello every one! In this video we will retrive data from firestore and display it to our webpage as a seprate component

If you want to develop the same project with vanilla javaScript and Firestore then here is the link for video tutorial
https://www.youtube.com/watch?v=nz-f37qpADQ&t=7s

Todo App With Vanilla JS (Live Link)
https://todoappwithvanillajs.firebaseapp.com/

How to retrive data in firebase
How to retrive data from firebase firestore
how to retrive data from firestore
How to retrive and display data from firestore
How to display and view data from firestore database to webpage

#firestore #react #todoapp

TodoApp with React and Firestore #5 Display Todos
Joanne  Bauch

Joanne Bauch

1628139900

TodoApp with React and Firestore #4 Add Todos

Application Live Demo: https://todoappwithreactandfirebase.web.app/

Github Link: https://github.com/HamzaAnwar1998/TodoAppWithReactAndFirestore

Hello Everyone! in this video we will see how can we add data to our firestore database separately for every user.

If you want to develop the same project with vanilla javaScript and Firestore then here is the link for video tutorial
https://www.youtube.com/watch?v=nz-f37qpADQ&t=7s

Todo App With Vanilla JS (Live Link)
https://todoappwithvanillajs.firebaseapp.com/

#react #todoapp #firestore

TodoApp with React and Firestore #4 Add Todos
Joanne  Bauch

Joanne Bauch

1628053380

TodoApp with React and Firestore #3 Signup/Login and Conditional Rendering

Application Live Demo: https://todoappwithreactandfirebase.web.app/

Github Link: https://github.com/HamzaAnwar1998/TodoAppWithReactAndFirestore

Hello! In this video we will work on signup/login using firebase auth and we will work on conditional rendering too, it means what we should render on the basis of if we have user or not. If we have user then we should render an enabled form to add todos, a welcome message with username and a logout button replacing signup/login links

If you want to develop the same project with vanilla javaScript and Firestore then here is the link for video tutorial

Todo App With Vanilla JS | Separate list for every user | Using Firebase Auth & Firebase Firestore
https://www.youtube.com/watch?v=nz-f37qpADQ&t=7s

Todo App With Vanilla JS (Live Link)
https://todoappwithvanillajs.firebaseapp.com/

#todoapp #react #firestore

TodoApp with React and Firestore #3 Signup/Login and Conditional Rendering
Joanne  Bauch

Joanne Bauch

1627966800

TodoApp with React and Firestore #2 Header Part

Application Live Demo: https://todoappwithreactandfirebase.web.app/

Github Link (Full Project): https://github.com/HamzaAnwar1998/TodoAppWithReactAndFirestore

Hello guys in this video we will design the header part of our application. By watching this video you can learn how to display the current date and day in your application using useState and useEffect Hook.

If you want to develop the same project with vanilla javaScript and Firestore then here is the link for video tutorial

Todo App With Vanilla JS | Separate list for every user | Using Firebase Auth & Firebase Firestore
https://www.youtube.com/watch?v=nz-f37qpADQ&t=7s

Todo App With Vanilla JS (Live Link)
https://todoappwithvanillajs.firebaseapp.com/

Music used in this video
(I don’t own the music and all the music credit goes to their respective owners. If you want me to remove any music, I will do that)

1- Alan Walker - Force [NCS Release]
https://www.youtube.com/watch?v=xshEZzpS4CQ&list=PLqDtm0iWoNBP7xjEss5ohmFHvJ0A7Oe16

2- Disfigure - Blank [NCS Release]
https://www.youtube.com/watch?v=p7ZsBPK656s&list=PLqDtm0iWoNBP7xjEss5ohmFHvJ0A7Oe16

#todoapp #react #firestore

TodoApp with React and Firestore #2 Header Part
Joanne  Bauch

Joanne Bauch

1627880340

TodoApp with React and Firestore #1 Demo

Application Live Demo: https://todoappwithreactandfirebase.web.app/

Github Link: https://github.com/HamzaAnwar1998/TodoAppWithReactAndFirestore

Hi guys! In this videos series I will develop a todo app with React and Firebase. In this application we will create separate list for every user. After watching this playlist you will be able to master Real Time Firestore CRUD
and Reactjs core concepts. For this tutorial I have used class based Appjs and hooks for every other component.

If you want to develop the same project with vanilla javaScript and Firestore then here is the link for video tutorial

Todo App With Vanilla JS | Separate list for every user | Using Firebase Auth & Firebase Firestore
https://www.youtube.com/watch?v=nz-f37qpADQ&t=7s

Todo App With Vanilla JS (Live Link)
https://todoappwithvanillajs.firebaseapp.com/

#todoapp #firestore #react

TodoApp with React and Firestore #1 Demo
Joanne  Bauch

Joanne Bauch

1625810640

Simple Todoapp with Reactjs

A simple todolist application made with reactjs. This video might help anyone who has a little bit knowledge of Reactjs. I tried to explain my code by adding subtitles. This MUST NOT be a tutorial video for React beginners.

In part2 of this video I connect this app to firebase realtime database. So if you want to switch to that here is the link

part2: todoapp with react and firebase realtime database
https://youtu.be/W3olImb53Fw

App link:
https://todowithfirebase-64efe.firebaseapp.com/

Full Code can be found in github :
https://github.com/HamzaAnwar1998/todoAppWithReactAndFirebase

#reactjs #todoapp

Simple Todoapp with Reactjs

ToDo Application in ReactJs and TailwindCSS

#todoapp #reactjs #tailwindcss
In this video we are going to build a Todo App in ReactJs, TailwindCss and incorporate localStorage. It’s a fun video. Please like the video and subscribe to the channel. Thank you for watching.
Subscribe here: https://bit.ly/3qsAsNC

Follow me on Twitch for livestreams and AMA sessions: https://twitch.tv/tsbsankara
Follow me on Twitter: https://twitter.com/TSBSankara
Follow me on Instagram: https://instagram.com/tsbsankara
Subscribe to my YouTube channel: https://bit.ly/3qsAsNC

Support the channel: https://streamlabs.com/tsbsankara1/tip

#todoapp #reactjs #tailwindcss

ToDo Application in ReactJs and TailwindCSS