Skip to content

Commit d1e0b64

Browse files
WDverseWDverse
committed
added bootstrap columns to align table next to card and added custom styling to btns
1 parent b54d813 commit d1e0b64

1 file changed

Lines changed: 97 additions & 91 deletions

File tree

‎index.html‎

Lines changed: 97 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,111 @@
11
<!DOCTYPE html>
22

33
<html lang="en">
4-
<head>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<title>Project Tracker</title>
8-
<link
9-
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
10-
rel="stylesheet"
11-
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
12-
crossorigin="anonymous"
13-
/>
14-
<link rel="stylesheet" href="./assets/style.css" />
15-
</head>
164

17-
<body>
18-
<header>
19-
<h1>Project Tracker</h1>
20-
<h2>Current Time & Date:</h2>
21-
<h2 id="date"></h2>
22-
</header>
5+
<head>
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<title>Project Tracker</title>
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
11+
<link rel="stylesheet" href="./assets/./css/style.css" />
12+
</head>
2313

24-
<main>
25-
<div class="card m-4" style="width: 18rem">
26-
<div class="card-body">
27-
<h5 class="card-title">Instructions</h5>
28-
<p class="card-text">
29-
Click the button below to open a form and provide information for the following:
30-
</p>
14+
<body>
15+
<header class="p-5 mb-4 text-center header">
16+
<h1>Project Tracker</h1>
17+
<h2>Current Time & Date:</h2>
18+
<h2 id="date"></h2>
19+
</header>
20+
21+
<main class="container-fluid">
22+
<div class="row">
23+
<div class="col-md col-xl-4">
24+
<div class="card mb-3">
25+
<h2 class="h4 card-header">Instructions</h2>
26+
<div class="card-body">
27+
<p class="card-text">
28+
Click the button below to open a form and provide information for the following:
29+
</p>
30+
</div>
31+
<ul class="list-group list-group-flush">
32+
<li class="list-group-item">Project Name</li>
33+
<li class="list-group-item">Project Type</li>
34+
<li class="list-group-item">Due Date</li>
35+
</ul>
36+
<div class="card-footer">
37+
<button type="button" id="custom-trigger-modal" class="btn btn-primary m-2 btn-block w-100 custom-add-project-btn" data-bs-toggle="modal"
38+
data-bs-target="#new-project-modal"> Add Project</button>
39+
</div>
3140
</div>
32-
<ul class="list-group list-group-flush">
33-
<li class="list-group-item">Project Name</li>
34-
<li class="list-group-item">Project Type</li>
35-
<li class="list-group-item">Due Date</li>
36-
<button type="button" id = "custom-trigger-modal" class="btn btn-primary m-2" data-bs-toggle="modal" data-bs-target="#new-project-modal"> Add Project</button>
37-
</div>
38-
</ul>
3941
</div>
40-
<!-- Project table -->
41-
<div>
42+
<!-- Project table -->
43+
<div class="col-md col-xl-8">
4244
<table class="table">
43-
<thead>
44-
<tr>
45-
<th scope="col">Project Name</th>
46-
<th scope="col">Project Type</th>
47-
<th scope="col">Due Date</th>
48-
</tr>
49-
</thead>
50-
<tbody id="project-table">
51-
52-
</tbody>
53-
</table>
45+
<thead>
46+
<tr>
47+
<th scope="col">Project Name</th>
48+
<th scope="col">Project Type</th>
49+
<th scope="col">Due Date</th>
50+
</tr>
51+
</thead>
52+
<tbody id="project-table">
53+
54+
</tbody>
55+
</table>
56+
5457
</div>
5558

5659

57-
<!-- Modal -->
58-
<div class="modal fade" id="new-project-modal" tabindex="-1" aria-labelledby="new-project-modal-Label" aria-hidden="true">
59-
<div class="modal-dialog">
60-
<div class="modal-content">
61-
<form id="project-form">
62-
<div class="modal-header">
63-
<h1 class="modal-title fs-5" id="new-project-modal-Label">Add a new project</h1>
64-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
65-
</div>
66-
<div class="modal-body">
67-
<div class="mb-3">
68-
<label for="project-name-input" class="form-label">Project Name</label>
69-
<input type="text" class="form-control" id="project-name-input" placeholder="Enter project name" required>
70-
</div>
71-
<div class="mb-3">
72-
<label for="project-type-input">Project Type</label>
73-
<select id="project-type-input" class="form-select">
74-
<option value="Web Application (Front End)">Web Application (Front End)</option>
75-
<option value="Web Application (Back End)">Web Application (Back End)</option>
76-
<option value="Web Application (Full Stack)">Web Application (Full Stack)</option>
77-
<option value="Moble Application">Mobile Application</option>
78-
<option value="Print Campaign">Print Campaign</option>
79-
<option value="Digital Marketing Campaign">Digital Marketing Campaign</option>
80-
</select>
81-
</div>
82-
83-
<div class="mb-3">
84-
<label for="project-date-input">Project Date</label>
85-
<input id="project-date-input" type="date" class="form-control" required>
60+
<!-- Modal -->
61+
<div class="modal fade" id="new-project-modal" tabindex="-1" aria-labelledby="new-project-modal-Label"
62+
aria-hidden="true">
63+
<div class="modal-dialog">
64+
<div class="modal-content">
65+
<form id="project-form">
66+
<div class="modal-header">
67+
<h1 class="modal-title fs-5" id="new-project-modal-Label">Add a new project</h1>
68+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
69+
</div>
70+
<div class="modal-body">
71+
<div class="mb-3">
72+
<label for="project-name-input" class="form-label">Project Name</label>
73+
<input type="text" class="form-control" id="project-name-input" placeholder="Enter project name"
74+
required>
75+
</div>
76+
<div class="mb-3">
77+
<label for="project-type-input">Project Type</label>
78+
<select id="project-type-input" class="form-select">
79+
<option value="Web Application (Front End)">Web Application (Front End)</option>
80+
<option value="Web Application (Back End)">Web Application (Back End)</option>
81+
<option value="Web Application (Full Stack)">Web Application (Full Stack)</option>
82+
<option value="Moble Application">Mobile Application</option>
83+
<option value="Print Campaign">Print Campaign</option>
84+
<option value="Digital Marketing Campaign">Digital Marketing Campaign</option>
85+
</select>
86+
</div>
87+
88+
<div class="mb-3">
89+
<label for="project-date-input">Project Date</label>
90+
<input id="project-date-input" type="date" class="form-control" required>
91+
</div>
92+
</div>
93+
<div class="modal-footer">
94+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
95+
<button type="submit" class="btn btn-primary custom-add-project-btn" data-bs-dismiss="modal">Add Project</button>
96+
</div>
97+
</form>
8698
</div>
8799
</div>
88-
<div class="modal-footer">
89-
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
90-
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Add Project</button>
91-
</div>
92-
</form>
93-
</div>
94-
</div>
95-
</div>
96-
100+
</div>
101+
</main>
102+
<footer class= 'text-center custom-footer'> Project Tracker &copy; 2025</footer>
103+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
104+
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
105+
crossorigin="anonymous"></script>
106+
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js"></script>
107+
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
108+
<script src="./assets/js/index.js"></script>
109+
</body>
97110

98-
</main>
99-
<footer></footer>
100-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
101-
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js"></script>
102-
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
103-
<script src="./assets/index.js"></script>
104-
</body>
105-
</html>
111+
</html>

0 commit comments

Comments
 (0)