Created
October 17, 2020 23:08
-
-
Save Akash2002/2515eaf895115119a07033f34562137d to your computer and use it in GitHub Desktop.
Show how Firestore works with web apps
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <div class = "inputbox"> | |
| <label for="fname">First name:</label><br> | |
| <input type="text" id="fname" name="fname"><br> | |
| <label for="lname">Last name:</label><br> | |
| <input type="text" id="lname" name="lname"><br> | |
| <button type="submit" value="Submit" onclick = "pushData()"> Submit </button> | |
| </div> | |
| <p id = "data"> This will be your data </p> | |
| <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script> | |
| <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-firestore.js"></script> | |
| <!-- TODO: Add SDKs for Firebase products that you want to use | |
| https://firebase.google.com/docs/web/setup#available-libraries --> | |
| <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-analytics.js"></script> | |
| <script> | |
| // Your web app's Firebase configuration | |
| // For Firebase JS SDK v7.20.0 and later, measurementId is optional | |
| var firebaseConfig = { | |
| apiKey: "AIzaSyCAEd7h544gxjIOpglZ7XWF4rV-IkVvmbU", | |
| authDomain: "test-85523.firebaseapp.com", | |
| databaseURL: "https://test-85523.firebaseio.com", | |
| projectId: "test-85523", | |
| storageBucket: "test-85523.appspot.com", | |
| messagingSenderId: "86268235396", | |
| appId: "1:86268235396:web:bb1d5d2708b38b72f53cd1", | |
| measurementId: "G-8W4NSWYM6C" | |
| }; | |
| // Initialize Firebase | |
| firebase.initializeApp(firebaseConfig); | |
| firebase.analytics(); | |
| var db = firebase.firestore(); | |
| var fname = document.getElementById("fname"); | |
| var lname = document.getElementById("lname"); | |
| var data = document.getElementById("data"); | |
| function pushData () { | |
| db.collection("users").add({ | |
| fname: fname.value, | |
| lname: lname.value | |
| }); | |
| } | |
| db.collection("users").get().then(function(snapshot) { | |
| snapshot.forEach(function(document) { | |
| var d = document.data(); | |
| data.innerHTML = d.fname + d.lname; | |
| console.log(document.data().fname); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment