acbrent25
9/4/2017 - 5:48 PM

Most Recent User Example

Most Recent User Example

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en-us">

<head>

  <meta charset="UTF-8">
  <title>Sign-Up Today!</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>

<body>

  <div class="container">

    <br>

    <!-- Jumbotron -->
    <div class="jumbotron">
      <h1 class="text-center">Sign-Up Today!</h1>
    </div>
    <div class="row">

      <!-- Sign-Up Panel-->
      <div class="col-lg-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">New Member Sign-Up</h3>
          </div>
          <div class="panel-body">

            <!-- Sign-up Form (note the various input "types")-->
            <form role="form">
              <div class="form-group">
                <label for="name-input">Name:</label>
                <input class="form-control" id="name-input" type="text">
              </div>
              <div class="form-group">
                <label for="email-input">Email:</label>
                <input class="form-control" id="email-input" type="email">
              </div>
              <div class="form-group">
                <label for="age-input">Age:</label>
                <input class="form-control" id="age-input" type="number">
              </div>
              <div class="form-group">
                <label for="comment-input">How did you hear about us?</label>
                <textarea class="form-control" id="comment-input" rows="5"></textarea>
              </div>
              <button class="btn btn-default" id="add-user" type="submit">Submit</button>
            </form>
          </div>
        </div>
      </div>

      <!-- Most Recent Member Panel -->
      <div class="col-lg-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Most Recent Member</h3>
          </div>
          <div class="panel-body" id="recent-member">
            <h2 id="name-display">Jimmy John</h2>
            <h4 id="email-display">Email: jimmy@john.edu</h4>
            <h4 id="age-display">Age: 27</h4>
            <p id="comment-display">I'm signing up, because I want to spread sandwiches to the world.</p>
          </div>
        </div>
      </div>

    </div>

  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery.js"></script>

  <!-- LINK TO FIREBASE GOES HERE -->
  <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>

  <!-- Script -->
  <script>
    // START CODING BELOW!!

    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyA5eYKsB8T2q6rMGdKSvac6eQsWTzsZEjE",
      authDomain: "fir-recent-user.firebaseapp.com",
      databaseURL: "https://fir-recent-user.firebaseio.com",
      storageBucket: "fir-recent-user.appspot.com"
    };

    firebase.initializeApp(config);

    // Create a variable to reference the database
    var database = firebase.database();

    // Initial Values
    var name = "";
    var email = "";
    var age = 0;
    var comment = "";

    // Capture Button Click
    $("#add-user").on("click", function() {
      // Don't refresh the page!
      event.preventDefault();

      // YOUR TASK!!!
      // Code in the logic for storing and retrieving the most recent user.
      // Don't forget to provide initial data to your Firebase database.
      name = $("#name-input").val().trim();
      email = $("#email-input").val().trim();
      age = $("#age-input").val().trim();
      comment = $("#comment-input").val().trim();

      database.ref().set({
        name: name,
        email: email,
        age: age,
        comment: comment
      });

    });

    // Firebase watcher + initial loader HINT: .on("value")
    database.ref().on("value", function(snapshot) {

      // Log everything that's coming out of snapshot
      console.log(snapshot.val());
      console.log(snapshot.val().name);
      console.log(snapshot.val().email);
      console.log(snapshot.val().age);
      console.log(snapshot.val().comment);

      // Change the HTML to reflect
      $("#name-display").html(snapshot.val().name);
      $("#email-display").html(snapshot.val().email);
      $("#age-display").html(snapshot.val().age);
      $("#comment-display").html(snapshot.val().comment);

      // Handle the errors
    }, function(errorObject) {
      console.log("Errors handled: " + errorObject.code);
    });
  </script>

</body>

</html>