Skip to content

Instantly share code, notes, and snippets.

@bobbravo2

bobbravo2/5-recentuser.html

Created August 6, 2016 15:47
Show Gist options
  • Save bobbravo2/0fe285a104cbe757ff8c95b7e9459389 to your computer and use it in GitHub Desktop.
Save bobbravo2/0fe285a104cbe757ff8c95b7e9459389 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
5-recentuser.html
<!DOCTYPE html>
<html lang="en">
<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" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</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="text">Name:</label>
<input type="text" class="form-control" id="nameinput">
</div>
<div class="form-group">
<label for="text">Email:</label>
<input type="email" class="form-control" id="emailinput">
</div>
<div class="form-group">
<label for="text">Age:</label>
<input type="number" class="form-control" id="ageinput">
</div>
<div class="form-group">
<label for="comment">How did you hear about us?</label>
<textarea class="form-control" rows="5" id="commentinput"></textarea>
</div>
<button type="submit" class="btn btn-default" id="addUser">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="recentMember">
<h2 id="namedisplay">Jimmy John</h2>
<h4 id="emaildisplay">Email: [email protected]</h4>
<h4 id="agedisplay">Age: 27</h4>
<p id="commentdisplay">I'm signing up, because I want to spread sandwiches to the world.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified CSS & JS -->
<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>
// ========================================== START CODING BELOW!!
// Initialize Firebase
// Create a variable to reference the database
// Capture Button Click
$("#addUser").on("click", function() {
// YOUR TASK!!!
// Code in the logic for storing and retrieving the most recent user.
// Dont forget to handle the "initial load"
// Don't refresh the page!
return false;
});
// Create Firebase "watcher" (.on("value"))
// Create Error Handling
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment