├── index.css ├── README.md ├── firebase.js ├── index.html └── index.js /index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vanilla Javascript & Firebase Firestore CRUD 2 | 3 | This project is web application using HTML, CSS, Javascript and Firebase Firestore as a Realtime databaes, using modules and modern Javascript in the browser 4 | -------------------------------------------------------------------------------- /firebase.js: -------------------------------------------------------------------------------- 1 | // Import the functions you need from the SDKs you need 2 | import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.1/firebase-app.js"; 3 | // TODO: Add SDKs for Firebase products that you want to use 4 | // https://firebase.google.com/docs/web/setup#available-libraries 5 | import { 6 | getFirestore, 7 | collection, 8 | getDocs, 9 | onSnapshot, 10 | addDoc, 11 | deleteDoc, 12 | doc, 13 | getDoc, 14 | updateDoc, 15 | } from "https://www.gstatic.com/firebasejs/11.0.1/firebase-firestore.js"; 16 | 17 | // Your web app's Firebase configuration 18 | const firebaseConfig = { 19 | // your credentials here 20 | }; 21 | 22 | 23 | // Initialize Firebase 24 | export const app = initializeApp(firebaseConfig); 25 | 26 | 27 | export const db = getFirestore(); 28 | 29 | /** 30 | * Save a New Task in Firestore 31 | * @param {string} title the title of the Task 32 | * @param {string} description the description of the Task 33 | */ 34 | export const saveTask = (title, description) => 35 | addDoc(collection(db, "tasks"), { title, description }); 36 | 37 | export const onGetTasks = (callback) => 38 | onSnapshot(collection(db, "tasks"), callback); 39 | 40 | /** 41 | * 42 | * @param {string} id Task ID 43 | */ 44 | export const deleteTask = (id) => deleteDoc(doc(db, "tasks", id)); 45 | 46 | export const getTask = (id) => getDoc(doc(db, "tasks", id)); 47 | 48 | export const updateTask = (id, newFields) => 49 | updateDoc(doc(db, "tasks", id), newFields); 50 | 51 | export const getTasks = () => getDocs(collection(db, "tasks")); 52 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Firebase CRUD 7 | 8 | 9 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 |
21 |
22 |

Add Task

23 | 24 |
25 | 26 | 34 | 35 | 36 | 42 | 43 | 44 | 45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { 2 | onGetTasks, 3 | saveTask, 4 | deleteTask, 5 | getTask, 6 | updateTask, 7 | getTasks, 8 | } from "./firebase.js"; 9 | 10 | const taskForm = document.getElementById("task-form"); 11 | const tasksContainer = document.getElementById("tasks-container"); 12 | const butonCancel = document.getElementById("btn-task-cancel"); 13 | 14 | let editStatus = false; 15 | let id = ""; 16 | 17 | window.addEventListener("DOMContentLoaded", async (e) => { 18 | // const querySnapshot = await getTasks(); 19 | // querySnapshot.forEach((doc) => { 20 | // console.log(doc.data()); 21 | // }); 22 | 23 | onGetTasks((querySnapshot) => { 24 | tasksContainer.innerHTML = ""; 25 | 26 | querySnapshot.forEach((doc) => { 27 | const task = doc.data(); 28 | 29 | tasksContainer.innerHTML += ` 30 |
31 |

${task.title}

32 |

${task.description}

33 |
34 | 37 | 40 |
41 |
`; 42 | }); 43 | 44 | const btnsDelete = tasksContainer.querySelectorAll(".btn-delete"); 45 | btnsDelete.forEach((btn) => 46 | btn.addEventListener("click", async ({ target: { dataset } }) => { 47 | try { 48 | await deleteTask(dataset.id); 49 | } catch (error) { 50 | console.log(error); 51 | } 52 | }) 53 | ); 54 | 55 | const btnsEdit = tasksContainer.querySelectorAll(".btn-edit"); 56 | btnsEdit.forEach((btn) => { 57 | btn.addEventListener("click", async (e) => { 58 | try { 59 | const doc = await getTask(e.target.dataset.id); 60 | const task = doc.data(); 61 | taskForm["task-title"].value = task.title; 62 | taskForm["task-description"].value = task.description; 63 | 64 | editStatus = true; 65 | id = doc.id; 66 | taskForm["btn-task-form"].innerText = "Update"; 67 | } catch (error) { 68 | console.log(error); 69 | } 70 | }); 71 | }); 72 | }); 73 | }); 74 | 75 | taskForm.addEventListener("submit", async (e) => { 76 | e.preventDefault(); 77 | 78 | const title = taskForm["task-title"]; 79 | const description = taskForm["task-description"]; 80 | 81 | if (!title.value || !description.value) { 82 | return alert("Please complete the form"); 83 | } 84 | 85 | try { 86 | if (!editStatus) { 87 | await saveTask(title.value, description.value); 88 | } else { 89 | await updateTask(id, { 90 | title: title.value, 91 | description: description.value, 92 | }); 93 | 94 | editStatus = false; 95 | id = ""; 96 | taskForm["btn-task-form"].innerText = "Save"; 97 | } 98 | 99 | taskForm.reset(); 100 | title.focus(); 101 | } catch (error) { 102 | console.log(error); 103 | } 104 | }); 105 | 106 | butonCancel.addEventListener("click", (e) => { 107 | taskForm.reset(); 108 | 109 | editStatus = false; 110 | id = ""; 111 | }); --------------------------------------------------------------------------------