From ead5dac0d02b8e5fde64364a233a083d20ae7500 Mon Sep 17 00:00:00 2001 From: Zonayed Ahmed Date: Wed, 3 Oct 2018 21:05:22 +0530 Subject: [PATCH 1/3] Project File Ready --- index.html | 19 ++++++++-- script-before.js | 0 script-done.js | 98 ++++++++++++++++++++++++++++++++++++++++++++++++ script.js | 1 + style.css | 30 +++++++++++++++ 5 files changed, 145 insertions(+), 3 deletions(-) delete mode 100644 script-before.js create mode 100644 script-done.js diff --git a/index.html b/index.html index 225923c..edcd793 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - Selecting Elements - JavaScript DOM Manipulation + Events - JavaScript DOM Manipulation @@ -10,9 +10,14 @@

Box 1

+

Box 2

+
+ valid-img + invalid-img +

Box 3

@@ -23,10 +28,18 @@

Box 3

Box 4

+
+

Input

+
+ + + +
+
diff --git a/script-before.js b/script-before.js deleted file mode 100644 index e69de29..0000000 diff --git a/script-done.js b/script-done.js new file mode 100644 index 0000000..1b7af11 --- /dev/null +++ b/script-done.js @@ -0,0 +1,98 @@ +function showAlert() { + alert('Alert by Function Call'); +} + +const clickMeBtn = document.getElementById('btn-click-me'); + +clickMeBtn.onclick = function(event) { + event.stopPropagation(); + event.stopImmediatePropagation(); + console.log('Button Clicked'); +} + +clickMeBtn.onmouseover = function() { + console.log('Mouse Over'); +} + +const box1 = document.getElementById('box1'); + +box1.addEventListener('click', function() { + console.log('Clicked on Box 1'); +}) + +clickMeBtn.addEventListener('click', function() { + console.log('Another Click Event'); +}); + +const link = document.getElementById('link'); + +link.addEventListener('click', function(event) { + event.preventDefault(); +}); + +var box4 = document.getElementById('box4'); + +box4.addEventListener('click', function(event) { + if(event.target.tagName === 'LI') { + console.log('Clicked on a List Item'); + } +}); + +const inputs = document.querySelectorAll('input'); +const submitBtn = document.querySelector('button[type=submit]'); + +inputs[0].addEventListener('change', function(event) { + console.log(event.target.value); +}); + +submitBtn.addEventListener('click', function(event) { + event.preventDefault(); + if(inputs[0].value === '' || inputs[1].value === '') { + alert('Input Field cannot be Empty!'); + } else { + var input0Data = inputs[0].value; + var input1Data = inputs[1].value; + console.log('Your Name:', input0Data, 'And Your Email:', input1Data); + } +}); + +document.addEventListener('keydown', function(event) { + console.log('Key Down Event'); + console.log('Pressed Key: ' + event.key); + console.dir(event); +}); + +document.addEventListener('keypress', function() { + console.log('Key Press Event'); +}); + +document.addEventListener('keyup', function() { + console.log('Key Up Event'); +}); + +clickMeBtn.addEventListener('mouseover', function() { + console.log('On Mouse Over using addEventListener'); +}); + +clickMeBtn.addEventListener('mouseout', function() { + console.log('On Mouse Out'); +}); + +window.addEventListener('load', function() { + console.log('Your Page Fully Loaded!'); +}); + +document.addEventListener('DOMContentLoaded', function() { + console.log('Your Markup is Ready!'); +}); + +var img1 = document.querySelector('img[alt=valid-img]'); +var img2 = document.querySelector('img[alt=invalid-img]'); + +img1.addEventListener('load', function() { + console.log('Image 1 Has Successfully Loaded!'); +}); + +img2.addEventListener('error', function(event) { + console.log('Image Cannot be loaded!'); +}); diff --git a/script.js b/script.js index e69de29..0c86571 100644 --- a/script.js +++ b/script.js @@ -0,0 +1 @@ +// Start Writing Code Here diff --git a/style.css b/style.css index 9cd1ca7..25a6a8c 100644 --- a/style.css +++ b/style.css @@ -9,6 +9,26 @@ body { background-color: #e3e3e3; } +button { + background-color: #fff; + border: none; + text-transform: uppercase; + padding: 8px 15px; + cursor: pointer; + border-radius: 4px; + font-weight: 900; + margin-top: 10px; +} + +input { + border: none; + display: block; + margin: 10px auto; + width: 100%; + padding: 8px 15px; + border-radius: 4px; +} + .wrapper { display: flex; margin: 0 auto; @@ -72,6 +92,16 @@ body { background-color: #4CAF50; } +.images { + margin-top: 10px; +} + +.images img { + display: block; + margin: 0 auto; + padding: 10px 0; +} + .black-bg { background-color: #000; } From 92c48463ae9ef01499219839d1e2072ef9e4fa4c Mon Sep 17 00:00:00 2001 From: Zonayed Ahmed Date: Fri, 5 Oct 2018 20:24:59 +0530 Subject: [PATCH 2/3] Ajax Project --- index.html | 33 ++++------------- script-done.js | 98 -------------------------------------------------- script.js | 21 ++++++++++- 3 files changed, 26 insertions(+), 126 deletions(-) diff --git a/index.html b/index.html index edcd793..857719a 100644 --- a/index.html +++ b/index.html @@ -2,44 +2,23 @@ - Events - JavaScript DOM Manipulation + AJAX - JavaScript DOM Manipulation
-
-

Box 1

- +
+

Posts

+
-
-

Box 2

-
- valid-img - invalid-img -
-
-
-

Box 3

- Lorem ipsum dolor sit -

amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

-
-
-

Box 4

+
+

About

-
-

Input

-
- - - -
-
diff --git a/script-done.js b/script-done.js index 1b7af11..e69de29 100644 --- a/script-done.js +++ b/script-done.js @@ -1,98 +0,0 @@ -function showAlert() { - alert('Alert by Function Call'); -} - -const clickMeBtn = document.getElementById('btn-click-me'); - -clickMeBtn.onclick = function(event) { - event.stopPropagation(); - event.stopImmediatePropagation(); - console.log('Button Clicked'); -} - -clickMeBtn.onmouseover = function() { - console.log('Mouse Over'); -} - -const box1 = document.getElementById('box1'); - -box1.addEventListener('click', function() { - console.log('Clicked on Box 1'); -}) - -clickMeBtn.addEventListener('click', function() { - console.log('Another Click Event'); -}); - -const link = document.getElementById('link'); - -link.addEventListener('click', function(event) { - event.preventDefault(); -}); - -var box4 = document.getElementById('box4'); - -box4.addEventListener('click', function(event) { - if(event.target.tagName === 'LI') { - console.log('Clicked on a List Item'); - } -}); - -const inputs = document.querySelectorAll('input'); -const submitBtn = document.querySelector('button[type=submit]'); - -inputs[0].addEventListener('change', function(event) { - console.log(event.target.value); -}); - -submitBtn.addEventListener('click', function(event) { - event.preventDefault(); - if(inputs[0].value === '' || inputs[1].value === '') { - alert('Input Field cannot be Empty!'); - } else { - var input0Data = inputs[0].value; - var input1Data = inputs[1].value; - console.log('Your Name:', input0Data, 'And Your Email:', input1Data); - } -}); - -document.addEventListener('keydown', function(event) { - console.log('Key Down Event'); - console.log('Pressed Key: ' + event.key); - console.dir(event); -}); - -document.addEventListener('keypress', function() { - console.log('Key Press Event'); -}); - -document.addEventListener('keyup', function() { - console.log('Key Up Event'); -}); - -clickMeBtn.addEventListener('mouseover', function() { - console.log('On Mouse Over using addEventListener'); -}); - -clickMeBtn.addEventListener('mouseout', function() { - console.log('On Mouse Out'); -}); - -window.addEventListener('load', function() { - console.log('Your Page Fully Loaded!'); -}); - -document.addEventListener('DOMContentLoaded', function() { - console.log('Your Markup is Ready!'); -}); - -var img1 = document.querySelector('img[alt=valid-img]'); -var img2 = document.querySelector('img[alt=invalid-img]'); - -img1.addEventListener('load', function() { - console.log('Image 1 Has Successfully Loaded!'); -}); - -img2.addEventListener('error', function(event) { - console.log('Image Cannot be loaded!'); -}); diff --git a/script.js b/script.js index 0c86571..933c08b 100644 --- a/script.js +++ b/script.js @@ -1 +1,20 @@ -// Start Writing Code Here +var loadPosts = document.getElementById('btn-click-me'); +var box = document.getElementById('box'); +var uList = document.createElement('ul'); + +loadPosts.addEventListener('click', function() { + var request = new XMLHttpRequest(); + request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true); + request.send(); + request.onreadystatechange = function handleRequest(){ + if(request.readyState === 4 && request.status === 200) { + const data = JSON.parse(request.responseText); + data.forEach(function(singleData) { + var list = document.createElement('li'); + list.textContent = singleData.title; + uList.appendChild(list) + }) + box.insertAdjacentElement('beforeend', uList); + } + } +}); From 2962802d9cd75c24bac93810c49e16fbf9cf6940 Mon Sep 17 00:00:00 2001 From: Zonayed Ahmed Date: Fri, 5 Oct 2018 20:30:23 +0530 Subject: [PATCH 3/3] ajax starter pack --- script-done.js | 20 ++++++++++++++++++++ script.js | 21 +-------------------- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/script-done.js b/script-done.js index e69de29..04e311b 100644 --- a/script-done.js +++ b/script-done.js @@ -0,0 +1,20 @@ +var loadPosts = document.getElementById('btn-click-me'); +var box = document.getElementById('box'); +var uList = document.createElement('ul'); + +loadPosts.addEventListener('click', function() { + var request = new XMLHttpRequest(); + request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true); + request.send(); + request.onreadystatechange = function handleRequest(){ + if(request.readyState === 4 && request.status === 200) { + var data = JSON.parse(request.responseText); + data.forEach(function(singleData) { + var list = document.createElement('li'); + list.textContent = singleData.title; + uList.appendChild(list) + }) + box.insertAdjacentElement('beforeend', uList); + } + } +}); diff --git a/script.js b/script.js index 933c08b..b55091c 100644 --- a/script.js +++ b/script.js @@ -1,20 +1 @@ -var loadPosts = document.getElementById('btn-click-me'); -var box = document.getElementById('box'); -var uList = document.createElement('ul'); - -loadPosts.addEventListener('click', function() { - var request = new XMLHttpRequest(); - request.open('GET', 'https://jsonplaceholder.typicode.com/posts', true); - request.send(); - request.onreadystatechange = function handleRequest(){ - if(request.readyState === 4 && request.status === 200) { - const data = JSON.parse(request.responseText); - data.forEach(function(singleData) { - var list = document.createElement('li'); - list.textContent = singleData.title; - uList.appendChild(list) - }) - box.insertAdjacentElement('beforeend', uList); - } - } -}); +// Write your code here