Skip to content

Commit 22cc137

Browse files
SonicTheCatSonicTheCat
committed
REST AND HTTP REQUESTS EXERCISE
1 parent e318489 commit 22cc137

File tree

8 files changed

+306
-0
lines changed

8 files changed

+306
-0
lines changed

‎03.REST And HTTP Requests/01.BusStop.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Bus Stop</title>
6+
<style>
7+
#stopName {
8+
font-size: 1.5em;
9+
font-weight: 400;
10+
padding: 0.25em;
11+
background-color: aquamarine;
12+
}
13+
</style>
14+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
15+
<script defer src="01.BusStop.js"></script>
16+
</head>
17+
<body>
18+
<div id="stopInfo" style="width:20em">
19+
<div>
20+
<label for="stopId">Stop ID: </label>
21+
<input id="stopId" type="text">
22+
<input id="submit" type="button" value="Check" onclick="getInfo()"></div>
23+
<div id="result">
24+
<div id="stopName"></div>
25+
<ul id="buses"></ul>
26+
</div>
27+
</div>
28+
</body>
29+
</html>

‎03.REST And HTTP Requests/01.BusStop.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
function getInfo() {
2+
let id = $("#stopId").val();
3+
let stopName = $("#stopName");
4+
let list = $("#buses");
5+
6+
let req = {
7+
method: "GET",
8+
url: `https://judgetests.firebaseio.com/businfo/${id}.json`,
9+
success: appendBusses,
10+
error: handleError
11+
};
12+
$.ajax(req);
13+
14+
function appendBusses(data) {
15+
stopName.text(data.name);
16+
list.empty();
17+
for (let bus in data.buses) {
18+
list.append($(`<li>Bus ${bus} arrives in ${data.buses[bus]} minutes</li>`));
19+
}
20+
}
21+
22+
function handleError(err) {
23+
stopName.text("Error");
24+
list.empty();
25+
console.log(err.statusText)
26+
}
27+
}

‎03.REST And HTTP Requests/02.BusSchedule.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Bus Schedule</title>
6+
<style>
7+
#schedule {
8+
text-align: center;
9+
width: 400px;
10+
}
11+
12+
input {
13+
width: 120px;
14+
}
15+
16+
#info {
17+
background-color: aquamarine;
18+
border: 1px solid black;
19+
margin: 0.25em;
20+
}
21+
22+
.info {
23+
font-size: 1.5em;
24+
padding: 0.25em;
25+
}
26+
</style>
27+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
28+
<script defer src="02.BusSchedule.js"></script>
29+
</head>
30+
<body>
31+
<div id="schedule">
32+
<div id="info"><span class="info">Not Connected</span></div>
33+
<div id="controls">
34+
<input id="depart" value="Depart" type="button" onclick="result.depart()">
35+
<input id="arrive" value="Arrive" type="button" onclick="result.arrive()" disabled="true">
36+
</div>
37+
</div>
38+
</body>
39+
</html>

‎03.REST And HTTP Requests/02.BusSchedule.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
function solve() {
2+
let currentStop = "";
3+
let nextStopId = "depot";
4+
const baseUrl = `https://judgetests.firebaseio.com/schedule/`;
5+
let departBtn = $("#depart");
6+
let arriveBtn = $("#arrive");
7+
8+
function depart() {
9+
departBtn.prop("disabled", true);
10+
arriveBtn.prop("disabled", false);
11+
12+
let req = {
13+
method: "GET",
14+
url: baseUrl + "/" + nextStopId + ".json",
15+
success: nextStopResult,
16+
error: handleError
17+
};
18+
$.ajax(req)
19+
}
20+
21+
function arrive() {
22+
departBtn.prop("disabled", false);
23+
arriveBtn.prop("disabled", true);
24+
$("span").text(`Arriving at ${currentStop}`);
25+
}
26+
27+
function nextStopResult(stop) {
28+
currentStop = stop.name;
29+
$("span").text(`Next stop ${currentStop}`);
30+
nextStopId = stop.next;
31+
}
32+
33+
function handleError() {
34+
departBtn.prop("disabled", true);
35+
arriveBtn.prop("disabled", true);
36+
$("span").text(`Error`);
37+
}
38+
39+
return {depart, arrive};
40+
}
41+
42+
let result = solve();

‎03.REST And HTTP Requests/03.Messenger.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Messenger</title>
6+
<style>
7+
label { display: inline-block; width: 5em; }
8+
#author, #content { width: 30em; }
9+
</style>
10+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
11+
<script src="03.Messenger.js"></script>
12+
</head>
13+
<body>
14+
<div id="main">
15+
<textarea id="messages" cols="80" rows="12" disabled="true"></textarea>
16+
<div id="controls">
17+
<label for="author">Name: </label><input id="author" type="text"><br>
18+
<label for="content">Message: </label><input id="content" type="text">
19+
<input id="submit" type="button" value="Send">
20+
<input id="refresh" type="button" value="Refresh">
21+
</div>
22+
</div>
23+
<script>
24+
attachEvents();
25+
</script>
26+
</body>
27+
</html>

‎03.REST And HTTP Requests/03.Messenger.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
function attachEvents() {
2+
let baseUrl = `https://messenger-9668a.firebaseio.com/messenger`;
3+
let textArea = $("#messages");
4+
let author = $("#author");
5+
let content = $("#content");
6+
7+
loadMessages();
8+
9+
$("#submit").click(postNewMessage);
10+
$("#refresh").click(loadMessages);
11+
12+
function postNewMessage() {
13+
if (author.val().length === 0 || content.val().length === 0) {
14+
return;
15+
}
16+
let msg = {author: author.val(), content: content.val(), timestamp: Date.now()};
17+
let req = {
18+
method: "POST",
19+
url: baseUrl + ".json",
20+
data: JSON.stringify(msg),
21+
success: () => {
22+
author.val("");
23+
content.val("");
24+
},
25+
error: handleError
26+
};
27+
$.ajax(req);
28+
}
29+
30+
function loadMessages() {
31+
let req = {
32+
method: "GET",
33+
url: baseUrl + ".json",
34+
success: displayMsg,
35+
error: handleError
36+
};
37+
$.ajax(req)
38+
}
39+
40+
function displayMsg(data) {
41+
let text = "";
42+
let sortedIds = Object.keys(data).sort((a, b) => sortByDate(a, b, data));
43+
for (let id of sortedIds) {
44+
text += data[id].author + ": " + data[id].content + "\n";
45+
}
46+
textArea.text(text);
47+
}
48+
49+
function handleError(err) {
50+
console.log(err);
51+
}
52+
53+
function sortByDate(obj1, obj2, data) {
54+
let timeOne = data[obj1].timestamp;
55+
let timeTwo = data[obj2].timestamp;
56+
57+
return timeOne - timeTwo;
58+
}
59+
}

‎03.REST And HTTP Requests/04.Phonebook.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Phonebook</title>
6+
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
7+
<script src="04.Phonebook.js"></script>
8+
</head>
9+
<body>
10+
<h1>Phonebook</h1>
11+
<ul id="phonebook"></ul>
12+
<button id="btnLoad">Load</button>
13+
14+
<h2>Create Contact</h2>
15+
Person: <input type="text" id="person"/>
16+
<br>
17+
Phone: <input type="text" id="phone"/>
18+
<br>
19+
<button id="btnCreate">Create</button>
20+
<script>
21+
attachEvents();
22+
</script>
23+
</body>
24+
</html>

‎03.REST And HTTP Requests/04.Phonebook.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
function attachEvents() {
2+
let list = $("#phonebook");
3+
let baseUrl = "https://phonebook-nakov.firebaseio.com/phonebook";
4+
let name = $("#person");
5+
let phone = $("#phone");
6+
7+
$("#btnLoad").click(loadContacts);
8+
9+
function loadContacts() {
10+
list.empty();
11+
let request = {
12+
url: baseUrl + ".json",
13+
method: "GET",
14+
success: successFunc,
15+
error: handleError
16+
};
17+
$.ajax(request);
18+
}
19+
20+
$("#btnCreate").click(createElement);
21+
22+
function createElement() {
23+
let contact = {person: name.val(), phone: phone.val()};
24+
if (name.val().length === 0 || phone.val().length === 0) {
25+
return;
26+
}
27+
let request = {
28+
url: baseUrl + ".json",
29+
method: "POST",
30+
data: JSON.stringify(contact),
31+
success: loadContacts,
32+
error: handleError
33+
};
34+
$.ajax(request);
35+
name.val("");
36+
phone.val("");
37+
}
38+
39+
function successFunc(contacts) {
40+
for (let user in contacts) {
41+
list.append($(`<li>${contacts[user].person}: ${contacts[user].phone}</li>`)
42+
.append($("<button id='dltBtn'>Delete</button>").click(() => deleteContact(user))));
43+
}
44+
}
45+
46+
function handleError(err) {
47+
console.log(err)
48+
}
49+
50+
function deleteContact(id) {
51+
let req = {
52+
url: `${baseUrl}/${id}.json`,
53+
method: "DELETE",
54+
success: loadContacts,
55+
error: handleError
56+
};
57+
$.ajax(req);
58+
}
59+
}

0 commit comments

Comments
 (0)