Skip to content

Commit 532f14f

Browse files
Kiril95Kiril95
committed
First exercises
1 parent b131ee4 commit 532f14f

File tree

9 files changed

+443
-0
lines changed

9 files changed

+443
-0
lines changed

‎JS Applications/Asynchronous Programming - Exercises/01.Bus-Stop/app.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
function getInfo() {
2+
let idField = document.querySelector('#stopId').value;
3+
let stopNameField = document.querySelector('#stopName');
4+
let busSection = document.querySelector('#buses');
5+
let validIds = ['1287', '1308', '1327', '2334'];
6+
const url = `http://localhost:3030/jsonstore/bus/businfo/${idField}`;
7+
8+
fetch(url)
9+
.then(response => {
10+
if (!validIds.includes(idField)) {
11+
throw new Error('Error');
12+
}
13+
14+
return response.json();
15+
})
16+
.then(data => {
17+
busSection.replaceChildren(); // Smart way for removing the list elements
18+
19+
Object.entries(data.buses)
20+
.map(([bus, time]) => {
21+
let liElement = document.createElement('li');
22+
liElement.textContent = `Bus ${bus} arrives in ${time}`;
23+
24+
busSection.appendChild(liElement);
25+
});
26+
})
27+
.catch(error => {
28+
busSection.replaceChildren(); // Incase of an error the bus section must be cleared aswell
29+
30+
stopNameField.textContent = error.message;
31+
})
32+
33+
}

‎JS Applications/Asynchronous Programming - Exercises/01.Bus-Stop/index.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+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Bus Stop</title>
7+
<link rel="stylesheet" href="./styles.css">
8+
</head>
9+
10+
<body>
11+
<div id="stopInfo" style="width:20em">
12+
<div>
13+
<label for="stopId">Stop ID: </label>
14+
<input id="stopId" type="text">
15+
<input id="submit" type="button" value="Check" onclick="getInfo()"></div>
16+
<div id="result">
17+
<div id="stopName"></div>
18+
<ul id="buses"></ul>
19+
</div>
20+
</div>
21+
<script src="./app.js"></script>
22+
</body>
23+
24+
</html>

‎JS Applications/Asynchronous Programming - Exercises/01.Bus-Stop/styles.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
2+
input[type=text] {
3+
padding: 12px 20px;
4+
margin: 8px 0;
5+
display: inline-block;
6+
border: 1px solid #ccc;
7+
border-radius: 4px;
8+
box-sizing: border-box;
9+
}
10+
input[type=button] {
11+
background-color: #4CAF50;
12+
color: white;
13+
padding: 10px 16px;
14+
border: none;
15+
border-radius: 4px;
16+
cursor: pointer;
17+
}
18+
input[type=button]:hover {
19+
background-color: #45a049;
20+
}
21+
body {
22+
margin: auto;
23+
width: 25%;
24+
text-align: center;
25+
padding: 20px;
26+
font-family: 'Open Sans', serif;
27+
}
28+
#stopName {
29+
font-size: 1.5em;
30+
margin: 8px 0;
31+
font-weight: 400;
32+
padding: 0.25em;
33+
border-radius: 4px;
34+
background-color: aquamarine;
35+
}

‎JS Applications/Asynchronous Programming - Exercises/02.Bus-Schedule/app.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
function solve() {
2+
let infoField = document.querySelector('.info');
3+
let departBtn = document.querySelector('#depart');
4+
let arriveBtn = document.querySelector('#arrive');
5+
let stopId = 'depot'; // Start station
6+
7+
function depart() {
8+
const url = `http://localhost:3030/jsonstore/bus/schedule/${stopId}`;
9+
10+
fetch(url)
11+
.then(response => {
12+
if (response.status != 200) { // 204 states - 'No content'
13+
throw new Error('Error');
14+
}
15+
16+
return response.json();
17+
})
18+
.then(data => {
19+
departBtn.disabled = true;
20+
arriveBtn.disabled = false;
21+
22+
infoField.textContent = `Next stop ${data.name}`;
23+
})
24+
.catch(error => {
25+
departBtn.disabled = true;
26+
arriveBtn.disabled = true;
27+
infoField.textContent = error.message;
28+
})
29+
}
30+
31+
function arrive() {
32+
const url = `http://localhost:3030/jsonstore/bus/schedule/${stopId}`;
33+
34+
fetch(url)
35+
.then(response => {
36+
if (response.status != 200) {
37+
throw new Error('Error');
38+
}
39+
40+
return response.json();
41+
})
42+
.then(data => {
43+
departBtn.disabled = false;
44+
arriveBtn.disabled = true;
45+
stopId = data.next;
46+
47+
infoField.textContent = `Arriving at ${data.name}`;
48+
})
49+
.catch(error => {
50+
departBtn.disabled = true;
51+
arriveBtn.disabled = true;
52+
infoField.textContent = error.message;
53+
})
54+
}
55+
56+
return { depart, arrive };
57+
}
58+
59+
let result = solve();

‎JS Applications/Asynchronous Programming - Exercises/02.Bus-Schedule/index.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Bus Schedule</title>
7+
<link rel="stylesheet" href="./styles.css">
8+
</head>
9+
10+
<body>
11+
<div id="schedule">
12+
<div id="info"><span class="info">Not Connected</span></div>
13+
<div id="controls">
14+
<input id="depart" value="Depart" type="button" onclick="result.depart()">
15+
<input id="arrive" value="Arrive" type="button" onclick="result.arrive()" disabled="true">
16+
</div>
17+
</div>
18+
<script src="./app.js"></script>
19+
</body>
20+
21+
</html>

‎JS Applications/Asynchronous Programming - Exercises/02.Bus-Schedule/styles.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
2+
input[type=text] {
3+
padding: 12px 20px;
4+
margin: 8px 0;
5+
display: inline-block;
6+
border: 1px solid #ccc;
7+
border-radius: 4px;
8+
box-sizing: border-box;
9+
}
10+
input[type=button] {
11+
padding: 10px 16px;
12+
border: none;
13+
border-radius: 4px;
14+
cursor: pointer;
15+
}
16+
body {
17+
margin: auto;
18+
width: 25%;
19+
text-align: center;
20+
padding: 20px;
21+
font-family: 'Open Sans', serif;
22+
}
23+
#schedule {
24+
text-align: center;
25+
width: 400px;
26+
}
27+
input {
28+
width: 120px;
29+
}
30+
#info {
31+
background-color: aquamarine;
32+
border: 1px none black;
33+
border-radius: 4px;
34+
margin: 0.25em;
35+
}
36+
.info {
37+
font-size: 1.5em;
38+
padding: 0.25em;
39+
}

‎JS Applications/Asynchronous Programming - Exercises/03.Forecaster/app.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
const baseUrl = `http://localhost:3030/jsonstore/forecaster`;
2+
let forecastDiv = document.querySelector('#forecast');
3+
let locationField = document.querySelector('#location');
4+
let currentDiv;
5+
let upcomingDiv;
6+
let code = '';
7+
8+
function attachEvents() {
9+
let weatherBtn = document.querySelector('#submit');
10+
weatherBtn.addEventListener('click', getForecast);
11+
};
12+
13+
async function getForecast() {
14+
15+
if (locationField.value) {
16+
const specialSymbols = {
17+
'Sunny': '&#x2600;',
18+
'Partly sunny': '&#x26C5;',
19+
'Overcast': '&#x2601;',
20+
'Rain': '&#x2614;',
21+
'Degrees': '&#176;'
22+
};
23+
24+
try {
25+
code = await getCode();
26+
locationField.value = '';
27+
28+
} catch (error) {
29+
return clearPanels();
30+
}
31+
32+
try {
33+
let currentForecast = await getTodaysForecast(); // Data
34+
currentDiv = document.querySelector('#current');
35+
currentDiv.replaceChildren(); // Remove all info
36+
37+
let [condition, high, low] = Object.values(currentForecast.forecast);
38+
forecastDiv.style.display = 'block';
39+
40+
let headDiv = createElement('div', 'label', "Current conditions", currentDiv);
41+
let forecastsDiv = createElement('div', 'forecasts', null, currentDiv);
42+
43+
let symbolSpan = createElement('span', 'condition symbol', null, forecastsDiv);
44+
symbolSpan.innerHTML = specialSymbols[condition]; // No choise but to use innerHTML
45+
46+
let conditionSpan = createElement('span', 'condition', null, forecastsDiv);
47+
let locationSpan = createElement('span', 'forecast-data', currentForecast.name, conditionSpan);
48+
let temperatureSpan = createElement('span', 'forecast-data', `${low}°/${high}°`, conditionSpan);
49+
let forecastSpan = createElement('span', 'forecast-data', condition, conditionSpan);
50+
51+
} catch (error) {
52+
return clearPanels();
53+
}
54+
55+
try {
56+
let futureForecast = await getUpcomingForecast(); // Data
57+
upcomingDiv = document.querySelector('#upcoming');
58+
upcomingDiv.replaceChildren(); // Remove all info
59+
60+
let headDiv = createElement('div', 'label', "Three-day forecast", upcomingDiv);
61+
forecastsDiv = createElement('div', 'forecast-info', null, upcomingDiv);
62+
63+
for (let info of Object.values(futureForecast.forecast)) {
64+
let upcomingSpan = createElement('span', 'upcoming', null, forecastsDiv);
65+
66+
let symbolSpan = createElement('span', 'symbol', null, upcomingSpan);
67+
symbolSpan.innerHTML = specialSymbols[info.condition];
68+
69+
let temperatureSpan = createElement('span', 'forecast-data', `${info.low}°/${info.high}°`, upcomingSpan);
70+
let forecastSpan = createElement('span', 'forecast-data', info.condition, upcomingSpan);
71+
}
72+
73+
} catch (error) {
74+
return clearPanels();
75+
}
76+
}
77+
}
78+
79+
async function getCode() {
80+
const response = await fetch(`${baseUrl}/locations`);
81+
let data = await response.json();
82+
code = '';
83+
84+
Object.values(data).forEach(el => {
85+
if (locationField.value == el.name) {
86+
code = el.code;
87+
}
88+
})
89+
return code;
90+
}
91+
92+
async function getTodaysForecast() {
93+
const response = await fetch(`${baseUrl}/today/${code}`);
94+
95+
return await response.json();
96+
}
97+
98+
async function getUpcomingForecast() {
99+
const response = await fetch(`${baseUrl}/upcoming/${code}`);
100+
101+
return await response.json();
102+
}
103+
104+
function clearPanels() {
105+
forecastDiv.style.display = 'block';
106+
forecastDiv.replaceChildren();
107+
let div1 = createElement('div', undefined, undefined, forecastDiv);
108+
div1.id = 'current';
109+
let div2 = createElement('div', undefined, undefined, forecastDiv);
110+
div2.id = 'upcoming';
111+
112+
let attachError = createElement('div', 'label', "Error", div1);
113+
}
114+
115+
function createElement(type, className, textCon, parent) {
116+
const element = document.createElement(type);
117+
118+
if (textCon) {
119+
element.textContent = textCon;
120+
}
121+
if (className) {
122+
element.className = className;
123+
}
124+
if (parent) {
125+
parent.appendChild(element);
126+
}
127+
128+
return element;
129+
}
130+
131+
attachEvents();

‎JS Applications/Asynchronous Programming - Exercises/03.Forecaster/index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Forecaster</title>
7+
<link rel="stylesheet" href="./styles.css">
8+
</head>
9+
10+
<body>
11+
<div id="content">
12+
<div id="request">
13+
<input id="location" class='bl' type="text">
14+
<input id="submit" class="bl" type="button" value="Get Weather">
15+
</div>
16+
<div id="forecast" style="display:none">
17+
<div id="current">
18+
<div class="label">Current conditions</div>
19+
</div>
20+
<div id="upcoming">
21+
<div class="label">Three-day forecast</div>
22+
</div>
23+
</div>
24+
</div>
25+
<script src="./app.js"></script>
26+
</body>
27+
28+
</html>

0 commit comments

Comments
 (0)