Skip to content

Commit a62a0a8

Browse files
piyalidas10piyalidas10
committed
promise + loops + operator
1 parent 47b7524 commit a62a0a8

File tree

6 files changed

+215
-0
lines changed

6 files changed

+215
-0
lines changed

‎loops.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Javascript Loops</title>
5+
</head>
6+
<body>
7+
<h2>Javascript Loops</h2>
8+
<script>
9+
arr = [1, 2, 3, 4];
10+
console.log('For-of loop --------------------------------------');
11+
for(const el of arr) { // execute for every element in an array
12+
console.log(el);
13+
}
14+
console.log('For loop --------------------------------------');
15+
for(let i=0; i<arr.length; i++) {
16+
console.log(arr[i]);
17+
}
18+
console.log('For in loop --------------------------------------');
19+
obj = [
20+
{name: 'One', age: 20},
21+
{name: 'Two', age: 21},
22+
{name: 'Three', age: 22}
23+
];
24+
for(const key in obj) { //execute for every key in an object
25+
console.log(key);
26+
console.log(obj[key]);
27+
}
28+
</script>
29+
</body>
30+
</html>

‎promise-all.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Javascript Promise All</title>
5+
</head>
6+
<body>
7+
<h2>Javascript Promise All</h2>
8+
<script>
9+
let urls = [
10+
'https://jsonplaceholder.typicode.com/users',
11+
'https://jsonplaceholder.typicode.com/posts/1'
12+
];
13+
const promise1 = new Promise((resolve, reject) => {
14+
const request = new XMLHttpRequest();
15+
request.open('GET', urls[0]);
16+
request.onload = () => {
17+
if (request.status === 200) {
18+
resolve(request.response); // we got data here, so resolve the Promise
19+
} else {
20+
reject(Error(request.statusText)); // status is not 200 OK, so reject
21+
}
22+
};
23+
request.onerror = () => {
24+
reject(Error('Error fetching data.')); // error occurred, reject the Promise
25+
};
26+
27+
request.send(); // send the request
28+
});
29+
30+
const promise2 = new Promise((resolve, reject) => {
31+
const request = new XMLHttpRequest();
32+
request.open('GET', urls[1]);
33+
request.onload = () => {
34+
if (request.status === 200) {
35+
resolve(request.response); // we got data here, so resolve the Promise
36+
} else {
37+
reject(Error(request.statusText)); // status is not 200 OK, so reject
38+
}
39+
};
40+
request.onerror = () => {
41+
reject(Error('Error fetching data.')); // error occurred, reject the Promise
42+
};
43+
44+
request.send(); // send the request
45+
});
46+
47+
Promise.all([promise1, promise2])
48+
.then(responses => {
49+
console.log('responses => ', responses);
50+
// respose will get in string format. JSON.parse is used to convert string to JSON format
51+
console.log('Promise All Response 1 => ', JSON.parse(responses[0]));
52+
console.log('Promise All Response 2 => ', JSON.parse(responses[1]));
53+
});
54+
</script>
55+
</body>
56+
</html>

‎promise-race.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Javascript Promise Race</title>
5+
</head>
6+
<body>
7+
<h2>Javascript Promise Race</h2>
8+
<script>
9+
let urls = [
10+
'https://jsonplaceholder.typicode.com/users',
11+
'https://jsonplaceholder.typicode.com/posts/1'
12+
];
13+
const promise1 = new Promise((resolve, reject) => {
14+
const request = new XMLHttpRequest();
15+
request.open('GET', urls[0]);
16+
request.onload = () => {
17+
if (request.status === 200) {
18+
resolve(request.response); // we got data here, so resolve the Promise
19+
} else {
20+
reject(Error(request.statusText)); // status is not 200 OK, so reject
21+
}
22+
};
23+
request.onerror = () => {
24+
reject(Error('Error fetching data.')); // error occurred, reject the Promise
25+
};
26+
27+
request.send(); // send the request
28+
});
29+
30+
const promise2 = new Promise((resolve, reject) => {
31+
const request = new XMLHttpRequest();
32+
request.open('GET', urls[1]);
33+
request.onload = () => {
34+
if (request.status === 200) {
35+
resolve(request.response); // we got data here, so resolve the Promise
36+
} else {
37+
reject(Error(request.statusText)); // status is not 200 OK, so reject
38+
}
39+
};
40+
request.onerror = () => {
41+
reject(Error('Error fetching data.')); // error occurred, reject the Promise
42+
};
43+
44+
request.send(); // send the request
45+
});
46+
47+
/* The Promise.race() method returns a promise that fulfills or rejects as soon as
48+
one of the promises in an iterable fulfills or rejects, with the value or reason from that promise. */
49+
Promise.race([promise1, promise2]).then(responses => {
50+
// respose will get in string format. JSON.parse is used to convert string to JSON format
51+
console.log('Promise Race responses => ', typeof(responses), JSON.parse(responses));
52+
});
53+
</script>
54+
</body>
55+
</html>

‎promise.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Javascript Promise</title>
5+
</head>
6+
<body>
7+
<h2>Javascript Promise</h2>
8+
<p>Open console to get the response</p>
9+
<script>
10+
let url = 'https://jsonplaceholder.typicode.com/users';
11+
const promise = new Promise((resolve, reject) => {
12+
const request = new XMLHttpRequest();
13+
request.open('GET', url);
14+
request.onload = () => {
15+
if (request.status === 200) {
16+
resolve(request.response); // we got data here, so resolve the Promise
17+
} else {
18+
reject(Error(request.statusText)); // status is not 200 OK, so reject
19+
}
20+
};
21+
request.onerror = () => {
22+
reject(Error('Error fetching data.')); // error occurred, reject the Promise
23+
};
24+
25+
request.send(); // send the request
26+
});
27+
28+
promise.then((data) => {
29+
console.log('Response => ', JSON.parse(data));
30+
}, (error) => {
31+
console.log('Promise rejected.');
32+
console.log(error.message);
33+
});
34+
</script>
35+
</body>
36+
</html>

‎shorthand_operator.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Shorthand operator</title>
5+
</head>
6+
<body>
7+
<h2>Shorthand operator</h2>
8+
<input type="text" id="txt"/>
9+
<button onclick="print()">Click on button</button>
10+
<h3 id="show"></h3>
11+
<script>
12+
function print() {
13+
let name = document.getElementById('txt').value;
14+
let username = name || 'Unknown';
15+
document.getElementById('show').innerText = "Your name is " + username;
16+
}
17+
</script>
18+
</body>
19+
</html>

‎ternary_operator.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Ternary operator</title>
5+
</head>
6+
<body>
7+
<h2>Ternary operator</h2>
8+
<button onclick="print(true)">isLogin is True</button>
9+
<button onclick="print(false)">isLogin is False</button>
10+
<h3 id="show"></h3>
11+
<script>
12+
function print(val) {
13+
let isLogin = val;
14+
let username = isLogin? 'Piyali': 'Unknown';
15+
document.getElementById('show').innerText = "Your name is " + username;
16+
}
17+
</script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)