Skip to content

Commit 92c4846

Browse files
zonayedpcazonayedpca
committed
Ajax Project
1 parent ead5dac commit 92c4846

File tree

3 files changed

+26
-126
lines changed

3 files changed

+26
-126
lines changed

‎index.html‎

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,23 @@
22
<html lang="en" dir="ltr">
33
<head>
44
<meta charset="utf-8">
5-
<title>Events - JavaScript DOM Manipulation</title>
5+
<title>AJAX - JavaScript DOM Manipulation</title>
66
<link rel="stylesheet" href="style.css">
77
</head>
88
<body>
99
<div class="wrapper">
1010
<div class="boxes">
11-
<div id="box1" class="box" data-atr="box1" data-extra="attrToRemove">
12-
<h4>Box 1</h4>
13-
<button id="btn-click-me" type="button" name="click">Click Me</button>
11+
<div id="box" class="box" data-atr="box1" data-extra="attrToRemove">
12+
<h4>Posts</h4>
13+
<button id="btn-click-me" type="button" name="click">Load Posts</button>
1414
</div>
15-
<div id="box2" class="box" data-atr="box2">
16-
<h4>Box 2</h4>
17-
<div class="images">
18-
<img src="https://via.placeholder.com/150x150" alt="valid-img">
19-
<img src="https://audkjskjghkfgdbgfbgjdfg.fhgfkdbgjdb/fbdsfjhbf.png" alt="invalid-img">
20-
</div>
21-
</div>
22-
<div id="box3" class="box" data-atr="box3">
23-
<h4>Box 3</h4>
24-
Lorem ipsum <strong>dolor sit</strong>
25-
<p class="box3-paragraph">amet, <em>consectetur</em> adipisicing elit, <strong>sed do eiusmod</strong> tempor incididunt ut labore et dolore magna aliqua</p>
26-
</div>
27-
<div id="box4" class="box" data-atr="box4">
28-
<h4>Box 4</h4>
15+
<div id="aboutBox" class="box" data-atr="box4">
16+
<h4>About</h4>
2917
<ul>
30-
<li>About this document</li>
3118
<li id="link"><a href="https://with.zonayed.me">JavaScript DOM Manipulation</a></li>
3219
<li><a href="https://with.zonayed.me">Learn With Zonayed</a></li>
3320
</ul>
3421
</div>
35-
<div id="box5" class="box">
36-
<h4>Input</h4>
37-
<form>
38-
<input type="text" name="name" placeholder="Your Name">
39-
<input type="text" name="email" placeholder="Your Email">
40-
<button type="submit" name="submit">Submit</button>
41-
</form>
42-
</div>
4322
</div>
4423
</div>
4524
<script src="script.js" charset="utf-8"></script>

‎script-done.js‎

Lines changed: 0 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +0,0 @@
1-
function showAlert() {
2-
alert('Alert by Function Call');
3-
}
4-
5-
const clickMeBtn = document.getElementById('btn-click-me');
6-
7-
clickMeBtn.onclick = function(event) {
8-
event.stopPropagation();
9-
event.stopImmediatePropagation();
10-
console.log('Button Clicked');
11-
}
12-
13-
clickMeBtn.onmouseover = function() {
14-
console.log('Mouse Over');
15-
}
16-
17-
const box1 = document.getElementById('box1');
18-
19-
box1.addEventListener('click', function() {
20-
console.log('Clicked on Box 1');
21-
})
22-
23-
clickMeBtn.addEventListener('click', function() {
24-
console.log('Another Click Event');
25-
});
26-
27-
const link = document.getElementById('link');
28-
29-
link.addEventListener('click', function(event) {
30-
event.preventDefault();
31-
});
32-
33-
var box4 = document.getElementById('box4');
34-
35-
box4.addEventListener('click', function(event) {
36-
if(event.target.tagName === 'LI') {
37-
console.log('Clicked on a List Item');
38-
}
39-
});
40-
41-
const inputs = document.querySelectorAll('input');
42-
const submitBtn = document.querySelector('button[type=submit]');
43-
44-
inputs[0].addEventListener('change', function(event) {
45-
console.log(event.target.value);
46-
});
47-
48-
submitBtn.addEventListener('click', function(event) {
49-
event.preventDefault();
50-
if(inputs[0].value === '' || inputs[1].value === '') {
51-
alert('Input Field cannot be Empty!');
52-
} else {
53-
var input0Data = inputs[0].value;
54-
var input1Data = inputs[1].value;
55-
console.log('Your Name:', input0Data, 'And Your Email:', input1Data);
56-
}
57-
});
58-
59-
document.addEventListener('keydown', function(event) {
60-
console.log('Key Down Event');
61-
console.log('Pressed Key: ' + event.key);
62-
console.dir(event);
63-
});
64-
65-
document.addEventListener('keypress', function() {
66-
console.log('Key Press Event');
67-
});
68-
69-
document.addEventListener('keyup', function() {
70-
console.log('Key Up Event');
71-
});
72-
73-
clickMeBtn.addEventListener('mouseover', function() {
74-
console.log('On Mouse Over using addEventListener');
75-
});
76-
77-
clickMeBtn.addEventListener('mouseout', function() {
78-
console.log('On Mouse Out');
79-
});
80-
81-
window.addEventListener('load', function() {
82-
console.log('Your Page Fully Loaded!');
83-
});
84-
85-
document.addEventListener('DOMContentLoaded', function() {
86-
console.log('Your Markup is Ready!');
87-
});
88-
89-
var img1 = document.querySelector('img[alt=valid-img]');
90-
var img2 = document.querySelector('img[alt=invalid-img]');
91-
92-
img1.addEventListener('load', function() {
93-
console.log('Image 1 Has Successfully Loaded!');
94-
});
95-
96-
img2.addEventListener('error', function(event) {
97-
console.log('Image Cannot be loaded!');
98-
});

‎script.js‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,20 @@
1-
// Start Writing Code Here
1+
var loadPosts = document.getElementById('btn-click-me');
2+
var box = document.getElementById('box');
3+
var uList = document.createElement('ul');
4+
5+
loadPosts.addEventListener('click', function() {
6+
var request = new XMLHttpRequest();
7+
request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
8+
request.send();
9+
request.onreadystatechange = function handleRequest(){
10+
if(request.readyState === 4 && request.status === 200) {
11+
const data = JSON.parse(request.responseText);
12+
data.forEach(function(singleData) {
13+
var list = document.createElement('li');
14+
list.textContent = singleData.title;
15+
uList.appendChild(list)
16+
})
17+
box.insertAdjacentElement('beforeend', uList);
18+
}
19+
}
20+
});

0 commit comments

Comments
 (0)