Skip to content

Instantly share code, notes, and snippets.

@pankajpatel

pankajpatel/contacts.html

Last active August 29, 2015 14:17
Show Gist options
  • Save pankajpatel/5b276af6637254b2d0df to your computer and use it in GitHub Desktop.
Save pankajpatel/5b276af6637254b2d0df to your computer and use it in GitHub Desktop.
Download ZIP
Contacts Store Application Html page
Raw
contacts.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Time to Hack: Firebase with JavaScript and jQuery</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style type="text/css">
#contacts p,
#contacts p.lead{
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Contact Store Application</h1>
<hr/>
<div class="row">
<div class="col-md-6">
<form method="post" name="contactForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" required placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required placeholder="Enter Email">
</div>
<h3>Location</h3>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="Enter City">
</div>
<div class="form-group">
<label for="email">State</label>
<input type="text" class="form-control" id="state" placeholder="Enter State">
</div>
<div class="form-group">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-primary addValue">Submit</button>
</form>
</div>
<div class="col-md-6">
<ul id="contacts" class="list-group">
<!-- Conatct Object li.list-group-item.contact will be added here by js -->
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Include Firebase Library -->
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<!-- Contacts Store JavaScript -->
<script src="script.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment