Skip to content

Commit 7ba32b1

Browse files
piyalidas10piyalidas10
committed
sample codes
1 parent 57ad389 commit 7ba32b1

29 files changed

+1367
-1
lines changed

‎Code_optimization.png

348 KB
Loading

‎Dag-Drop/drag-drop.html

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Javascript Drag and Drop</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
8+
<style>
9+
h2 {text-align: center;}
10+
.box{
11+
background-color: #eeeeee;
12+
border: #cccccc 1px solid;
13+
padding: 15px;
14+
}
15+
.taskbox {
16+
list-style: none;
17+
padding: 10px;
18+
margin-bottom: 10px;
19+
}
20+
#todo, #inprogress, #intesting, #done {
21+
min-height: 300px;
22+
}
23+
#todo .taskbox {
24+
background-color: #ffffff;
25+
}
26+
#inprogress .taskbox {
27+
background-color: #bdf3c9;
28+
}
29+
#intesting .taskbox {
30+
background-color: #fbf1d5;
31+
}
32+
#done .taskbox {
33+
background-color: #fdd5d5;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div class="container">
39+
<div class="row">
40+
<div class="col-sm-8"></div>
41+
<div class="col-sm-4"></div>
42+
</div>
43+
<h2>Javascript Drag and Drop</h2>
44+
<div class="row">
45+
<div class="col-sm-3">
46+
<div class="box">
47+
<h4>ToDo</h4>
48+
<div id="todo"
49+
ondragover="onDragOver(event);"
50+
ondrop="onDrop(event);"
51+
></div>
52+
</div>
53+
</div>
54+
<div class="col-sm-3">
55+
<div class="box">
56+
<h4>In Progress</h4>
57+
<div id="inprogress"
58+
ondragover="onDragOver(event);"
59+
ondrop="onDrop(event);"
60+
></div>
61+
</div>
62+
</div>
63+
<div class="col-sm-3">
64+
<div class="box">
65+
<h4>In Testing</h4>
66+
<div id="intesting"
67+
ondragover="onDragOver(event);"
68+
ondrop="onDrop(event);"
69+
></div>
70+
</div>
71+
</div>
72+
<div class="col-sm-3">
73+
<div class="box">
74+
<h4>Done</h4>
75+
<div id="done"
76+
ondragover="onDragOver(event);"
77+
ondrop="onDrop(event);"
78+
></div>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
<script>
84+
let stepsArr = [
85+
{stepid: 1, name: 'todo'},
86+
{stepid: 1, name: 'inprogress'},
87+
{stepid: 1, name: 'intesting'},
88+
{stepid: 1, name: 'done'},
89+
]
90+
let todoArr = [], inprogresArr = [], doneArr = [];
91+
todoArr = [
92+
{id:1, title: 'task 1'},
93+
{id:2, title: 'task 2'},
94+
{id:3, title: 'task 3'},
95+
{id:4, title: 'task 4'}
96+
];
97+
let fromStepName, toStepName;
98+
let todoDiv = document.getElementById('todo');
99+
createLists(todoDiv, todoArr);
100+
101+
function createLists(divElem, arr) {
102+
for (i = 0; i< arr.length; i++) {
103+
divElem.innerHTML += '<div class="taskbox" draggable="true" ondragstart="onDragStart(event);" id=' + arr[i].id + '>' + arr[i].title + '</div>';
104+
}
105+
}
106+
107+
function onDragStart(event) {
108+
fromStepName = event.srcElement.parentElement.id;
109+
console.log(fromStepName);
110+
event.dataTransfer.setData('text/plain', event.target.id);
111+
}
112+
function onDragOver(event) {
113+
event.preventDefault();
114+
}
115+
function onDrop(event) {
116+
const dropzone = event.target;
117+
toStepName = event.target.id;
118+
console.log(toStepName);
119+
let returnObj = checkNextStep(fromStepName, toStepName);
120+
if (
121+
(returnObj.toIndex === returnObj.fromIndex + 1) ||
122+
(returnObj.toIndex < returnObj.fromIndex)
123+
){
124+
const id = event.dataTransfer.getData('text');
125+
const draggableElement = document.getElementById(id);
126+
dropzone.appendChild(draggableElement);
127+
event.dataTransfer.clearData();
128+
} else {
129+
alert('Cannot drag');
130+
}
131+
}
132+
function checkNextStep(fromStepName, toStepName) {
133+
fromStepNameIndex = stepsArr.findIndex(step => step.name === fromStepName);
134+
toStepNameIndex = stepsArr.findIndex(step => step.name === toStepName);
135+
console.log(fromStepNameIndex, toStepNameIndex);
136+
return {fromIndex: fromStepNameIndex, toIndex: toStepNameIndex};
137+
}
138+
</script>
139+
</body>
140+
</html>

‎Fetch_API.html

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
#products li {
6+
display: inline-block;
7+
width: 20%;
8+
text-align: center;
9+
}
10+
.productImg{
11+
max-width: 100%;
12+
height: 100px;
13+
}
14+
.error{
15+
color: red;
16+
}
17+
</style>
18+
</head>
19+
<body>
20+
21+
<h2>Javascript Fetch API</h2>
22+
<pre>
23+
So first we are calling the Fetch API and passing it the URL we defined as a constant above and since no more parameters are set this is a simple GET request.
24+
Then we get a response but the response we get is not JSON but an object with a series of methods we can use depending on what we want to do with the information, these methods include:
25+
26+
clone() - As the method implies this method creates a clone of the response.
27+
redirect() - This method creates a new response but with a different URL.
28+
arrayBuffer() - In here we return a promise that resolves with an ArrayBuffer.
29+
formData() - Also returns a promise but one that resolves with FormData object.
30+
blob() - This is one resolves with a Blob.
31+
text() - In this case it resolves with a string.
32+
json() - Lastly we have the method to that resolves the promise with JSON.
33+
</pre>
34+
<a href="https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data">
35+
https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data
36+
</a>
37+
<ul id="products"></ul>
38+
<script>
39+
function createNode(element) {
40+
return document.createElement(element);
41+
}
42+
43+
function append(parent, el) {
44+
return parent.appendChild(el);
45+
}
46+
function errorDiv(error) {
47+
let p = createNode('p');
48+
p.setAttribute("class", "error");
49+
p.innerHTML = error;
50+
append(document.body, p);
51+
}
52+
/*
53+
The fetch() method takes one mandatory argument, the path to the resource you want to fetch.
54+
It returns a Promise that resolves to the Response to that request, whether it is successful or not.
55+
*/
56+
const theUrl = 'https://raw.githubusercontent.com/dotnet-presentations/ContosoCrafts/master/src/wwwroot/data/products.json';
57+
const ul = document.getElementById('products');
58+
fetch(theUrl) // Call the fetch function passing the url of the API as a parameter
59+
.then((response) => {
60+
console.log(response.status); // Will show you the status
61+
if (response.ok) {
62+
return response.json();
63+
} else {
64+
errorDiv(response.status);
65+
throw new Error("HTTP status " + response.status);
66+
}
67+
}) // Transform the data into json
68+
.then(function(data) { // Call the fetch function passing the url of the API as a parameter
69+
let products = data;
70+
console.log(products);
71+
return products.map(function(product) { // Map through the results and for each run the code below
72+
let li = createNode('li'),
73+
img = createNode('img'),
74+
h4 = createNode('h4'),
75+
span = createNode('span');
76+
img.src = product.img;
77+
img.setAttribute("class", "productImg");
78+
h4.innerHTML = `${product.Title}`;
79+
span.innerHTML = `${product.Description}`;
80+
append(li, img);
81+
append(li, h4);
82+
append(li, span);
83+
append(ul, li);
84+
})
85+
})
86+
.catch(function(error) { // This is where you run code if the server returns any errors
87+
errorDiv(error);
88+
console.log(error);
89+
});
90+
</script>
91+
</body>
92+
</html>

‎Object_destructuring.html

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
5+
<h2>Object Destructuring</h2>
6+
<p>Open console to check</p>
7+
<script>
8+
const person = {
9+
firstName: 'Piyali',
10+
lastName: 'Das',
11+
address: {
12+
city: 'Kolkata',
13+
state: 'West Bengal'
14+
}
15+
};
16+
17+
// Why need Destructuring. You can do it using Normal Method
18+
const fname = person.firstName;
19+
const lname = person.lastName;
20+
console.log('Without Destructuring => ', fname + ' ' + lname);
21+
22+
// With Destructuring
23+
const {firstName, lastName} = person;
24+
console.log('Destructuring => ', firstName + ' ' + lastName);
25+
26+
/* With Destructuring..But returns value "Undefined"
27+
because the property "param1" and "param2" doesn’t exist in the object name. */
28+
const {param1, param2} = person;
29+
console.log('Destructuring with diferent names => ', param1 + ' ' + param2);
30+
31+
/*
32+
Destructuring with Alias --------
33+
If you’d like to create variables of different names than the properties,
34+
then you can use the aliasing feature of object destructuring.
35+
*/
36+
const { firstName: param3, lastName: param4 } = person;
37+
console.log('Destructuring with Aliases => ', param3 + ' ' + param4);
38+
39+
// Destructuring with nested objects
40+
const { address: { city } } = person;
41+
console.log('Destructuring Address => ', city);
42+
43+
/* Destructuring using Spread Operator.
44+
Other will print :
45+
{employee_id: "111111", address: {…}}
46+
*/
47+
const employee = {
48+
employee_name: 'Piyali Das',
49+
employee_id: '111111',
50+
address: {
51+
city: 'Kolkata',
52+
state: 'West Bengal'
53+
}
54+
};
55+
const {employee_name, ...other} = employee;
56+
console.log('Destructuring Other Values => ', other);
57+
58+
</script>
59+
</body>
60+
</html>

‎Object_null_empty_check.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Object null or empty check</title>
5+
</head>
6+
<body>
7+
<h2>Object null or empty check</h2>
8+
<script>
9+
const obj = {
10+
username: 'Piyali',
11+
emailId: '',
12+
mobile: '14312312'
13+
};
14+
15+
const isObjNullOrEmpty = Object.values(obj).some(x => (x === null || x === ''));
16+
console.log('Object is null or empty => ', Object.values(obj), isObjNullOrEmpty);
17+
18+
</script>
19+
</body>
20+
</html>

‎Resizable_Div/debug.log

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[1225/213424.630:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

0 commit comments

Comments
 (0)