From 37ab7cd8c77e13955a89848abfab5e7ab2c08543 Mon Sep 17 00:00:00 2001 From: saparker Date: Fri, 16 Sep 2022 09:10:17 -0400 Subject: [PATCH 1/3] able to fetch API, unable to access and find img urls --- .vscode/settings.json | 3 +++ css/styles.css | 0 index.html | 31 +++++++++++++++++++++++++++++-- js/app.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 css/styles.css create mode 100644 js/app.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6b665aaa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html index 695897ea..c82ee261 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,38 @@ + + + Hello Front-End - -

Hello Front-End

+ + +
+hello +
+ hello +
+ +
+
+ + + +
+ +
+
+
+ + + +
+ + + diff --git a/js/app.js b/js/app.js new file mode 100644 index 00000000..b813ec23 --- /dev/null +++ b/js/app.js @@ -0,0 +1,43 @@ +const container = document.querySelector('#middle-container') +const form = document.getElementById('form') +const catPicture = document.getElementById('kitty-container') +const submitButton = document.getElementById('input') +let results = + fetch('https://www.reddit.com/search.json?q=cats+nsfw:no').then((response) => { + console.log('resolved', response); + return response.json(); + }).catch((err) => { + console.log('rejected', err) + }) +// submitButton.addEventListener('click', function(){ + + +// form.addEventListener('submit', event =>{ +// event.preventDefault() +// fetch('https://www.reddit.com/search.json?q=cats+nsfw:no') +// .then((response) => { +// console.log('resolved', response); +// return response.json(); +// }).catch((err) => { +// console.log('rejected', err) + +// })}) + +// .addEventListener('click', function(event){ +// event.preventDefault(search) +// }) //^^^^^^^^^^^^^^^^^// attepting to prevent default + +const onShowKittySucess = (kittyUrls)=>{ + + + kittyUrls = data.children.map(object => object.data.thumbnail) + console.log(kittyUrls) +} + +// cat_image_urls = promise.map( object => object.) + + +// submitButton.addEventListener("click", () =>{ + +// .then(res => res.json()) +// .catch(console.error) \ No newline at end of file From 6fef895a6eeeefcba388b70dbbb1c408b80ed203 Mon Sep 17 00:00:00 2001 From: saparker Date: Sun, 18 Sep 2022 19:15:25 -0400 Subject: [PATCH 2/3] was unable to get images to display, but was able to create array of all picure urls per search. guided by solution branch --- index.html | 22 +++++++++-------- js/app.js | 69 +++++++++++++++++++++++++++++++++--------------------- 2 files changed, 54 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index c82ee261..7ed05ef5 100644 --- a/index.html +++ b/index.html @@ -11,19 +11,21 @@
-hello +
- hello +
- -
-
- - - -
+

+ + +
+
+ +
+ +
-
+
diff --git a/js/app.js b/js/app.js index b813ec23..e99735bd 100644 --- a/js/app.js +++ b/js/app.js @@ -1,17 +1,10 @@ -const container = document.querySelector('#middle-container') -const form = document.getElementById('form') -const catPicture = document.getElementById('kitty-container') -const submitButton = document.getElementById('input') -let results = - fetch('https://www.reddit.com/search.json?q=cats+nsfw:no').then((response) => { - console.log('resolved', response); - return response.json(); - }).catch((err) => { - console.log('rejected', err) - }) -// submitButton.addEventListener('click', function(){ +let container = document.querySelector('#middle-container') +const form = document.querySelector('form') +let photos = [] +let photosIndex = 0 + + - // form.addEventListener('submit', event =>{ // event.preventDefault() // fetch('https://www.reddit.com/search.json?q=cats+nsfw:no') @@ -21,23 +14,45 @@ let results = // }).catch((err) => { // console.log('rejected', err) -// })}) - -// .addEventListener('click', function(event){ -// event.preventDefault(search) -// }) //^^^^^^^^^^^^^^^^^// attepting to prevent default +form.addEventListener('submit', event => { + + event.preventDefault() -const onShowKittySucess = (kittyUrls)=>{ + const searchBar = document.getElementById('search').value + + fetch(`http://www.reddit.com/search.json?q=${searchBar}+nsfw:no`) + .then(res => res.json()) + .then(jsonData => { + photos = jsonData.data.children.map(obj => { + return{ + title: obj.data.title, + url: obj.data.url, + subreddit: obj.data.subreddit, + posthint: obj.data.post_hint + } + }).filter(obj =>{ + return obj.posthint === 'image' + }) + console.log(photos) + }) + + + - kittyUrls = data.children.map(object => object.data.thumbnail) - console.log(kittyUrls) -} + .catch(err => { + console.log('ERROR', err) + }) -// cat_image_urls = promise.map( object => object.) + let image = document.querySelector('img') + image = []; + photos.forEach(function(photos){ + image.push(photos.url); + + }) + + + +}) -// submitButton.addEventListener("click", () =>{ - -// .then(res => res.json()) -// .catch(console.error) \ No newline at end of file From 2c783e32e6be7803166ebeea3a5ffecac9f54288 Mon Sep 17 00:00:00 2001 From: saparker Date: Sat, 24 Sep 2022 16:06:12 -0400 Subject: [PATCH 3/3] completed requirements --- css/styles.css | 27 ++++++++++++++++ index.html | 19 +++++------ js/app.js | 86 ++++++++++++++++++++++++++++++++++++-------------- 3 files changed, 100 insertions(+), 32 deletions(-) diff --git a/css/styles.css b/css/styles.css index e69de29b..d8280de6 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,27 @@ +body{ + text-align: center; +} + +#middle-container{ + padding-top: 50px; + padding-bottom: 50px; + height: 700px; + width: 700px; + +} + +img { + width: 75%; + height: 75%; +} + +form{ + height: 200px; + width: 200px; +} + +#button-container{ + padding-top: 20px; + padding-bottom: 20px; + font-size: larger; +} \ No newline at end of file diff --git a/index.html b/index.html index 7ed05ef5..93b81dbc 100644 --- a/index.html +++ b/index.html @@ -13,20 +13,21 @@
- -
-

- - -
-
+
+
+ +
+ +
- + + + -
+
diff --git a/js/app.js b/js/app.js index e99735bd..5f87ff0a 100644 --- a/js/app.js +++ b/js/app.js @@ -2,23 +2,17 @@ let container = document.querySelector('#middle-container') const form = document.querySelector('form') let photos = [] let photosIndex = 0 +let interval = null +document.getElementById('stop').style.display = 'none' +document.getElementById('submit').style.display = 'inline-block' +document.getElementById('form').style.display = 'none' +document.getElementById('see-images').style.display = 'none' -// form.addEventListener('submit', event =>{ -// event.preventDefault() -// fetch('https://www.reddit.com/search.json?q=cats+nsfw:no') -// .then((response) => { -// console.log('resolved', response); -// return response.json(); -// }).catch((err) => { -// console.log('rejected', err) - -form.addEventListener('submit', event => { - + +document.getElementById('submit').addEventListener('click', (event) =>{ event.preventDefault() - - const searchBar = document.getElementById('search').value fetch(`http://www.reddit.com/search.json?q=${searchBar}+nsfw:no`) @@ -27,7 +21,7 @@ form.addEventListener('submit', event => { photos = jsonData.data.children.map(obj => { return{ title: obj.data.title, - url: obj.data.url, + url: obj.data.thumbnail, subreddit: obj.data.subreddit, posthint: obj.data.post_hint } @@ -43,16 +37,62 @@ form.addEventListener('submit', event => { .catch(err => { console.log('ERROR', err) }) - - let image = document.querySelector('img') - image = []; - photos.forEach(function(photos){ - image.push(photos.url); - - }) - - + document.getElementById('submit').style.display = 'none' + document.getElementById('form').style.display = 'inline' + document.getElementById('see-images').style.display = 'inline' +}) + + + + + +const slideshow = () =>{ + photosIndex = 0 + getImage() + + interval = setInterval(changeImage, 4000) +} + const changeImage = () =>{ + photosIndex ++ + + if(photosIndex>= photos.length){ + photosIndex = 0 + } + getImage() + } +function getImage(){ + document.getElementById('pics-container').innerText = '' +let image = document.createElement('img') +image.src = photos[photosIndex].url +image.alt = photos[photosIndex].title +let title = document.createElement('h3') +title.innerText = photos[photosIndex].title + document.getElementById('pics-container').appendChild(image) + document.getElementById('pics-container').appendChild(title) + +} + +document.getElementById('see-images').addEventListener('click', (event) =>{ + event.preventDefault() + slideshow() + document.getElementById('stop').style.display = 'inline-block' + document.getElementById('form').style.display = 'none' + document.getElementById('see-images').style.display = 'none' }) +const stop = () =>{ + document.getElementById('submit').style.display = 'inline' + document.getElementById('form').style.display = 'none' +document.getElementById('see-images').style.display = 'none' + document.getElementById('stop').style.display = 'none' + photos = [] +} + +document.getElementById('stop').addEventListener('click', () =>{ + stop() + + + +})