Skip to content

Commit e5475bb

Browse files
Max-SirMax-Sir
authored
uploaded my JS projects created in last 2 weeks
1 parent ecbc273 commit e5475bb

File tree

26 files changed

+1248
-0
lines changed

26 files changed

+1248
-0
lines changed

‎AJAX Library/app.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const http = new easyHTTP();
2+
3+
// GET request.
4+
http.get('https://jsonplaceholder.typicode.com/posts', function (err, posts) {
5+
6+
if (err) {
7+
console.log(err);
8+
} else {
9+
console.log(posts);
10+
}
11+
});
12+
13+
// POST Request.
14+
const data = {
15+
title: 'Custom Post updated',
16+
body: 'This is a custom post'
17+
};
18+
19+
http.post('https://jsonplaceholder.typicode.com/posts', data, function (err, post) {
20+
if (err) {
21+
console.log(err);
22+
} else {
23+
console.log(post);
24+
}
25+
})
26+
27+
// PUT Request
28+
http.put('https://jsonplaceholder.typicode.com/posts/1', data, function (err, post) {
29+
if (err) {
30+
console.log(err);
31+
} else {
32+
console.log(post);
33+
}
34+
})
35+
36+
// DELETE Request
37+
http.delete('https://jsonplaceholder.typicode.com/posts/1', function (err, response) {
38+
39+
if (err) {
40+
console.log(err);
41+
} else {
42+
console.log(response);
43+
}
44+
});

‎AJAX Library/easyhttp.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
function easyHTTP() {
2+
this.http = new XMLHttpRequest();
3+
}
4+
5+
// Make an HTTP GET Request.
6+
easyHTTP.prototype.get = function (url, callback) {
7+
8+
this.http.open('GET', url, true);
9+
10+
let self = this;
11+
this.http.onload = function () {
12+
if (self.http.status === 200) {
13+
callback(null, self.http.responseText);
14+
} else {
15+
callback(`Error ${self.http.status}`);
16+
}
17+
}
18+
this.http.send();
19+
}
20+
21+
// Make an HTTP POST Request.
22+
easyHTTP.prototype.post = function(url, data, callback){
23+
24+
this.http.open('POST', url, true);
25+
this.http.setRequestHeader('Content-type', 'application/json');
26+
27+
let self = this;
28+
this.http.onload = function () {
29+
callback(null, self.http.responseText);
30+
}
31+
this.http.send(JSON.stringify(data));
32+
}
33+
34+
// Make an HTTP PUT Request.
35+
easyHTTP.prototype.put = function(url, data, callback){
36+
37+
this.http.open('PUT', url, true);
38+
this.http.setRequestHeader('Content-type', 'application/json');
39+
40+
let self = this;
41+
this.http.onload = function () {
42+
callback(null, self.http.responseText);
43+
}
44+
this.http.send(JSON.stringify(data));
45+
}
46+
47+
// Make an HTTP DELETE Request.
48+
easyHTTP.prototype.delete = function (url, callback) {
49+
50+
this.http.open('DELETE', url, true);
51+
52+
let self = this;
53+
this.http.onload = function () {
54+
if (self.http.status === 200) {
55+
callback(null, 'DELETED!');
56+
} else {
57+
callback(`Error ${self.http.status}`);
58+
}
59+
}
60+
this.http.send();
61+
}

‎AJAX Library/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<h1>Easy HTTP example</h1>
11+
12+
<script src="easyhttp.js"></script>
13+
<script src="app.js"></script>
14+
</body>
15+
</html>

‎Book List/app.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
// Book Constructor
2+
function Book(title, author, isbn) {
3+
this.title = title;
4+
this.author = author;
5+
this.isbn = isbn;
6+
}
7+
8+
// UI constructor
9+
function UI() { }
10+
11+
// Clear Fields
12+
UI.prototype.clearFields = function () {
13+
document.getElementById('title').value;
14+
document.getElementById('author').value;
15+
document.getElementById('isbn').value;
16+
}
17+
18+
// Add Book Object
19+
UI.prototype.addBookToList = function (book) {
20+
const list = document.getElementById('book-list');
21+
// Create TR element.
22+
const row = document.createElement('tr');
23+
24+
// Inserting values
25+
row.innerHTML = `
26+
<td>${book.title}</td>
27+
<td>${book.author}</td>
28+
<td>${book.isbn}</td>
29+
<td><a href = "#" class = "delete"> X </a></td>
30+
`
31+
32+
list.appendChild(row);
33+
}
34+
35+
// Delete Book
36+
UI.prototype.deleteBook = function (target) {
37+
if (target.className === 'delete') {
38+
target.parentElement.parentElement.remove();
39+
}
40+
}
41+
42+
// Show alert
43+
UI.prototype.showAlert = function (message, className) {
44+
45+
// Create Div
46+
const div = document.createElement('div');
47+
48+
// Add classes
49+
div.className = `alert ${className}`;
50+
51+
// Add text
52+
div.appendChild(document.createTextNode(message));
53+
54+
// Get Parent and append
55+
const container = document.querySelector('.container');
56+
const form = document.querySelector('#book-form');
57+
container.insertBefore(div, form);
58+
59+
// Timeout after 2 seconds.
60+
setTimeout(function () {
61+
document.querySelector('.alert').remove();
62+
}, 2000);
63+
}
64+
65+
// Event Listeners
66+
document.getElementById('book-form').addEventListener('submit', function (e) {
67+
68+
// Getting form elements
69+
const title = document.getElementById('title').value;
70+
const author = document.getElementById('author').value;
71+
const isbn = document.getElementById('isbn').value;
72+
73+
// Creating book object.
74+
const book = new Book(title, author, isbn);
75+
console.log(book);
76+
77+
// Creating UI object.
78+
const ui = new UI();
79+
80+
// Validate
81+
if (title === '' || isbn === '' || author === '') {
82+
ui.showAlert('Please fill in all fields', 'error');
83+
}
84+
else {
85+
86+
// Add book to list;
87+
ui.addBookToList(book);
88+
89+
// Show success
90+
ui.showAlert('Book Added! ', 'success');
91+
92+
e.preventDefault();
93+
}
94+
});
95+
96+
// Event Listeners for deleting a book
97+
// Parent needs to be accessed --- Event delegation
98+
document.getElementById('book-list').addEventListener(
99+
'click', function (e) {
100+
const ui = new UI();
101+
ui.deleteBook(e.target);
102+
ui.showAlert('Book removed', 'success');
103+
e.preventDefault();
104+
}
105+
);

‎Book List/app_es6.js‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
class Book {
2+
3+
constructor(title, author, isbn) {
4+
this.title = title;
5+
this.author = author;
6+
this.isbn = isbn;
7+
}
8+
}
9+
10+
class UI {
11+
12+
addBookToList(book) {
13+
14+
const list = document.getElementById('book-list');
15+
// Create TR element.
16+
const row = document.createElement('tr');
17+
18+
// Inserting values
19+
row.innerHTML = `
20+
<td>${book.title}</td>
21+
<td>${book.author}</td>
22+
<td>${book.isbn}</td>
23+
<td><a href = "#" class = "delete"> X </a></td>
24+
`
25+
26+
list.appendChild(row);
27+
}
28+
29+
deleteBook(target) {
30+
if (target.className === 'delete') {
31+
target.parentElement.parentElement.remove();
32+
}
33+
}
34+
35+
showAlert(message, className) {
36+
37+
// Create Div
38+
const div = document.createElement('div');
39+
40+
// Add classes
41+
div.className = `alert ${className}`;
42+
43+
// Add text
44+
div.appendChild(document.createTextNode(message));
45+
46+
// Get Parent and append
47+
const container = document.querySelector('.container');
48+
const form = document.querySelector('#book-form');
49+
container.insertBefore(div, form);
50+
51+
// Timeout after 2 seconds.
52+
setTimeout(function () {
53+
document.querySelector('.alert').remove();
54+
}, 2000);
55+
56+
e.preventDefault();
57+
}
58+
59+
clearFields() {
60+
document.getElementById('title').value;
61+
document.getElementById('author').value;
62+
document.getElementById('isbn').value;
63+
}
64+
65+
}
66+
67+
68+
// Event Listeners
69+
document.getElementById('book-form').addEventListener('submit', function (e) {
70+
71+
// Getting form elements
72+
const title = document.getElementById('title').value;
73+
const author = document.getElementById('author').value;
74+
const isbn = document.getElementById('isbn').value;
75+
76+
// Creating book object.
77+
const book = new Book(title, author, isbn);
78+
console.log(book);
79+
80+
// Creating UI object.
81+
const ui = new UI();
82+
83+
// Validate
84+
if (title === '' || isbn === '' || author === '') {
85+
ui.showAlert('Please fill in all fields', 'error');
86+
}
87+
else {
88+
89+
// Add book to list;
90+
ui.addBookToList(book);
91+
92+
// Show success
93+
ui.showAlert('Book Added! ', 'success');
94+
95+
e.preventDefault();
96+
}
97+
});
98+
99+
// Event Listeners for deleting a book
100+
// Parent needs to be accessed --- Event delegation
101+
document.getElementById('book-list').addEventListener(
102+
'click', function (e) {
103+
const ui = new UI();
104+
ui.deleteBook(e.target);
105+
ui.showAlert('Book removed', 'success');
106+
e.preventDefault();
107+
}
108+
);

0 commit comments

Comments
 (0)