Skip to content

Commit 2448fc7

Browse files
parkhabitparkhabit
authored
Merge branch 'master' into frontEnd-Validation
2 parents a7260a2 + 36ae90a commit 2448fc7

File tree

6 files changed

+198
-122
lines changed

6 files changed

+198
-122
lines changed

‎public/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
</head>
1212

1313
<body>
14+
<p id="display_username" class=display_username></p>
1415
<section class="dataContainer" id="data_container">
1516

1617
</section>
@@ -37,4 +38,4 @@ <h3 class="tagline">Record the item you've purchased below</h3>
3738
<script src="/public/index.js"></script>
3839
</body>
3940

40-
</html>
41+
</html>

‎public/index.js

+33-20
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,17 @@ var datePurchased = document.getElementById('date');
77
var btn = document.getElementById('generateCost');
88
var logoutBtn = document.getElementById('logout');
99
var dataContainer = document.getElementById('data_container');
10+
var displayUsername = document.getElementById('display_username');
1011

1112
window.onload = function() {
1213
displayCurrentItems();
14+
request('username', 'GET', function(err, res) {
15+
if (err) {
16+
console.log(err)
17+
} else {
18+
displayUsername.innerText = res
19+
}
20+
})
1321
};
1422

1523
//generic xhr XMLHttpRequest
@@ -18,7 +26,6 @@ function request(url, method, cb, body) {
1826
xhr.onreadystatechange = function() {
1927
if (xhr.readyState === 4) {
2028
if (xhr.status === 200) {
21-
console.log('what', JSON.parse(xhr.responseText))
2229
cb(null, JSON.parse(xhr.responseText));
2330
} else {
2431
var errorMessage = JSON.parse(xhr.responseText);
@@ -37,7 +44,6 @@ function displayCurrentItems() {
3744
clearDataContainer();
3845
var itemContainer = document.createElement('div');
3946
itemContainer.className = 'item_container';
40-
4147
res.forEach(function(item, i) {
4248
var date = new Date(res[i].date_purchased);
4349
var options = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
@@ -86,29 +92,36 @@ btn.addEventListener('click', function(event) {
8692
request('sumall', 'GET', function(err, res) {
8793
if (err) console.log(err);
8894
clearDataContainer();
95+
var summedCosts = res.summedCosts;
96+
var average = res.average;
97+
/* Total user Spending */
8998
var sum_container = document.createElement('div');
9099
sum_container.className = 'item_container';
91-
var heading=document.createElement('h3');
92-
var headerText= document.createTextNode('Total user\'s spending');
93-
heading.appendChild(headerText);
94-
sum_container.appendChild(heading);
95-
96-
res.forEach(function(item, i) {
97-
var displaytext=document.createElement('p');
98-
displaytext.appendChild(document.createTextNode(res[i].user_name+ " has spent a total of £" + Number(res[i].sum).toFixed(2)));
100+
var heading = document.createElement('h3');
101+
var headerText = document.createTextNode('Total Spent');
102+
heading.appendChild(headerText);
103+
sum_container.appendChild(heading);
104+
summedCosts.forEach(function(item, i) {
105+
var displaytext = document.createElement('p');
106+
displaytext.appendChild(document.createTextNode(summedCosts[i].user_name + " has spent a total of £" + Number(summedCosts[i].sum).toFixed(2)));
99107
sum_container.appendChild(displaytext);
100108
})
101109
dataContainer.appendChild(sum_container);
110+
/* Average Spending */
111+
var heading = document.createElement('h3');
112+
var headerText = document.createTextNode('The average amount spent was £' + average);
113+
heading.appendChild(headerText);
114+
sum_container.appendChild(heading);
102115
})
103116
})
104117

105-
logoutBtn.addEventListener('click', function(event){
106-
var xhr = new XMLHttpRequest();
107-
xhr.onreadystatechange = function (){
108-
if(xhr.readyState === 4 && xhr.status === 201){
109-
window.location.href = xhr.getResponseHeader('location');
110-
}
111-
}
112-
xhr.open('GET', 'logout', true);
113-
xhr.send();
114-
})
118+
logoutBtn.addEventListener('click', function(event) {
119+
var xhr = new XMLHttpRequest();
120+
xhr.onreadystatechange = function() {
121+
if (xhr.readyState === 4 && xhr.status === 201) {
122+
window.location.href = xhr.getResponseHeader('location');
123+
}
124+
}
125+
xhr.open('GET', 'logout', true);
126+
xhr.send();
127+
})

‎public/style.css

+45-43
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ html,
22
body {
33
font-family: 'Quicksand', sans-serif;
44
width: 100vw;
5-
65
/*height: 100vh;*/
76
margin: 0;
87
padding: 0;
@@ -39,7 +38,7 @@ body {
3938
}
4039

4140
.tagline {
42-
margin-left: 10%;
41+
margin-left: 10%;
4342
}
4443

4544
input,
@@ -57,29 +56,30 @@ select,
5756
}
5857

5958
.sumbtn {
60-
margin-left: 10%;
61-
background-color: #E2E0E1;
59+
margin-left: 10%;
60+
background-color: #E2E0E1;
6261
}
6362

6463
.logoutbtn {
65-
color: white;
66-
font-family: 'Quicksand', sans-serif;
67-
font-size: 0.9em;
68-
text-align: center;
69-
width: 80%;
70-
height: 3rem;
71-
margin-bottom: 1rem;
72-
border: 1px solid #d3d3d3;
73-
background: rgba(255, 255, 255, 0.7);
74-
border-radius: 5px;
75-
background-color: rgb(22, 21, 23);
76-
margin-left: 10%;
64+
color: white;
65+
font-family: 'Quicksand', sans-serif;
66+
font-size: 0.9em;
67+
text-align: center;
68+
width: 80%;
69+
height: 3rem;
70+
margin-bottom: 1rem;
71+
border: 1px solid #d3d3d3;
72+
background: rgba(255, 255, 255, 0.7);
73+
border-radius: 5px;
74+
background-color: rgb(22, 21, 23);
75+
margin-left: 10%;
7776
}
77+
7878
.dataContainer {
7979
display: flex;
8080
align-items: center;
8181
min-width: 60%;
82-
padding:0;
82+
padding: 0;
8383
background-color: white;
8484
opacity: 0.7;
8585
}
@@ -97,31 +97,33 @@ select,
9797
width: 100%;
9898
}
9999

100-
/*media queries for desktop*/
101-
@media screen and (min-width: 550px) {
102-
103-
body {
104-
display: flex;
105-
justify-content: flex-end;
106-
flex-direction: row;
107-
/*change height to 100vh*/
108-
}
109-
110100

111-
.form_container {
112-
width: 30%;
113-
114-
}
115-
116-
.header {
117-
padding-left: 10%;
118-
margin-top: 2em;
119-
margin-bottom: 2em;
120-
text-align: left;
121-
}
122-
123-
.dataContainer {
124-
padding: 5%;
125-
}
101+
/*media queries for desktop*/
126102

127-
}
103+
@media screen and (min-width: 550px) {
104+
body {
105+
display: flex;
106+
justify-content: flex-end;
107+
flex-direction: row;
108+
/*change height to 100vh*/
109+
}
110+
.form_container {
111+
width: 30%;
112+
}
113+
.header {
114+
padding-left: 10%;
115+
margin-top: 2em;
116+
margin-bottom: 2em;
117+
text-align: left;
118+
}
119+
.dataContainer {
120+
padding: 5%;
121+
}
122+
.display_username {
123+
background: rgba(255, 255, 255, 0.7);
124+
margin: 0;
125+
height: 50px;
126+
padding: 2%;
127+
z-index: 2;
128+
}
129+
}

0 commit comments

Comments
 (0)