From cf72b9d481c0751bc2eaa36e987b63586e64f47c Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Mon, 25 Jan 2021 19:13:48 -0500 Subject: [PATCH 1/4] Part 1 --- dog.html | 11 +++++++++++ dog.js | 13 +++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 dog.html create mode 100644 dog.js diff --git a/dog.html b/dog.html new file mode 100644 index 0000000..9cec844 --- /dev/null +++ b/dog.html @@ -0,0 +1,11 @@ + + + + Random Dogs + + + + +
+ + \ No newline at end of file diff --git a/dog.js b/dog.js new file mode 100644 index 0000000..6883a7b --- /dev/null +++ b/dog.js @@ -0,0 +1,13 @@ +const xhr = new XMLHttpRequest(); + +xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + const response = JSON.parse(xhr.responseText); + const img = ``; + document.getElementById('dog-div').innerHTML = img; + } + +}; + +xhr.open('GET', 'https://dog.ceo/api/breeds/image/random'); +xhr.send(); \ No newline at end of file From 3a50422d91f7dafa419092372441eeb3af99e778 Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Mon, 25 Jan 2021 19:22:46 -0500 Subject: [PATCH 2/4] Part 3 --- dog.html | 2 +- dog.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/dog.html b/dog.html index 9cec844..4483aa9 100644 --- a/dog.html +++ b/dog.html @@ -5,7 +5,7 @@ - +
\ No newline at end of file diff --git a/dog.js b/dog.js index 6883a7b..c3114c8 100644 --- a/dog.js +++ b/dog.js @@ -10,4 +10,7 @@ xhr.onreadystatechange = () => { }; xhr.open('GET', 'https://dog.ceo/api/breeds/image/random'); -xhr.send(); \ No newline at end of file +const revealBtn = document.getElementById('revealBtn'); +function sendAJAX() { + xhr.send(); +} From 77690ce3f02998bdf96088563e4421ec56bc6737 Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Mon, 25 Jan 2021 19:36:51 -0500 Subject: [PATCH 3/4] This has the button produce a new image each time --- dog.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/dog.js b/dog.js index c3114c8..3fe48b5 100644 --- a/dog.js +++ b/dog.js @@ -1,16 +1,21 @@ const xhr = new XMLHttpRequest(); -xhr.onreadystatechange = () => { - if (xhr.readyState === 4) { - const response = JSON.parse(xhr.responseText); - const img = ``; - document.getElementById('dog-div').innerHTML = img; - } +function createImg() { + xhr.onreadystatechange = () => { + if (xhr.readyState === 4) { + const response = JSON.parse(xhr.responseText); + const img = ``; + document.getElementById('dog-div').innerHTML += img; + } + + }; -}; - -xhr.open('GET', 'https://dog.ceo/api/breeds/image/random'); + xhr.open('GET', 'https://dog.ceo/api/breeds/image/random'); + xhr.send(); +} const revealBtn = document.getElementById('revealBtn'); function sendAJAX() { - xhr.send(); + createImg(); + createImg(); + createImg(); } From 227a458583c0dfb724e3dd92a382ab008af2d463 Mon Sep 17 00:00:00 2001 From: Amatullah Brown Date: Mon, 25 Jan 2021 21:01:38 -0500 Subject: [PATCH 4/4] completed using vanilla js and jquery --- dog-jq.html | 16 ++++++++++++++++ dog-jq.js | 12 ++++++++++++ dog.html | 2 +- dog.js | 22 ++++++++++++---------- 4 files changed, 41 insertions(+), 11 deletions(-) create mode 100644 dog-jq.html create mode 100644 dog-jq.js diff --git a/dog-jq.html b/dog-jq.html new file mode 100644 index 0000000..7476a8f --- /dev/null +++ b/dog-jq.html @@ -0,0 +1,16 @@ + + + + + + + + Document + + + +
+ +
+ + \ No newline at end of file diff --git a/dog-jq.js b/dog-jq.js new file mode 100644 index 0000000..eea6ea1 --- /dev/null +++ b/dog-jq.js @@ -0,0 +1,12 @@ +//completed using jquery +$(document).ready(function(){ + $('#buttonclick').on('click','button',function(){ + $.ajax('https://dog.ceo/api/breeds/image/random/3',{ + success: function(response){ + for (let i=0; i<3; i++) { + $('#buttonclick').append(``) + } + } + }) + }) +}); \ No newline at end of file diff --git a/dog.html b/dog.html index 4483aa9..da188e6 100644 --- a/dog.html +++ b/dog.html @@ -5,7 +5,7 @@ - +
\ No newline at end of file diff --git a/dog.js b/dog.js index 3fe48b5..7f606d8 100644 --- a/dog.js +++ b/dog.js @@ -1,21 +1,23 @@ -const xhr = new XMLHttpRequest(); - +//completed using vanilla js function createImg() { + const xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { const response = JSON.parse(xhr.responseText); - const img = ``; - document.getElementById('dog-div').innerHTML += img; + let img; + for (let i=0; i<3; i++) { + img = ``; + document.getElementById('dog-div').innerHTML = img + document.getElementById('dog-div').innerHTML; + } } - + console.log(xhr); + console.log(response.message); }; - xhr.open('GET', 'https://dog.ceo/api/breeds/image/random'); + xhr.open('GET', 'https://dog.ceo/api/breeds/image/random/3'); xhr.send(); } -const revealBtn = document.getElementById('revealBtn'); + function sendAJAX() { createImg(); - createImg(); - createImg(); -} +} \ No newline at end of file