Skip to content

Commit 47b7524

Browse files
piyalidas10piyalidas10
committed
javascript programs
1 parent 960e724 commit 47b7524

16 files changed

+384
-0
lines changed

‎Throttling/rxjs_search.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Throttling with search box Using Rxjs</title>
5+
<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
6+
</head>
7+
<body>
8+
<h2>Throttling with search box Using Rxjs</h2>
9+
<input id="input" type="text" style="width: 200px; padding: 5px 10px;">
10+
<p id="target"></p>
11+
<script>
12+
let input = document.getElementById('input');
13+
// Listen for keystroke events
14+
var input$ = Rx.Observable
15+
.fromEvent(input, 'keyup')
16+
.map(x => x.currentTarget.value)
17+
.throttleTime(500) // with delay of 0.5 secs
18+
19+
input$.subscribe(x => sendValues(x));
20+
21+
function sendValues(x){
22+
var pp = document.createElement('p');
23+
pp.textContent = x;
24+
document.getElementById('target').appendChild(pp);
25+
}
26+
27+
</script>
28+
</body>
29+
</html>

‎arrow.html

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Arrow function is more helpful than Anonymous function</title>
5+
</head>
6+
<body>
7+
<h2>Arrow function is more helpful than Anonymous function</h2>
8+
<script>
9+
let anonymousFunc = {
10+
names: ['Person1', 'Person2'],
11+
country: 'India',
12+
showPeople() {
13+
this.names.forEach(function(ele) {
14+
console.log(this);
15+
console.log(ele + ' - ' + this.country);
16+
});
17+
}
18+
}
19+
20+
anonymousFunc.showPeople();
21+
22+
let arrowFunc = {
23+
names: ['Person1', 'Person2'],
24+
country: 'India',
25+
showPeople() {
26+
this.names.forEach(ele => {
27+
console.log(this);
28+
console.log(ele + ' - ' + this.country);
29+
});
30+
}
31+
}
32+
arrowFunc.showPeople();
33+
</script>
34+
</body>
35+
</html>

‎arrow_func1.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Anonymous Function Vs Arrow Function</title>
5+
</head>
6+
<body>
7+
<h2>Anonymous Function Vs Arrow Function</h2>
8+
<button id="btn1">Click Button Anonymous Function</button>
9+
<button id="btn2">Click Button Arrow Function</button>
10+
<script>
11+
let anonymousFunc = function() {
12+
let a = 10;
13+
console.log(this);
14+
}
15+
let btn1 = document.getElementById('btn1');
16+
btn1.addEventListener('click', anonymousFunc);
17+
18+
let arrowFunc = () => {
19+
let a = 10;
20+
console.log(this);
21+
}
22+
let btn2 = document.getElementById('btn2');
23+
btn2.addEventListener('click', arrowFunc);
24+
</script>
25+
</body>
26+
</html>

‎arrow_func2.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Anonymous Function Vs Arrow Function</title>
5+
</head>
6+
<body>
7+
<h2>Anonymous Function Vs Arrow Function</h2>
8+
<button id="btn1">Click Button Anonymous Function</button>
9+
<button id="btn2">Click Button Arrow Function</button>
10+
<script>
11+
let anonymousFunc = {
12+
name: 'Piyali Das',
13+
show: function() {
14+
console.log(this);
15+
}
16+
}
17+
let btn1 = document.getElementById('btn1');
18+
btn1.addEventListener('click', anonymousFunc.show);
19+
20+
let arrowFunc = {
21+
name: 'Piyali Das',
22+
show: () => {
23+
console.log(this);
24+
}
25+
}
26+
let btn2 = document.getElementById('btn2');
27+
btn2.addEventListener('click', arrowFunc.show);
28+
</script>
29+
</body>
30+
</html>

‎call/call.html

+9
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@ <h2>Call</h2>
2020
};
2121
// borrow function from other method
2222
person1.display.call(person2); //call pointing to person2 object
23+
24+
function greeting(text) {
25+
console.log(`${text}, I am ${this.firstname} ${this.lastname}`); // ` tilde sign
26+
}
27+
const obj = {
28+
firstname: 'Piyali',
29+
lastname: 'Das'
30+
};
31+
greeting.call(obj, 'Hello');
2332
</script>
2433
</body>
2534
</html>

‎debouncing/rxjs_search.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Debouncing with search box Using Rxjs</title>
5+
<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
6+
</head>
7+
<body>
8+
<h2>Debouncing with search box Using Rxjs</h2>
9+
<input id="input" type="text" style="width: 200px; padding: 5px 10px;">
10+
<p id="target"></p>
11+
<script>
12+
let input = document.getElementById('input');
13+
// Listen for keystroke events
14+
var input$ = Rx.Observable
15+
.fromEvent(input, 'keyup')
16+
.map(x => x.currentTarget.value)
17+
.debounceTime(500) // with delay of 0.5 secs
18+
19+
input$.subscribe(x => sendValues(x));
20+
21+
function sendValues(x){
22+
var pp = document.createElement('p');
23+
pp.textContent = x;
24+
document.getElementById('target').appendChild(pp);
25+
}
26+
27+
</script>
28+
</body>
29+
</html>

‎debouncing/screen-capture (16).webm

635 KB
Binary file not shown.

‎dragdrop.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Drag and Drop Elements with Vanilla JavaScript and HTML</title>
5+
<style>
6+
.parent{
7+
display: flex;
8+
}
9+
.left,.right {
10+
width: 200px;
11+
padding: 20px;
12+
border: black 2px solid;
13+
}
14+
.left span{
15+
background-color: blueviolet;
16+
padding: 10px 25px;
17+
display: block;
18+
color: blanchedalmond;
19+
}
20+
.right p {
21+
margin-top: 0;
22+
}
23+
.right span {
24+
display: block;
25+
padding: 10px 25px;
26+
background-color: blueviolet;
27+
color: blanchedalmond;
28+
}
29+
</style>
30+
<script>
31+
function onDragStart(event) {
32+
event.dataTransfer.setData('text/plain', event.target.id);
33+
// event.currentTarget.style.backgroundColor = 'yellow';
34+
}
35+
function onDragOver(event) {
36+
event.preventDefault();
37+
}
38+
function onDrop(event) {
39+
const id = event.dataTransfer.getData('text');
40+
console.log(id);
41+
const draggableElement = document.getElementById(id);
42+
console.log(draggableElement);
43+
const dropzone = event.target;
44+
dropzone.appendChild(draggableElement);
45+
console.log(dropzone);
46+
event.dataTransfer.clearData();
47+
}
48+
</script>
49+
</head>
50+
<body>
51+
<h2>Drag and Drop Elements with Vanilla JavaScript and HTML</h2>
52+
53+
<div class="parent">
54+
<div class="left">
55+
<span id="draggableSpan" draggable="true" ondragstart="onDragStart(event)">
56+
draggable
57+
</span>
58+
</div>
59+
<div class="right" ondragover="onDragOver(event)" ondrop="onDrop(event)">
60+
<p> dropzone </p>
61+
</div>
62+
</div>
63+
</body>
64+
</html>

‎globalterrorism/script.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const url = '';
2+
3+
4+
const xhttp = new XMLHttpRequest();
5+
xhttp.open('GET','',true);
6+
xhttp.setRequestHeader('Content-type','application/json');

‎map_array.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Array map function</title>
5+
</head>
6+
<body>
7+
<h2>Array map function</h2>
8+
<script>
9+
let fruits = [
10+
{name: 'Banana', price: 5, count: 5},
11+
{name: 'Apple', price: 12, count: 4},
12+
{name: 'Mango', price: 20, count: 2}
13+
];
14+
let name = fruits.map(obj => obj.name);
15+
let price = fruits.map(obj => obj.price);
16+
let totalprice = fruits.map(obj => obj.price*obj.count);
17+
18+
console.log('Get name array => ', name, ...name);
19+
console.log('Get price array => ', price, ...price);
20+
console.log('Get totalprice array => ', totalprice, ...totalprice);
21+
</script>
22+
</body>
23+
</html>

‎module_pattern/module_design.png

47.5 KB
Loading

‎object.html

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Object functions</title>
5+
</head>
6+
<body>
7+
<h2>Object functions</h2>
8+
<script>
9+
let key = 'gender';
10+
let person = {
11+
'first name': 'piyali',
12+
age: 30,
13+
[key]: 'female',
14+
greet: function() {
15+
alert('Hi');
16+
},
17+
1.5: 'hello'
18+
};
19+
console.log(person['gender']);
20+
console.log(delete person.age);
21+
console.log(person);
22+
23+
let address = {
24+
city: 'kolkata',
25+
country: 'india'
26+
};
27+
28+
let newObj = Object.assign({}, person, address);
29+
console.log('newObj => ', newObj);
30+
31+
let fruits = [
32+
{name: 'Banana', price: 5, count: 5},
33+
{name: 'Apple', price: 12, count: 4},
34+
{name: 'Mango', price: 20, count: 2}
35+
];
36+
37+
let keys = Object.keys(fruits[0]);
38+
let values = [];
39+
fruits.forEach(ele => {
40+
values.push(Object.values(ele));
41+
});
42+
let valuepairs = [];
43+
fruits.forEach(ele => {
44+
valuepairs.push(Object.entries(ele));
45+
});
46+
console.log('Keys => ', keys);
47+
console.log('values => ', values);
48+
console.log('valuepairs => ', valuepairs);
49+
</script>
50+
</body>
51+
</html>

‎object_compare.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Compare keys value of an Array of Objects</title>
5+
</head>
6+
<body>
7+
<h2>Compare keys value of an Array of Objects</h2>
8+
<script>
9+
let objArr = [
10+
{
11+
keyOne: 1,
12+
keyTwo: 0,
13+
keyThree: 1
14+
},
15+
{
16+
keyOne: 0,
17+
keyTwo: 0,
18+
keyThree: 1
19+
},
20+
{
21+
keyOne: 1,
22+
keyTwo: 0,
23+
keyThree: 0
24+
}
25+
];
26+
let valuesOfArr = [];
27+
let objKeys = Object.keys(objArr[0]);
28+
console.log(objKeys);
29+
objKeys.forEach(elem=> {
30+
let val = [];
31+
objArr.forEach(ele => {
32+
val.push(ele[elem]);
33+
});
34+
valuesOfArr.push(val);
35+
});
36+
console.log(valuesOfArr);
37+
valuesOfArr.forEach(ele => {
38+
let areAllEqual = ele.every( (val, i, arr) => val === arr[0] );
39+
console.log(areAllEqual);
40+
});
41+
</script>
42+
</body>
43+
</html>

‎prompt.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Prompt functions</title>
5+
</head>
6+
<body>
7+
<h2>Prompt functions</h2>
8+
<script>
9+
function getPrompt() {
10+
return prompt('Your Name', '');
11+
}
12+
function print() {
13+
let username = getPrompt();
14+
console.log('Hi '+username);
15+
}
16+
print();
17+
</script>
18+
</body>
19+
</html>

0 commit comments

Comments
 (0)