Skip to content

Commit 7332ee4

Browse files
UsmanMERNUsmanMERN
committed
All souce coode of Advance JavaScript.Which i learn from Thapa Technical Yt channel
0 parents  commit 7332ee4

File tree

6 files changed

+1378
-0
lines changed

6 files changed

+1378
-0
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

‎Usman.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
"i am muhammad usman practing AJAX from code with Harray"

‎adnvacejs.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>ADvance Javascript</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
9+
</head>
10+
<body>
11+
<h1>advance JS</h1>
12+
<div id="google_translate_element"></div>
13+
<h1>Heading </h1>
14+
<h3>I am Muhammad usman</h3>
15+
<h3>How are you</h3>
16+
<div class="container" id="content">
17+
<h1>Employee List</h1>
18+
<button type="button" id="FetchBtn" class="btn btn-primary">Fetch Data</button>
19+
<button type="button" id="backupBtn" class="btn btn-secondary">Back UP</button>
20+
21+
</div>
22+
23+
24+
25+
26+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
27+
<script type="text/javascript">
28+
function googleTranslateElementInit() {
29+
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
30+
}
31+
</script>
32+
33+
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
34+
<script src="./js/advance.js"></script>
35+
</body>
36+
</html>

‎ajax.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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">
6+
7+
<!-- bootsrtap CSS -->
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
9+
<title>AJAX</title>
10+
</head>
11+
<body>
12+
<h1>AJAX</h1>
13+
14+
<button type="button" id="FetchBtn" class="btn btn-primary">Fetch Data</button>
15+
<button type="button" id="backupBtn" class="btn btn-secondary">Back UP</button>
16+
<div class="container">
17+
<h1>Employee List</h1>
18+
<ul id="list"></ul>
19+
20+
</div>
21+
22+
23+
24+
25+
26+
<!-- custom js -->
27+
<script src="./ajax.js"></script>
28+
<!-- botstrap JS -->
29+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
30+
</body>
31+
</html>

‎ajax.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
console.log(`HLo File testing`);
2+
3+
const fetchBtn=document.querySelector('#FetchBtn');
4+
5+
fetchBtn.addEventListener('click',Btnevet)
6+
7+
function Btnevet(){
8+
console.log(`Button is clicked`);
9+
10+
// Initiate the Object
11+
12+
let xhr=new XMLHttpRequest();
13+
14+
// open object
15+
16+
// GET REquest
17+
// xhr.open('GET','https://jsonplaceholder.typicode.com/todos/1',true)
18+
// xhr.open('GET','Usman.txt',true)
19+
20+
// use This for POST Request
21+
xhr.open('POST','https://dummy.restapiexample.com/api/v1/create',true)
22+
xhr.getResponseHeader('Content_tpye','application/JSON');
23+
24+
// what to do on progress (OPtional)
25+
xhr.onprogress=()=>{
26+
console.log(`This is on Progress`);
27+
}
28+
29+
// what to do on load
30+
31+
xhr.onload=function(){
32+
if(this.status===200){
33+
console.log(this.responseText);
34+
}
35+
else{
36+
console.log("Error occured");
37+
}
38+
}
39+
40+
// on ready state
41+
42+
xhr.onreadystatechange=function(){
43+
console.log("ready state is", xhr.readyState);
44+
}
45+
46+
// send the request
47+
48+
// for POST Request
49+
prms=`{"name":"test","salary":"123","age":"23"}`
50+
51+
52+
xhr.send(prms);
53+
54+
// for Get Request
55+
// xhr.send();
56+
57+
58+
console.log(`The Process is completed`);
59+
60+
}
61+
62+
const popBtn=document.querySelector('#backupBtn');
63+
64+
popBtn.addEventListener('click',popevent)
65+
66+
function popevent(){
67+
console.log(`Back up Button is clicked`);
68+
69+
// Initiate the Object
70+
71+
let xhr=new XMLHttpRequest();
72+
73+
// open object
74+
75+
// GET REquest
76+
xhr.open('GET','https://dummy.restapiexample.com/api/v1/employees',true)
77+
78+
// what to do on progress (OPtional)
79+
xhr.onprogress=()=>{
80+
console.log(`This is on Progress`);
81+
}
82+
83+
// what to do on load
84+
85+
xhr.onload=function(){
86+
if(this.status===200){
87+
let obj=JSON.parse(this.responseText);
88+
console.log(obj);
89+
let list=document.querySelector("#list");
90+
str="";
91+
for(key in obj){
92+
str+="<li>"+obj[key]+"</li>"
93+
}
94+
list.innerHTML=str;
95+
}
96+
else{
97+
console.log("Error occured");
98+
}
99+
}
100+
101+
// on ready state
102+
103+
// xhr.onreadystatechange=function(){
104+
// console.log("ready state is", xhr.readyState);
105+
// }
106+
107+
// send the request
108+
109+
// for Get Request
110+
xhr.send();
111+
112+
113+
console.log(`we get the data of ALL employees`);
114+
115+
}

0 commit comments

Comments
 (0)