├── .DS_Store ├── final ├── app.js ├── data-model.json ├── index.html └── style.css └── start ├── app.js ├── data-model.json ├── index.html └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/softauthor/firebase-crud-javascript-02/bf199cda01cb3202ed04682eaff8c4dc17b1e4b5/.DS_Store -------------------------------------------------------------------------------- /final/app.js: -------------------------------------------------------------------------------- 1 | 2 | // !IMPORTANT: REPLACE WITH YOUR OWN CONFIG OBJECT BELOW 3 | 4 | 5 | // Initialize Firebase 6 | var config = { 7 | apiKey: "************************", 8 | authDomain: "************************", 9 | databaseURL: "************************", 10 | projectId: "************************", 11 | storageBucket: "************************", 12 | messagingSenderId: "************************", 13 | }; 14 | 15 | 16 | 17 | firebase.initializeApp(config); 18 | 19 | // Firebase Database Reference and the child 20 | const dbRef = firebase.database().ref(); 21 | const usersRef = dbRef.child('users'); 22 | 23 | 24 | readUserData(); 25 | 26 | 27 | // -------------------------- 28 | // READ 29 | // -------------------------- 30 | function readUserData() { 31 | 32 | const userListUI = document.getElementById("user-list"); 33 | 34 | usersRef.on("value", snap => { 35 | 36 | userListUI.innerHTML = "" 37 | 38 | snap.forEach(childSnap => { 39 | 40 | let key = childSnap.key, 41 | value = childSnap.val() 42 | 43 | let $li = document.createElement("li"); 44 | 45 | // edit icon 46 | let editIconUI = document.createElement("span"); 47 | editIconUI.class = "edit-user"; 48 | editIconUI.innerHTML = " ✎"; 49 | editIconUI.setAttribute("userid", key); 50 | editIconUI.addEventListener("click", editButtonClicked) 51 | 52 | // delete icon 53 | let deleteIconUI = document.createElement("span"); 54 | deleteIconUI.class = "delete-user"; 55 | deleteIconUI.innerHTML = " ☓"; 56 | deleteIconUI.setAttribute("userid", key); 57 | deleteIconUI.addEventListener("click", deleteButtonClicked) 58 | 59 | $li.innerHTML = value.name; 60 | $li.append(editIconUI); 61 | $li.append(deleteIconUI); 62 | 63 | $li.setAttribute("user-key", key); 64 | $li.addEventListener("click", userClicked) 65 | userListUI.append($li); 66 | 67 | }); 68 | 69 | 70 | }) 71 | 72 | } 73 | 74 | 75 | 76 | function userClicked(e) { 77 | 78 | 79 | var userID = e.target.getAttribute("user-key"); 80 | 81 | const userRef = dbRef.child('users/' + userID); 82 | const userDetailUI = document.getElementById("user-detail"); 83 | 84 | userRef.on("value", snap => { 85 | 86 | userDetailUI.innerHTML = "" 87 | 88 | snap.forEach(childSnap => { 89 | var $p = document.createElement("p"); 90 | $p.innerHTML = childSnap.key + " - " + childSnap.val(); 91 | userDetailUI.append($p); 92 | }) 93 | 94 | }); 95 | 96 | 97 | } 98 | 99 | 100 | 101 | 102 | 103 | // -------------------------- 104 | // ADD 105 | // -------------------------- 106 | 107 | const addUserBtnUI = document.getElementById("add-user-btn"); 108 | addUserBtnUI.addEventListener("click", addUserBtnClicked) 109 | 110 | 111 | 112 | function addUserBtnClicked() { 113 | 114 | const usersRef = dbRef.child('users'); 115 | 116 | const addUserInputsUI = document.getElementsByClassName("user-input"); 117 | 118 | // this object will hold the new user information 119 | let newUser = {}; 120 | 121 | // loop through View to get the data for the model 122 | for (let i = 0, len = addUserInputsUI.length; i < len; i++) { 123 | 124 | let key = addUserInputsUI[i].getAttribute('data-key'); 125 | let value = addUserInputsUI[i].value; 126 | newUser[key] = value; 127 | } 128 | 129 | usersRef.push(newUser) 130 | 131 | 132 | console.log(myPro) 133 | 134 | 135 | 136 | } 137 | 138 | 139 | // -------------------------- 140 | // DELETE 141 | // -------------------------- 142 | function deleteButtonClicked(e) { 143 | 144 | e.stopPropagation(); 145 | 146 | var userID = e.target.getAttribute("userid"); 147 | 148 | const userRef = dbRef.child('users/' + userID); 149 | 150 | userRef.remove(); 151 | 152 | } 153 | 154 | 155 | // -------------------------- 156 | // EDIT 157 | // -------------------------- 158 | function editButtonClicked(e) { 159 | 160 | document.getElementById('edit-user-module').style.display = "block"; 161 | 162 | //set user id to the hidden input field 163 | document.querySelector(".edit-userid").value = e.target.getAttribute("userid"); 164 | 165 | const userRef = dbRef.child('users/' + e.target.getAttribute("userid")); 166 | 167 | // set data to the user field 168 | const editUserInputsUI = document.querySelectorAll(".edit-user-input"); 169 | 170 | 171 | userRef.on("value", snap => { 172 | 173 | for(var i = 0, len = editUserInputsUI.length; i < len; i++) { 174 | 175 | var key = editUserInputsUI[i].getAttribute("data-key"); 176 | editUserInputsUI[i].value = snap.val()[key]; 177 | } 178 | 179 | }); 180 | 181 | 182 | 183 | 184 | const saveBtn = document.querySelector("#edit-user-btn"); 185 | saveBtn.addEventListener("click", saveUserBtnClicked) 186 | } 187 | 188 | 189 | function saveUserBtnClicked(e) { 190 | 191 | const userID = document.querySelector(".edit-userid").value; 192 | const userRef = dbRef.child('users/' + userID); 193 | 194 | var editedUserObject = {} 195 | 196 | const editUserInputsUI = document.querySelectorAll(".edit-user-input"); 197 | 198 | editUserInputsUI.forEach(function(textField) { 199 | let key = textField.getAttribute("data-key"); 200 | let value = textField.value; 201 | editedUserObject[textField.getAttribute("data-key")] = textField.value 202 | }); 203 | 204 | 205 | 206 | userRef.update(editedUserObject); 207 | 208 | document.getElementById('edit-user-module').style.display = "none"; 209 | 210 | 211 | } 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | -------------------------------------------------------------------------------- /final/data-model.json: -------------------------------------------------------------------------------- 1 | { 2 | "users": [ 3 | { 4 | "name": "Alex Meraz", 5 | "age": 24, 6 | "email": "ameraz@email.com" 7 | }, 8 | { 9 | "name": "Mohammed Rafi", 10 | "age": 21, 11 | "email": "mrafi@email.com" 12 | }, 13 | { 14 | "name": "Raja Tamil", 15 | "age": 31, 16 | "email": "rtamil@email.com" 17 | }, 18 | { 19 | "name": "Sundar Pichai", 20 | "age": 21, 21 | "email": "spichai@email.com" 22 | } 23 | ] 24 | 25 | } -------------------------------------------------------------------------------- /final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Firebase CRUD Javascript 6 | 7 | 8 | 9 | 10 |

Firebase CRUD with Javascript 11 |
User App 12 |

13 | 14 | 15 | 16 |
17 | 18 |
19 |

Add User

20 | name:
21 |
22 | age:
23 |
24 | email:
25 |
26 | 27 |
28 |
29 | 30 | 31 |
32 |
33 |

Edit user

34 | 35 | name:
36 |
37 | age:
38 |
39 | email:
40 |
41 | 42 |
43 |
44 | 45 | 46 | 47 | 48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /final/style.css: -------------------------------------------------------------------------------- 1 | body, h1, h2 { 2 | margin:0; 3 | padding:0; 4 | } 5 | body { 6 | background:#039be5; 7 | font-family: Arial, sans-serif; 8 | } 9 | h1 { 10 | padding:10px; 11 | background:#ffcc00; 12 | } 13 | 14 | /*---------------------------*/ 15 | /* Read Users */ 16 | /*---------------------------*/ 17 | #user-list { 18 | margin:0; 19 | padding:0; 20 | width:180px; 21 | float:left; 22 | margin:10px; 23 | border:1px solid #4fc3fc; 24 | } 25 | 26 | #user-list h2 { 27 | padding:10px; 28 | margin:0; 29 | color:white; 30 | } 31 | 32 | #user-list li { 33 | padding:5px 10px; 34 | border-top:1px solid #4fc3fc; 35 | cursor: pointer; 36 | color:white; 37 | font-style: italic; 38 | list-style: none 39 | } 40 | 41 | #user-list li:hover { 42 | background: #4fc3fc; 43 | } 44 | 45 | #user-detail { 46 | float:left; 47 | width:200px; 48 | margin:10px; 49 | margin-left:0; 50 | padding:10px; 51 | border:1px solid #4fc3fc; 52 | color:white; 53 | } 54 | 55 | 56 | 57 | /* Add User Module */ 58 | #add-user-module { 59 | width:30px; 60 | margin-bottom: 1px; 61 | margin-left: 10px; 62 | margin-top:10px; 63 | } 64 | 65 | #add-user-module #open-add-user-form-btn { 66 | background: #54bb7d; 67 | font-size: 1.5em; 68 | color: white; 69 | padding-bottom: 5px; 70 | } 71 | 72 | #add-user-module form { 73 | position: absolute; 74 | padding: 10px; 75 | width: 150px; 76 | background-color: #e1e1e1; 77 | border: 1px solid #999; 78 | display: none; 79 | } 80 | 81 | #add-user-module form input { 82 | width: 97%; 83 | margin: 2px 0; 84 | } 85 | 86 | #add-user-module form button { 87 | background: #54bb7d; 88 | font-size: 1em; 89 | padding: 0px 10px; 90 | color: white; 91 | margin-top: 10px; 92 | } 93 | 94 | 95 | #add-user-module:hover form { 96 | display: block; 97 | } 98 | 99 | 100 | /*Edit*/ 101 | #edit-user-module { 102 | display: none; 103 | position: absolute; 104 | background-color: #e1e1e1; 105 | border: 1px solid #999; 106 | top:149px; 107 | left: 160px; 108 | padding: 10px; 109 | width: 150px; 110 | } 111 | 112 | #user-list li:hover~#edit-user-module { 113 | display: none; 114 | } 115 | 116 | 117 | #edit-user-module form button { 118 | background: #54bb7d; 119 | font-size: 1em; 120 | padding: 0px 10px; 121 | color: white; 122 | margin-top: 10px; 123 | } 124 | 125 | -------------------------------------------------------------------------------- /start/app.js: -------------------------------------------------------------------------------- 1 | 2 | // !IMPORTANT: REPLACE WITH YOUR OWN CONFIG OBJECT BELOW 3 | 4 | 5 | // Initialize Firebase 6 | var config = { 7 | apiKey: "************************", 8 | authDomain: "************************", 9 | databaseURL: "************************", 10 | projectId: "************************", 11 | storageBucket: "************************", 12 | messagingSenderId: "************************", 13 | }; 14 | 15 | 16 | 17 | firebase.initializeApp(config); 18 | 19 | // Firebase Database Reference and the child 20 | const dbRef = firebase.database().ref(); 21 | const usersRef = dbRef.child('users'); 22 | 23 | 24 | readUserData(); 25 | 26 | 27 | // -------------------------- 28 | // READ 29 | // -------------------------- 30 | function readUserData() { 31 | 32 | const userListUI = document.getElementById("user-list"); 33 | 34 | usersRef.on("value", snap => { 35 | 36 | userListUI.innerHTML = "" 37 | 38 | snap.forEach(childSnap => { 39 | 40 | let key = childSnap.key, 41 | value = childSnap.val() 42 | 43 | let $li = document.createElement("li"); 44 | 45 | $li.innerHTML = value.name; 46 | 47 | $li.setAttribute("user-key", key); 48 | $li.addEventListener("click", userClicked) 49 | userListUI.append($li); 50 | 51 | }); 52 | 53 | 54 | }) 55 | 56 | } 57 | 58 | 59 | 60 | function userClicked(e) { 61 | 62 | 63 | var userID = e.target.getAttribute("user-key"); 64 | 65 | const userRef = dbRef.child('users/' + userID); 66 | const userDetailUI = document.getElementById("user-detail"); 67 | 68 | userRef.on("value", snap => { 69 | 70 | userDetailUI.innerHTML = "" 71 | 72 | snap.forEach(childSnap => { 73 | var $p = document.createElement("p"); 74 | $p.innerHTML = childSnap.key + " - " + childSnap.val(); 75 | userDetailUI.append($p); 76 | }) 77 | 78 | }); 79 | 80 | 81 | } 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /start/data-model.json: -------------------------------------------------------------------------------- 1 | { 2 | "users": [ 3 | { 4 | "name": "Alex Meraz", 5 | "age": 24, 6 | "email": "ameraz@email.com" 7 | }, 8 | { 9 | "name": "Mohammed Rafi", 10 | "age": 21, 11 | "email": "mrafi@email.com" 12 | }, 13 | { 14 | "name": "Raja Tamil", 15 | "age": 31, 16 | "email": "rtamil@email.com" 17 | }, 18 | { 19 | "name": "Sundar Pichai", 20 | "age": 21, 21 | "email": "spichai@email.com" 22 | } 23 | ] 24 | 25 | } -------------------------------------------------------------------------------- /start/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Firebase CRUD Javascript 6 | 7 | 8 | 9 | 10 |

Firebase CRUD with Javascript 11 |
User App 12 |

13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /start/style.css: -------------------------------------------------------------------------------- 1 | body, h1, h2 { 2 | margin:0; 3 | padding:0; 4 | } 5 | body { 6 | background:#039be5; 7 | font-family: Arial, sans-serif; 8 | } 9 | h1 { 10 | padding:10px; 11 | background:#ffcc00; 12 | } 13 | 14 | /*---------------------------*/ 15 | /* Read Users */ 16 | /*---------------------------*/ 17 | #user-list { 18 | margin:0; 19 | padding:0; 20 | width:180px; 21 | float:left; 22 | margin:10px; 23 | border:1px solid #4fc3fc; 24 | } 25 | 26 | #user-list h2 { 27 | padding:10px; 28 | margin:0; 29 | color:white; 30 | } 31 | 32 | #user-list li { 33 | padding:5px 10px; 34 | border-top:1px solid #4fc3fc; 35 | cursor: pointer; 36 | color:white; 37 | font-style: italic; 38 | list-style: none 39 | } 40 | 41 | #user-list li:hover { 42 | background: #4fc3fc; 43 | } 44 | 45 | #user-detail { 46 | float:left; 47 | width:200px; 48 | margin:10px; 49 | margin-left:0; 50 | padding:10px; 51 | border:1px solid #4fc3fc; 52 | color:white; 53 | } 54 | 55 | 56 | --------------------------------------------------------------------------------