Skip to content

Commit d76356d

Browse files
sima-qiansima-qian
authored
Merge pull request #54 from sunuwars/add-styling
Add styling
2 parents 0821b75 + 888728e commit d76356d

File tree

3 files changed

+410
-22
lines changed

3 files changed

+410
-22
lines changed

‎public/index.html

+21-20
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,35 @@
77
<meta http-equiv="X-UA-Compatible" content="ie=edge">
88
<link rel="stylesheet" href="style.css">
99
<link rel="icon" href="favicon.ico" type="image/x-icon" />
10-
<title>Document</title>
10+
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700,900" rel="stylesheet">
11+
<title>Michael's List</title>
1112
</head>
1213

1314
<body>
1415
<main>
15-
<h1>Michael's List</h1>
16-
<h2>Lend and borrow your fellow FAC friends' stuff</h2>
16+
<header>
17+
<h1>Michael's List</h1>
18+
<h2>Just FAC it!</h2>
19+
<h3>Lend and borrow items with your FAC friends</h3>
20+
</header>
1721
<section class="borrow-container">
18-
<h3>Borrowing to go here</h3>
19-
<form>
22+
<h3>Would you like to borrow anything?</h3>
23+
<form id="search-form">
2024
<input type="text" id="search-input" placeholder="Enter your search here..." autocomplete="off">
2125
<button id="search-btn">search</button>
2226
<button id="all-items-btn">all items</button>
2327
</form>
2428
<section class="table-container">
2529
<table id="items-table">
2630
<tr>
27-
<th>Item Name</th>
28-
<th>Item Description</th>
31+
<th id="name-column">Item Name</th>
32+
<th id="desc-column">Item Description</th>
2933
</tr>
3034
</table>
3135
</section>
3236
</section>
33-
<section class="lend-container">
34-
<h3>Lending to go here</h3>
35-
</section>
36-
<section class="request-container">
37-
<form id="request-form" class="hidden">
38-
<input type="text" id="name-input" placeholder="Enter your name here..." autocomplete="off" required>
39-
<input type="email" id="email-input" placeholder="Enter your email here..." autocomplete="off" required>
40-
<input type="number" id="item-id" class="hidden">
41-
<button id="request-btn">request to borrow</button>
42-
</form>
43-
<div id='success'></div>
44-
</section>
4537
<section class="submit-item-container">
38+
<h3>Would you like to lend anything?</h3>
4639
<form id="submit-item-form" class="something" method="post" action="/add-item">
4740
<input type="text" id="lender-name" placeholder="Enter your name" autocomplete="off" required>
4841
<input type="email" id="lender-email" placeholder="Enter your email address" autocomplete="off" required>
@@ -52,7 +45,15 @@ <h3>Lending to go here</h3>
5245
<button id="submit-item" type="submit">Submit your item</button>
5346
</form>
5447
</section>
55-
48+
<section class="request-container">
49+
<form id="request-form" class="hidden request-stuff">
50+
<input type="text" id="name-input" placeholder="Enter your name here..." autocomplete="off" required>
51+
<input type="email" id="email-input" placeholder="Enter your email here..." autocomplete="off" required>
52+
<input type="number" id="item-id" class="hidden">
53+
<button id="request-btn">request to borrow</button>
54+
</form>
55+
<div id='success'></div>
56+
</section>
5657
</main>
5758
<script type="text/javascript" src="script.js"></script>
5859
</body>

‎public/script.js

+16
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ var successDiv = document.getElementById("success");
99
var reqForm = document.getElementById("request-form");
1010
var submitItemBtn = document.getElementById("submit-item");
1111
var allItemsBtn = document.getElementById("all-items-btn");
12+
var nameCol = document.getElementById("name-column");
13+
var descCol = document.getElementById("desc-column");
1214

1315
function request(url, method, cb) {
1416
var xhr = new XMLHttpRequest();
@@ -124,6 +126,20 @@ function updateDom(err, data) {
124126
var table = document.getElementById("items-table");
125127
clearList(table);
126128

129+
//add headers
130+
var nameHeader = document.createElement("th");
131+
var descHeader = document.createElement("th");
132+
var buttonHeader = document.createElement("th");
133+
var row = document.createElement("tr");
134+
135+
nameHeader.textContent = "Item Name";
136+
descHeader.textContent = "Item Description";
137+
buttonHeader.textContent = "Borrow";
138+
row.appendChild(nameHeader);
139+
row.appendChild(descHeader);
140+
row.appendChild(buttonHeader);
141+
table.appendChild(row);
142+
127143
if (items.length > 0) {
128144
items.forEach(function(item) {
129145
// adding our item names

0 commit comments

Comments
 (0)