Skip to content

Commit b18b9d8

Browse files
anderspollackanderspollack
committed
Initial commit
0 parents  commit b18b9d8

File tree

8 files changed

+1398
-0
lines changed

8 files changed

+1398
-0
lines changed

‎client/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.DS_Store

‎client/client.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
var leftButtonClickCount;
2+
3+
window.addEventListener('load', () => {
4+
5+
// DATE TEXT
6+
fetch('http://localhost:5678/current_date_text')
7+
.then((response) => {
8+
return response.text()
9+
})
10+
.then((currentDateText) => {
11+
console.log(currentDateText);
12+
var main = document.querySelector(".current-date-text");
13+
main.textContent = currentDateText;
14+
});
15+
16+
// LEFT BUTTON
17+
var leftButton = document.querySelector('.big-button');
18+
var greenClickCounter = leftButton.querySelector('span');
19+
20+
getLeftButtonClickCount(greenClickCounter);
21+
22+
leftButton.addEventListener('click', () => {
23+
leftButtonClickCount++;
24+
greenClickCounter.textContent = leftButtonClickCount;
25+
postLeftButtonClickCount(leftButtonClickCount);
26+
});
27+
});
28+
29+
// LEFT BUTTON: GET
30+
function getLeftButtonClickCount(clickCounterSpan) {
31+
try {
32+
fetch('http://localhost:5678/big_button')
33+
.then((response) => {
34+
return response.text()
35+
})
36+
.then((clickCount) => {
37+
leftButtonClickCount = clickCount;
38+
clickCounterSpan.textContent = clickCount;
39+
});
40+
} catch (error) {
41+
console.log(error);
42+
}
43+
}
44+
45+
// LEFT BUTTON: POST
46+
function postLeftButtonClickCount(clickCount) {
47+
fetch('http://localhost:5678/big_button', {
48+
method: 'POST',
49+
headers: {
50+
'Content-Type': 'text/plain;charset=UTF-8'
51+
},
52+
body: String(clickCount)
53+
})
54+
}
55+

‎client/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>Client</title>
6+
<script src="client.js"></script>
7+
<link href="style.css" rel="stylesheet"/>
8+
</head>
9+
<body>
10+
11+
<h1>Welcome to the world wide web baby</h1>
12+
13+
<div class="current-date-text"></div>
14+
15+
<div class="buttons">
16+
<button class="big-button">
17+
Clicked
18+
<br/>
19+
<span>0</span>
20+
<br/>
21+
Times
22+
</button>
23+
</div>
24+
25+
</body>
26+
</html>

‎client/style.css

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.buttons {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: space-between;
5+
}
6+
7+
.buttons button {
8+
width: 400px;
9+
margin: 1em;
10+
padding: 1em;
11+
font-size: 2em;
12+
border-radius: 0.5em;
13+
border-width: 0.5em;
14+
}
15+
16+
button span {
17+
font-size: 200%;
18+
font-weight: 900;
19+
color: green;
20+
}

‎server/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
.DS_Store

‎server/index.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var express = require('express');
2+
var cors = require('cors');
3+
var bodyParser = require('body-parser');
4+
var app = express();
5+
var leftButtonClickCount = 0;
6+
var rightButtonClickCount = 0;
7+
8+
app.use(cors());
9+
app.use(bodyParser.text());
10+
11+
app.get("/current_date_text", (request, response) => {
12+
var currentDate = new Date();
13+
response.send(`The server added this text to the page on ${currentDate.toString()}`);
14+
})
15+
16+
app.get("/big_button", (request, response) => {
17+
response.send(leftButtonClickCount.toString());
18+
});
19+
20+
app.post("/big_button", (request, response) => {
21+
console.log('left', request.body);
22+
leftButtonClickCount = request.body;
23+
});
24+
25+
app.listen(5678, () => console.log('Server app listening on port 5678'));

0 commit comments

Comments
 (0)