desoga10/firestore_get.html

## firestore_get.html
<html>
    <head>
            <title>Firebase FireStore</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">

            <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
         </script>


    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>

    </head>

    <body >

                   <!--
                          A Div for everything
                            -->

             <div width='100%' style="padding:4px; background-color:#c41f14; color:#ffffff; ">
                    <b>firebase - firestore test</b>
            </div>

                  <form id="submitInfo">
            <div style="padding:4px; background-color:#353232; color:#f3f1f1; ">

                           <br>
                <div width='100%' style="padding:2px; background-color:#f7f1f1; color:#000000; ">
                       <b> Add User Information: </b></div>
                 <div style=" padding:5px;"> <br>Username:<br>
                  <input name="username" type="text" id="username" size="45" />

                     </div>

                           <br>
                           <button style="color:#000000; ">Create Username</button>
                </div>
              </form>


 <!-- We will use this list to display usernames -->

                 <ul id="name-list">

                </ul>

              </div>


<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "Your Key",
    authDomain: "Your project",
    databaseURL: "Your URL",
    projectId: "Replace",
    appId: "1:9Your App ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  var db = firebase.firestore();
      //  db.settings({timestampsInSnapshots:true});

/*
access the list and form info by making these calls
*/
let nlist = document.querySelector('#name-list');
let form = document.querySelector('#submitInfo');

//ADD DATA - saving data

form.addEventListener('submit',(e)=> {

e.preventDefault();//keeps page from refreshing
db.collection('users').add({
  username: form.username.value //, and new line to add more fields

});
form.username.value = "";


})


db.collection('users').get().then((snapshot)=>{
    getInfo(snapshot.docs);
});


    var html = "";
     var el = document.getElementById("name-list");
function getInfo(data){
  data.forEach(doc => {
     var info = doc.data();
      console.log(info.email);
      html +=" <li class=\"collection-item\">";
      html += "<div>" + info.username + "</div>";
      html +=   "</li>";
});
   el.innerHTML = html;
}


 </script>


    </body>


    </html>
	<html>
	<head>
	<title>Firebase FireStore</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
	<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
	</script>


	<!-- The core Firebase JS SDK is always required and must be listed first -->
	<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>
	<script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>

	</head>

	<body >

	<!--
	A Div for everything
	-->

	<div width='100%' style="padding:4px; background-color:#c41f14; color:#ffffff; ">
	<b>firebase - firestore test</b>
	</div>

	<form id="submitInfo">
	<div style="padding:4px; background-color:#353232; color:#f3f1f1; ">

	<br>
	<div width='100%' style="padding:2px; background-color:#f7f1f1; color:#000000; ">
	<b> Add User Information: </b></div>
	<div style=" padding:5px;"> <br>Username:<br>
	<input name="username" type="text" id="username" size="45" />

	</div>

	<br>
	<button style="color:#000000; ">Create Username</button>
	</div>
	</form>



	<!-- We will use this list to display usernames -->

	<ul id="name-list">

	</ul>

	</div>



	<script>
	// Your web app's Firebase configuration
	var firebaseConfig = {
	apiKey: "Your Key",
	authDomain: "Your project",
	databaseURL: "Your URL",
	projectId: "Replace",
	appId: "1:9Your App ID"
	};
	// Initialize Firebase
	firebase.initializeApp(firebaseConfig);
	var db = firebase.firestore();
	// db.settings({timestampsInSnapshots:true});

	/*
	access the list and form info by making these calls
	*/
	let nlist = document.querySelector('#name-list');
	let form = document.querySelector('#submitInfo');

	//ADD DATA - saving data

	form.addEventListener('submit',(e)=> {

	e.preventDefault();//keeps page from refreshing
	db.collection('users').add({
	username: form.username.value //, and new line to add more fields

	});
	form.username.value = "";



	})




	db.collection('users').get().then((snapshot)=>{
	getInfo(snapshot.docs);
	});


	var html = "";
	var el = document.getElementById("name-list");
	function getInfo(data){
	data.forEach(doc => {
	var info = doc.data();
	console.log(info.email);
	html +=" <li class=\"collection-item\">";
	html += "<div>" + info.username + "</div>";
	html += "</li>";
	});
	el.innerHTML = html;
	}




	</script>



	</body>



	</html>