Skip to content

Commit ec17128

Browse files
author
VGGeorgiev
committed
2 parents 92ebfd8 + 8f2b669 commit ec17128

File tree

15 files changed

+235
-33
lines changed

15 files changed

+235
-33
lines changed

‎2. Cookies and Web Storages/1. cookies.html‎

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

‎3. Consuming-Remote-Data/1. using-xmlhttprequest/using-xhr.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,18 @@
33
<head>
44
<title>Consuming remote data with JavaScript: Using XHR</title>
55
<style>
6-
.info{
7-
font-size: 0.9em;
8-
font-style: italic;
9-
border: 1px solid orange;
10-
display: block;
11-
padding:5px 15px;
12-
width: 400px;
13-
margin: 0 auto;
14-
text-indent: 0;
15-
text-align: center;
16-
}
17-
</style>
6+
.info{
7+
font-size: 0.9em;
8+
font-style: italic;
9+
border: 1px solid orange;
10+
display: block;
11+
padding:5px 15px;
12+
width: 400px;
13+
margin: 0 auto;
14+
text-indent: 0;
15+
text-align: center;
16+
}
17+
</style>
1818
</head>
1919
<body>
2020
<p class='info'>This web page should be run on a server (localhost or in WWW).</p>

‎3. Consuming-Remote-Data/server/app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ var express = require('express'),
77
var app = express();
88

99
app.configure(function () {
10-
app.set('port', process.env.PORT || 5555);
10+
app.set('port', process.env.PORT || 3000);
1111
app.set('views', __dirname + '/views');
1212
app.set('view engine', 'jade');
1313
app.use(express.favicon());

‎3. Consuming-Remote-Data/server/npm-debug.log‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
0 info it worked if it ends with ok
2+
1 verbose cli [ 'C:\\Program Files\\nodejs\\\\node.exe',
3+
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js' ]
4+
2 info using npm@1.4.28
5+
3 info using node@v0.10.33
6+
4 verbose node symlink C:\Program Files\nodejs\\node.exe
7+
5 error Error: ENOENT, stat 'C:\Users\SoftUni\AppData\Roaming\npm'
8+
6 error If you need help, you may report this *entire* log,
9+
6 error including the npm and node versions, at:
10+
6 error <http://github.com/npm/npm/issues>
11+
7 error System Windows_NT 6.2.9200
12+
8 error command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js"
13+
9 error cwd D:\COURSES\JavaScript Applications\Demos\3. Consuming-Remote-Data\server
14+
10 error node -v v0.10.33
15+
11 error npm -v 1.4.28
16+
12 error path C:\Users\SoftUni\AppData\Roaming\npm
17+
13 error code ENOENT
18+
14 error errno 34
19+
15 verbose exit [ 34, true ]

‎3. Consuming-Remote-Data/server/routes/schools.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
schools = [];
3838

39-
getAllSchools = function(req, res) {
39+
getAllSchools = function(req, res) {
4040
var school, schoolsModels;
4141
schoolsModels = (function() {
4242
var i, len, results;

‎SPA Structure/Demo-Project-Live/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Student Demo Project</title>
5+
<style type="text/css">
6+
#all-students > div {
7+
border: 1px solid #999;
8+
border-radius: 5px;
9+
padding: 10px;
10+
margin: 10px;
11+
display: inline-block;
12+
}
13+
</style>
14+
</head>
15+
<body>
16+
<div id="wrapper">
17+
<div id="students">
18+
<div id="all-students"></div>
19+
<div>
20+
<input id="name" type="text" placeholder="Student's name"/>
21+
<input id="grade" type="number" placeholder="Student's grade" />
22+
<button id="add-student">Add student</button>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
28+
<script type="text/javascript" src="scripts/ajax-requester.js"></script>
29+
<script type="text/javascript" src="scripts/data-persister.js"></script>
30+
<script type="text/javascript" src="scripts/controller.js"></script>
31+
<script type="text/javascript" src="scripts/main.js"></script>
32+
</body>
33+
</html>

‎SPA Structure/Demo-Project-Live/scripts/ajax-requester.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
var ajaxRequester = (function () {
2+
var makeRequest = function makeRequest(method, url, data, success, error) {
3+
return $.ajax({
4+
type: method,
5+
url: url,
6+
contentType: 'application/json',
7+
data: JSON.stringify(data),
8+
success: success,
9+
error: error
10+
})
11+
}
12+
13+
function makeGetRequest(url, success, error) {
14+
return makeRequest('GET', url, null, success, error);
15+
}
16+
17+
18+
function makePostRequest(url, data, success, error) {
19+
return makeRequest('POST', url, data, success, error);
20+
}
21+
22+
function makePutRequest(url, data, success, error) {
23+
return makeRequest('PUT', url, data, success, error);
24+
}
25+
26+
function makeDeleteRequest(url, success, error) {
27+
return makeRequest('DELETE', url, {}, success, error);
28+
}
29+
30+
return {
31+
get: makeGetRequest,
32+
post: makePostRequest,
33+
put: makePutRequest,
34+
delete: makeDeleteRequest
35+
}
36+
}());

‎SPA Structure/Demo-Project-Live/scripts/controller.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
var app = app || {};
2+
3+
app.controller = (function () {
4+
function Controller(dataPersister) {
5+
this.persister = dataPersister;
6+
}
7+
8+
Controller.prototype.load = function (selector) {
9+
var _this = this;
10+
this.attachEvents();
11+
12+
this.persister.students.getAll(
13+
function (data) {
14+
_this.loadStudents(data);
15+
},
16+
function (error) {
17+
console.log(error);
18+
}
19+
);
20+
21+
}
22+
23+
function attachStudentToDom(element, student) {
24+
var studentWrapper = $('<div />');
25+
studentWrapper.attr('data-id', student.id);
26+
var name = $('<div />').append('Name: ' + student.name);
27+
var grade = $('<div />').append('Grade:' + student.grade);
28+
var deleteButton = $('<button class="student-delete-btn">X</button>');
29+
30+
studentWrapper.append(name);
31+
studentWrapper.append(grade);
32+
studentWrapper.append(deleteButton);
33+
34+
element.append(studentWrapper);
35+
}
36+
37+
Controller.prototype.loadStudents = function (data) {
38+
var selector = '#all-students';
39+
var allStudentsWrapper = $(selector);
40+
for (var i = 0; i < data.count; i++) {
41+
var student = data.students[i];
42+
attachStudentToDom(allStudentsWrapper, student);
43+
};
44+
}
45+
46+
Controller.prototype.attachEvents = function () {
47+
var _this = this;
48+
$('#add-student').on('click', function (ev) {
49+
var student = {
50+
name: $('#name').val(),
51+
grade: $('#grade').val()
52+
}
53+
_this.persister.students.add(student,
54+
function addStudentSuccessHandler(data) {
55+
var studentsWrapper = $('#all-students');
56+
attachStudentToDom(studentsWrapper, data);
57+
},
58+
function addStudentErrorHandler(error) {
59+
console.log(error);
60+
}
61+
)
62+
});
63+
64+
$('#all-students').on('click', '.student-delete-btn', function (ev) {
65+
var id = $(this).parent().attr('data-id');
66+
_this.persister.students.delete(
67+
id,
68+
function (data) {
69+
$(ev.target).parent().remove();
70+
},
71+
function (error) {
72+
console.log(error);
73+
}
74+
)
75+
})
76+
}
77+
78+
return {
79+
get: function (dataPersister) {
80+
return new Controller(dataPersister);
81+
}
82+
}
83+
}())

‎SPA Structure/Demo-Project-Live/scripts/data-persister.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
var app = app || {};
2+
3+
app.dataPersister = (function () {
4+
function Persister(rootUrl) {
5+
this.rootUrl = rootUrl;
6+
this.students = new Students(rootUrl);
7+
this.schools = new Schools(rootUrl);
8+
}
9+
10+
var Students = (function () {
11+
function Students(rootUrl) {
12+
this.serviceUrl = rootUrl + 'students/';
13+
}
14+
15+
Students.prototype.getAll = function (success, error) {
16+
return ajaxRequester.get(this.serviceUrl, success, error);
17+
}
18+
19+
Students.prototype.add = function (student, success, error) {
20+
return ajaxRequester.post(this.serviceUrl, student, success, error);
21+
}
22+
23+
Students.prototype.delete = function (id, success, error) {
24+
return ajaxRequester.delete(this.serviceUrl + id, success, error);
25+
}
26+
27+
return Students;
28+
}());
29+
30+
31+
var Schools = (function () {
32+
function Schools(rootUrl) {
33+
this.serviceUrl = rootUrl + 'schools/'
34+
}
35+
36+
return Schools;
37+
}());
38+
39+
return {
40+
get: function (rootUrl) {
41+
return new Persister(rootUrl);
42+
}
43+
}
44+
}());

‎SPA Structure/Demo-Project-Live/scripts/main.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
(function () {
2+
var rootUrl = 'http://localhost:3000/';
3+
var dataPersister = app.dataPersister.get(rootUrl);
4+
var controller = app.controller.get(dataPersister);
5+
controller.load('#wrapper');
6+
}())

0 commit comments

Comments
 (0)