-
Notifications
You must be signed in to change notification settings - Fork 0
/
Contact Card.html
48 lines (47 loc) · 2.05 KB
/
Contact Card.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact Cards</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src= 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
var count = 0
$( document ).ready(function() {
$('form').submit(function(){
return false;
});
$('input[type=submit]').click(function(){
$('#card_list').append('<div class="card"><h1 class=' + count + '>' + $("#first_name").val() + ' ' + $("#last_name").val() + '</h1>' + '<p class="text' + count + '" style="display:none">' + $("#desc").val() + '</p>' + '<h2 class=' + count + '>Click Here to Show More!</h2><button class="text' + count + '" style="display:none" counter="' + count + '">Hide Description</button>')
count++
});
$(document).on('click', 'h2', function(){
$(".text" + $(this).attr("class")).show()
$("." + $(this).attr("class")).hide()
});
$(document).on('click', 'button', function(){
$(".text" + $(this).attr("counter")).hide()
$("." + $(this).attr("counter")).show()
});
});
</script>
</head>
<body>
<div id="container">
<h1>Contact Cards</h1>
<ul>
<li>First Name: </li>
<li>Last Name: </li>
<li>Description:</li>
</ul>
<form id="name">
<input type="text" id="first_name" placeholder="First Name">
<input type="text" id="last_name" placeholder="Last Name">
<textarea id="desc" placeholder="Description" rows="8" cols="40"></textarea>
<input type="submit" id="submit" value="Add User">
</form>
<div id="card_list">
</div>
</div>
</body>
</html>