-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (120 loc) · 5.34 KB
/
index.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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>COMP 6905 Assignment 1</title>
<meta name="description" content="COMP 6905 Assignment 1">
<meta name="author" content="Lucas Critch, Ruben Chevez, Carlos Salcedo, Tian Wang">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.11/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.5.11/js/mdb.min.js"></script>
<style>
.projectTitle {
text-align: center;
font-size: 150%;
text-decoration-line: underline;
}
#listTitle {
text-align: center;
font-size: 200%;
}
p {
word-wrap: break-word;
}
.description {
text-align: center;
}
body {
padding-top: 65px;
}
</style>
</head>
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-dark blue scrolling-navbar">
<a class="navbar-brand" href="#"><strong>COMP 6905 Assignment 1 webpage</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Opinions</a>
</li> -->
</ul>
</div>
</nav>
</header>
<body>
<div class="container">
<div class="row">
<div class="col-md mx-auto">
<p id="listTitle">List of Projects</p>
<ul class="list-group mb-2" id="researchList">
</ul>
</div>
</div>
<div class="row">
<div class="btn-group mx-auto" role="group">
<button type="button" class="btn btn-info m-1" id="addProject">Add</button>
<button type="button" class="btn btn-info m-1" id="deleteResearch">Delete</button>
</div>
</div>
<div class="row">
<div id="newProjectForm" class="text-center border border-light p-5 col-sm invisible mx-auto">
<input type="text" id="projectName" class="form-control mb-4" placeholder="Project Name">
<textarea class="form-control mb-4" id="projectDescription" maxlength="150" rows="3" placeholder="Write description here"></textarea>
<button class="btn btn-info" id="submitProject">Submit</button>
</div>
</div>
</div>
</body>
<footer class="page-footer font-small blue fixed-bottom">
<div class="page-footer text-center py-3">Lucas Critch, Ruben Chevez, Tian Wang, Carlos Salcedo
</div>
</footer>
<script>
$( document ).ready(function() {
$('#researchList').on('click','li',function(){
$('#researchList .list-group-item').removeClass("active");
$( this ).addClass('active');
$('#projectDescription').removeClass("invisible");
});
$('#deleteResearch').on('click', function() {
$('#researchList .list-group-item').remove('.active');
});
$('#addProject').on('click', function() {
$('#newProjectForm').removeClass('invisible');
$('#newProjectForm').addClass('visible');
});
$('#submitProject').on('click', function() {
$('#newProjectForm').removeClass('visible');
$('#newProjectForm').addClass('invisible');
if ( $('#projectName').val() != '' ) {
$("#researchList").append('<li class="list-group-item"><p class="projectTitle">' + $('#projectName').val() +
'</p><p class="description">' + $('#projectDescription').val() + '</p></li>');
}
});
});
</script>
</html>