Skip to content

Commit 8956211

Browse files
author
WolfNda
committed
Phonebook App Complete
1 parent 99983d4 commit 8956211

29 files changed

+4620
-117
lines changed

‎ExerciseThree/PhoneBookBootstrap.css~‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.col-lg-6 {
2+
border: 1px solid green;
3+
height: 30px;
4+
}
5+
6+
.col-lg-12 {
7+
border: 1px solid red;
8+
height: 200px;
9+
}

‎ExerciseThree/PhoneBookBootstrap.html~‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>
5+
Phonebook App
6+
</title>
7+
8+
<!-- Latest compiled and minified CSS -->
9+
10+
<link rel="stylesheet" type="text/css" href="PhoneBookBootstrap.css">
11+
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
13+
14+
<!-- Optional theme -->
15+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap-theme.min.css">
16+
17+
</head>
18+
19+
<body>
20+
21+
<div class="container">
22+
23+
<div class="row">
24+
<div class="row">
25+
<div class="col-lg-6 col-md-12 top">
26+
</div>
27+
28+
<div class="col-lg-6 col-md-12 bottom">
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
34+
<body>
35+
36+
37+
</html>

‎ExerciseThree/Ratchet.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
margin-top: 40px;
3+
}

‎ExerciseThree/Ratchet.css~‎

Whitespace-only changes.

‎ExerciseThree/Ratchet_Page1.html~‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
5+
<head>
6+
7+
<title>
8+
My Phonebook
9+
</title>
10+
11+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
12+
13+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
14+
15+
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
16+
17+
<link href="dist/css/ratchet.min.css" rel="stylesheet">
18+
19+
<link href="index.css" rel="stylesheet">
20+
21+
<script type="text/javascript" src="UserInterface.js"></script>
22+
23+
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
24+
25+
</head>
26+
27+
28+
<body>
29+
30+
<header id="topBar" class="bar bar-nav">
31+
32+
<a class="icon icon-compose pull-right"></a>
33+
34+
<h1 class="title">Contacts</h1>
35+
</header>
36+
37+
38+
<ul id="numbersList" class="table-view">
39+
<li class="table-view-cell media">
40+
41+
<img class="media-object pull-left" src="http://placehold.it/42x42">
42+
<div class="media-body">
43+
Name
44+
<p>Number
45+
</p>
46+
<span class="media-object pull-right icon icon-trash"></span>
47+
</div>
48+
49+
50+
</li>
51+
52+
<li class="table-view-cell media">
53+
54+
<img class="media-object pull-left" src="http://placehold.it/42x42">
55+
<div class="media-body">
56+
Name
57+
<p>Number
58+
</p>
59+
<span class="media-object pull-right icon icon-trash"></span>
60+
</div>
61+
62+
63+
</li>
64+
65+
<li class="table-view-cell media">
66+
67+
<img class="media-object pull-left" src="http://placehold.it/42x42">
68+
<div class="media-body">
69+
Name
70+
<p>Number
71+
</p>
72+
<span class="media-object pull-right icon icon-trash"></span>
73+
</div>
74+
75+
76+
</li>
77+
78+
<li class="table-view-cell media">
79+
80+
<img class="media-object pull-left" src="http://placehold.it/42x42">
81+
<div class="media-body">
82+
Name
83+
<p>Number
84+
</p>
85+
<span class="media-object pull-right icon icon-trash"></span>
86+
</div>
87+
88+
89+
</li>
90+
91+
92+
<li class="table-view-cell media">
93+
94+
<img class="media-object pull-left" src="http://placehold.it/42x42">
95+
<div class="media-body">
96+
Name
97+
<p>Number
98+
</p>
99+
<span class="media-object pull-right icon icon-trash"></span>
100+
</div>
101+
102+
103+
</li>
104+
105+
<li class="table-view-cell media">
106+
107+
<img class="media-object pull-left" src="http://placehold.it/42x42">
108+
<div class="media-body">
109+
Name
110+
<p>Number
111+
</p>
112+
<span class="media-object pull-right icon icon-trash"></span>
113+
</div>
114+
115+
116+
</li>
117+
118+
<li class="table-view-cell media">
119+
120+
<img class="media-object pull-left" src="http://placehold.it/42x42">
121+
<div class="media-body">
122+
Name
123+
<p>Numberz
124+
</p>
125+
<span class="media-object pull-right icon icon-trash"></span>
126+
</div>
127+
128+
129+
</li>
130+
</ul>
131+
132+
133+
134+
</body>
135+
136+
</html>
137+

‎ExerciseThree/UserInterface.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
#container {
22

3-
height: 520px;
4-
width: 600px;
3+
height: 550px;
4+
width: 300px;
55
border: 1px solid orange;
66
background-color: orange;
77
border-radius: 15px;
@@ -11,7 +11,7 @@
1111
#searchBox {
1212

1313
height: 140px;
14-
width: 550px;
14+
width: 250px;
1515
border: 2px solid #FF4500;
1616
border-radius: 15px;
1717
margin-top: 20px;

‎ExerciseThree/UserInterface.css~‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
#container {
22

3-
height: 520px;
4-
width: 700px;
3+
height: 550px;
4+
width: 300px;
55
border: 1px solid orange;
66
background-color: orange;
77
border-radius: 15px;
@@ -11,7 +11,7 @@
1111
#searchBox {
1212

1313
height: 140px;
14-
width: 550px;
14+
width: 350px;
1515
border: 2px solid #FF4500;
1616
border-radius: 15px;
1717
margin-top: 20px;

‎ExerciseThree/UserInterface.html‎

Lines changed: 46 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,14 @@
99

1010
<title>Addy Book</title>
1111

12+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable= no"/>
13+
1214
<script type="text/javascript" src="UserInterface.js"></script>
1315

1416
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
1517

18+
<link href="dist/css/ratchet.min.css" rel="stylesheet">
19+
1620
<link rel="stylesheet" type="text/css" href="UserInterface.css">
1721
</head>
1822

@@ -21,52 +25,69 @@
2125

2226
<center>
2327
<div id="container">
24-
<center><h1>My Address Book </h1></center>
25-
<br>
26-
<center>
28+
29+
<header class="bar-title">
30+
31+
<h1 class="title">My Address Book </h1>
32+
33+
</header>
2734

2835
<form id="MyForm">
2936

30-
First Name:<input type="text" name="firstname" placeholder="Enter First Name here" id="firstname" class="inputs" /><br><br>
31-
Last Name:<input type="text" name="lastname" placeholder="Enter Last Name here" id="lastname" class="inputs" /><br><br>
32-
Cell Provider<input type="text" name="cellprovider" placeholder="Enter Cell Provider here" id="cellprovider" class="inputs" /><br><br>
33-
Cell Number:<input type="text" name="cellnumber" placeholder="Enter Cell Number here" id="cellnumber" class="inputs"/><br><br>
37+
<div class="input-group">
3438

35-
<input type="submit" value="Add Contact" id="add"/>
39+
First Name:<input type="text" name="firstname" placeholder="Enter First Name here" id="firstname" class="inputs" />
40+
Last Name:<input type="text" name="lastname" placeholder="Enter Last Name here" id="lastname" class="inputs" />
41+
Cell Provider<input type="text" name="cellprovider" placeholder="Enter Cell Provider here" id="cellprovider" class="inputs" />
42+
Cell Number:<input type="text" name="cellnumber" placeholder="Enter Cell Number here" id="cellnumber" class="inputs"/>
43+
44+
<input type="submit" value="Add Contact" id="add"/>
45+
</div>
3646

3747
</form>
3848

39-
</center>
49+
50+
51+
52+
53+
</center>
4054

41-
<center>
55+
<center>
4256

43-
<div id="searchBox">
57+
<div id="card">
4458

45-
<center><h3>Search</h3></center>
46-
47-
48-
<input type="text" name="search" id="search" class="inputs3"/>
49-
<button type="submit" value="search" id="RunSearch">Search</button>
50-
<button type="submit" value="refresh" id="refresh">Refresh</button>
59+
<center><h3 class=""title>Search</h3></center>
60+
5161

52-
53-
54-
<br>
62+
63+
<input type="text" name="search" id="search" class="inputs3"/>
64+
<button type="submit" value="search" id="RunSearch">Search</button>
65+
<button type="submit" value="refresh" id="refresh">Refresh</button>
66+
67+
5568
<div id="boundary">
56-
<div id="numbers">
57-
5869

70+
<div id="numbers">
5971

6072
</div>
73+
6174
<div id ="numbers2">
6275

6376
</div>
6477

6578
</div>
66-
</div>
67-
</center>
79+
80+
</div>
81+
82+
</center>
6883

6984
</div>
70-
</center>
85+
86+
</center>
87+
88+
<script src="dist/js/ratchet.min.js">
89+
90+
</script>
91+
7192
</body>
7293
</html>

0 commit comments

Comments
 (0)