Skip to content

Commit 3874269

Browse files
slavBarkalslavBarkal
committed
mudule 5 labe ex 3
refactor lab starter and solution. change all vars to const and let in both files. in solution refactor xmlHttpRequests to fetch api request and remove all jquery.
1 parent e109ee8 commit 3874269

File tree

9 files changed

+103
-510
lines changed

9 files changed

+103
-510
lines changed

‎Allfiles/Mod05/Labfiles/Solution/Exercise 3/ContosoConf/ContosoConf.csproj‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
<Content Include="about.htm" />
9191
<Content Include="registered.htm" />
9292
<Content Include="Global.asax" />
93-
<Content Include="scripts\jquery.min.js" />
9493
<Content Include="scripts\pages\register.js" />
9594
<Content Include="scripts\pages\schedule.js" />
9695
<Content Include="schedule.htm" />

‎Allfiles/Mod05/Labfiles/Solution/Exercise 3/ContosoConf/schedule.htm‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8"/>
@@ -53,7 +53,6 @@ <h1>Schedule</h1>
5353
</div>
5454
</footer>
5555

56-
<script src="/scripts/jquery.min.js" type="text/javascript"></script>
5756
<script src="/scripts/pages/schedule.js" type="text/javascript"></script>
5857
</body>
5958
</html>

‎Allfiles/Mod05/Labfiles/Solution/Exercise 3/ContosoConf/scripts/jquery.min.js‎

Lines changed: 0 additions & 211 deletions
This file was deleted.

‎Allfiles/Mod05/Labfiles/Solution/Exercise 3/ContosoConf/scripts/pages/register.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// Get the registration <form> element from the DOM.
2-
var form = document.getElementById("registration-form");
3-
var submitButton = form.querySelector("button");
2+
const form = document.getElementById("registration-form");
3+
const submitButton = form.querySelector("button");
44
// Get the <input> elements from the DOM.
5-
var passwordInput = document.getElementById("password");
6-
var confirmPasswordInput = document.getElementById("confirm-password");
5+
const passwordInput = document.getElementById("password");
6+
const confirmPasswordInput = document.getElementById("confirm-password");
77

8-
var checkPasswords = function () {
9-
var passwordsMatch = passwordInput.value === confirmPasswordInput.value;
8+
const checkPasswords = () => {
9+
const passwordsMatch = passwordInput.value === confirmPasswordInput.value;
1010
if (passwordsMatch) {
1111
// Clear any previous error message.
1212
confirmPasswordInput.setCustomValidity("");
@@ -16,16 +16,16 @@ var checkPasswords = function () {
1616
}
1717
};
1818

19-
var addPasswordInputEventListeners = function () {
19+
const addPasswordInputEventListeners = () => {
2020
passwordInput.addEventListener("input", checkPasswords, false);
2121
confirmPasswordInput.addEventListener("input", checkPasswords, false);
2222
};
2323

24-
var formSubmissionAttempted = function () {
24+
const formSubmissionAttempted = () => {
2525
form.classList.add("submission-attempted");
2626
};
2727

28-
var addSubmitClickEventListener = function () {
28+
const addSubmitClickEventListener = () => {
2929
submitButton.addEventListener("click", formSubmissionAttempted, false);
3030
};
3131

‎Allfiles/Mod05/Labfiles/Solution/Exercise 3/ContosoConf/scripts/pages/schedule.js‎

Lines changed: 57 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,99 @@
1-
var schedule = [];
2-
var list = document.getElementById("schedule");
3-
var track1CheckBox = document.getElementById("show-track-1");
4-
var track2CheckBox = document.getElementById("show-track-2");
1+
let schedules = [];
2+
const list = document.getElementById("schedule");
3+
const track1CheckBox = document.getElementById("show-track-1");
4+
const track2CheckBox = document.getElementById("show-track-2");
55

6-
function downloadSchedule() {
7-
$.ajax({
8-
type: "GET",
9-
url: "/schedule/list"
10-
}).done(function(response) {
11-
schedule = response.schedule;
12-
displaySchedule();
13-
}).fail(function() {
6+
const downloadSchedule = async () => {
7+
8+
9+
// await response of fetch call
10+
let response = await fetch("/schedule/list");
11+
// transform body to json
12+
let data = await response.json();
13+
14+
// checking response is ok
15+
if (response.ok) {
16+
schedules = data.schedule;
17+
displaySchedule();
18+
}
19+
else
1420
alert("Schedule list not available.");
15-
});
21+
1622
}
1723

18-
function createSessionElement(session) {
19-
var li = document.createElement("li");
24+
const createSessionElement = (session) => {
25+
const li = document.createElement("li");
2026

2127
li.sessionId = session.id;
2228

23-
var star = document.createElement("a");
29+
const star = document.createElement("a");
2430
star.setAttribute("href", "#");
2531
star.setAttribute("class", "star");
2632
li.appendChild(star);
2733

28-
var title = document.createElement("span");
34+
const title = document.createElement("span");
2935
title.textContent = session.title;
3036
li.appendChild(title);
3137

3238
return li;
33-
};
39+
}
3440

35-
function clearList() {
41+
const clearList = () => {
3642
while (list.firstChild) {
3743
list.removeChild(list.firstChild);
3844
}
3945
}
4046

41-
function displaySchedule() {
47+
const displaySchedule = () => {
4248
clearList();
43-
for (var i = 0; i < schedule.length; i++) {
44-
var tracks = schedule[i].tracks;
45-
var isCurrentTrack = (track1CheckBox.checked && tracks.indexOf(1) >= 0) ||
46-
(track2CheckBox.checked && tracks.indexOf(2) >= 0);
49+
for (let schedule of schedules) {
50+
const tracks = schedule.tracks;
51+
const isCurrentTrack = track1CheckBox.checked && tracks.indexOf(1) >= 0 ||
52+
track2CheckBox.checked && tracks.indexOf(2) >= 0;
4753
if (isCurrentTrack) {
48-
var li = createSessionElement(schedule[i]);
54+
const li = createSessionElement(schedule);
4955
list.appendChild(li);
5056
}
5157
}
5258
}
5359

54-
function saveStar(sessionId, isStarred) {
55-
$.ajax({
56-
type: "POST",
57-
url: "/schedule/star/" + sessionId,
58-
data: { starred: isStarred }
59-
}).done(function (response) {
60-
if (isStarred && response.starCount > 50) {
61-
alert("This session is very popular! Be sure to arrive early to get a seat.");
60+
const saveStar = async (sessionId, isStarred) => {
61+
62+
const headers = new Headers({
63+
"Content-Type": "application/x-www-form-urlencoded"
64+
})
65+
66+
67+
const options = {
68+
method: 'POST',
69+
headers: headers,
70+
body: "starred=" + isStarred
71+
}
72+
73+
const response = await fetch("/schedule/star/" + sessionId, options);
74+
75+
if (isStarred) {
76+
if (response.ok) {
77+
const data = await response.json();
78+
if (data.starCount > 50)
79+
alert("This session is very popular! Be sure to arrive early to get a seat.");
6280
}
63-
});
81+
}
6482
}
6583

6684

67-
function handleListClick(event) {
68-
var isStarElement = event.srcElement.classList.contains("star");
85+
const handleListClick = async (event) => {
86+
const isStarElement = event.srcElement.classList.contains("star");
6987
if (isStarElement) {
7088
event.preventDefault(); // Stop the browser following the clicked <a> element's href.
7189

72-
var listItem = event.srcElement.parentNode;
90+
const listItem = event.srcElement.parentNode;
7391
if (listItem.classList.contains("starred")) {
7492
listItem.classList.remove("starred");
75-
saveStar(listItem.sessionId, false);
93+
await saveStar(listItem.sessionId, false);
7694
} else {
7795
listItem.classList.add("starred");
78-
saveStar(listItem.sessionId, true);
96+
await saveStar(listItem.sessionId, true);
7997
}
8098
}
8199
}

‎Allfiles/Mod05/Labfiles/Starter/Exercise 3/ContosoConf/ContosoConf.csproj‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
<Content Include="about.htm" />
9191
<Content Include="registered.htm" />
9292
<Content Include="Global.asax" />
93-
<Content Include="scripts\jquery.min.js" />
9493
<Content Include="scripts\pages\register.js" />
9594
<Content Include="scripts\pages\schedule.js" />
9695
<Content Include="schedule.htm" />

‎Allfiles/Mod05/Labfiles/Starter/Exercise 3/ContosoConf/scripts/jquery.min.js‎

Lines changed: 0 additions & 211 deletions
This file was deleted.

‎Allfiles/Mod05/Labfiles/Starter/Exercise 3/ContosoConf/scripts/pages/register.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// Get the registration <form> element from the DOM.
2-
var form = document.getElementById("registration-form");
3-
var submitButton = form.querySelector("button");
2+
const form = document.getElementById("registration-form");
3+
const submitButton = form.querySelector("button");
44
// Get the <input> elements from the DOM.
5-
var passwordInput = document.getElementById("password");
6-
var confirmPasswordInput = document.getElementById("confirm-password");
5+
const passwordInput = document.getElementById("password");
6+
const confirmPasswordInput = document.getElementById("confirm-password");
77

8-
var checkPasswords = function () {
9-
var passwordsMatch = passwordInput.value === confirmPasswordInput.value;
8+
const checkPasswords = () => {
9+
const passwordsMatch = passwordInput.value === confirmPasswordInput.value;
1010
if (passwordsMatch) {
1111
// Clear any previous error message.
1212
confirmPasswordInput.setCustomValidity("");
@@ -16,16 +16,16 @@ var checkPasswords = function () {
1616
}
1717
};
1818

19-
var addPasswordInputEventListeners = function () {
19+
const addPasswordInputEventListeners = () => {
2020
passwordInput.addEventListener("input", checkPasswords, false);
2121
confirmPasswordInput.addEventListener("input", checkPasswords, false);
2222
};
2323

24-
var formSubmissionAttempted = function () {
24+
const formSubmissionAttempted = () => {
2525
form.classList.add("submission-attempted");
2626
};
2727

28-
var addSubmitClickEventListener = function () {
28+
const addSubmitClickEventListener = () => {
2929
submitButton.addEventListener("click", formSubmissionAttempted, false);
3030
};
3131

‎Allfiles/Mod05/Labfiles/Starter/Exercise 3/ContosoConf/scripts/pages/schedule.js‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
var schedule = [];
2-
var list = document.getElementById("schedule");
3-
var track1CheckBox = document.getElementById("show-track-1");
4-
var track2CheckBox = document.getElementById("show-track-2");
1+
let schedules = [];
2+
const list = document.getElementById("schedule");
3+
const track1CheckBox = document.getElementById("show-track-1");
4+
const track2CheckBox = document.getElementById("show-track-2");
55

6-
function downloadSchedule() {
7-
var request = new XMLHttpRequest();
6+
const downloadSchedule = () => {
7+
8+
const request = new XMLHttpRequest();
89
request.open("GET", "/schedule/list", true);
910
request.onreadystatechange = function () {
1011
if (request.readyState === 4) {
1112
try {
12-
var response = JSON.parse(request.responseText);
13+
const response = JSON.parse(request.responseText);
1314
if (request.status === 200) {
1415
schedule = response.schedule;
1516
displaySchedule();
@@ -24,50 +25,49 @@ function downloadSchedule() {
2425
request.send();
2526
}
2627

27-
function createSessionElement(session) {
28-
var li = document.createElement("li");
28+
const createSessionElement = (session) => {
29+
const li = document.createElement("li");
2930

3031
li.sessionId = session.id;
3132

32-
var star = document.createElement("a");
33+
const star = document.createElement("a");
3334
star.setAttribute("href", "#");
3435
star.setAttribute("class", "star");
3536
li.appendChild(star);
3637

37-
var title = document.createElement("span");
38+
const title = document.createElement("span");
3839
title.textContent = session.title;
3940
li.appendChild(title);
4041

4142
return li;
4243
};
4344

44-
function clearList() {
45+
const clearList = () => {
4546
while (list.firstChild) {
4647
list.removeChild(list.firstChild);
4748
}
4849
}
4950

50-
function displaySchedule() {
51+
const displaySchedule = () => {
5152
clearList();
52-
for (var i = 0; i < schedule.length; i++) {
53-
var tracks = schedule[i].tracks;
54-
var isCurrentTrack = (track1CheckBox.checked && tracks.indexOf(1) >= 0) ||
55-
(track2CheckBox.checked && tracks.indexOf(2) >= 0);
53+
for(let schedule of schedules)
54+
const tracks = schedul.tracks;
55+
const isCurrentTrack = (track1CheckBox.checked && tracks.indexOf(1) >= 0) ||
56+
(track2CheckBox.checked && tracks.indexOf(2) >= 0);
5657
if (isCurrentTrack) {
57-
var li = createSessionElement(schedule[i]);
58+
const li = createSessionElement(schedule);
5859
list.appendChild(li);
5960
}
6061
}
61-
}
6262

63-
function saveStar(sessionId, isStarred) {
64-
var request = new XMLHttpRequest();
63+
const saveStar = (sessionId, isStarred) => {
64+
const request = new XMLHttpRequest();
6565
request.open("POST", "/schedule/star/" + sessionId, true);
66-
66+
6767
if (isStarred) {
6868
request.onreadystatechange = function() {
6969
if (request.readyState === 4 && request.status === 200) {
70-
var response = JSON.parse(request.responseText);
70+
const response = JSON.parse(request.responseText);
7171
if (response.starCount > 50) {
7272
alert("This session is very popular! Be sure to arrive early to get a seat.");
7373
}
@@ -76,16 +76,16 @@ function saveStar(sessionId, isStarred) {
7676
}
7777

7878
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
79-
var data = "starred=" + isStarred;
79+
const data = "starred=" + isStarred;
8080
request.send(data);
8181
}
8282

83-
function handleListClick(event) {
84-
var isStarElement = event.srcElement.classList.contains("star");
83+
const handleListClick = (event) => {
84+
const isStarElement = event.srcElement.classList.contains("star");
8585
if (isStarElement) {
8686
event.preventDefault(); // Stop the browser following the clicked <a> element's href.
8787

88-
var listItem = event.srcElement.parentNode;
88+
const listItem = event.srcElement.parentNode;
8989
if (listItem.classList.contains("starred")) {
9090
listItem.classList.remove("starred");
9191
saveStar(listItem.sessionId, false);

0 commit comments

Comments
 (0)