From e379d37205801c5869060c829ea87a9c004a16ec Mon Sep 17 00:00:00 2001 From: lozier Date: Fri, 16 Sep 2022 08:55:06 -0400 Subject: [PATCH 1/2] created html skeleton, small amount of styling for clarity in css, got fetch request working in js, enabled submit button to populate new images, added two functions to prevent more than one image showing up at a time --- css/index.css | 22 ++++++++++++++++++++++ index.html | 21 +++++++++++++++++---- js/index.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 88 insertions(+), 4 deletions(-) create mode 100644 css/index.css create mode 100644 js/index.js diff --git a/css/index.css b/css/index.css new file mode 100644 index 00000000..26501710 --- /dev/null +++ b/css/index.css @@ -0,0 +1,22 @@ +body { + background-color: rosybrown; + + +} + +#slideshow { + display:flex; + flex-wrap:wrap; + border: black solid; + height: 500px; + +} + +#search { + padding: 10px 10px 10px 10px; +} +/* +img { + display: none; + width: 100% +} */ \ No newline at end of file diff --git a/index.html b/index.html index 695897ea..9d4230af 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,24 @@ + - - - Hello Front-End + + + + + + Slideshow -

Hello Front-End

+

Reddit Slideshow

+

Enter 1 word search to see pictures!

+
+ + +
+
+ +
+ diff --git a/js/index.js b/js/index.js new file mode 100644 index 00000000..d5613905 --- /dev/null +++ b/js/index.js @@ -0,0 +1,49 @@ +const form = document.querySelector('#search-form') +const slideShow = document.querySelector('#slideshow') + +let imageArray = [] +let imageCount = 0 + + +const showInitialImage = (responseArray) => { + let array = responseArray.data.children.map( data => data.data) + imageArray = array + + while(slideShow.firstChild) { + slideShow.removeChild(slideShow.firstChild) + } + if (imageCount != 0) { + imageCount = 0 + } + const picBox = document.createElement('img') + picBox.setAttribute('src', imageArray[imageCount].url) + slideShow.appendChild(picBox) + imageCount++ +} + + +const showNextImage = () => { + setInterval(showNextImage, 2000); + while(slideShow.firstChild) { + slideShow.removeChild(slideShow.firstChild) + } + + if (imageCount < imageArray.length) { + const picBox = document.createElement('img') + picBox.setAttribute('src', imageArray[imageCount].url) + slideShow.appendChild(picBox) + imageCount++ + } +} + +form.addEventListener('submit', event => { + + let userInput = document.getElementById('user-search').value + + event.preventDefault() + fetch(`https://www.reddit.com/search.json?q=${userInput}+nsfw:no+type:image`) + .then(res => res.json()) + .then(showInitialImage) + .catch(console.error) +}) + From cb82441d45a934231120433f14855fa06feeb0a5 Mon Sep 17 00:00:00 2001 From: lozier Date: Sat, 24 Sep 2022 17:57:25 -0400 Subject: [PATCH 2/2] added stop slideshow functionality, fixed broken slideshow rotater, added restrictictions to images so they stayed within slideshow box --- css/index.css | 10 ++++++---- index.html | 1 + js/index.js | 16 +++++++++++++--- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/css/index.css b/css/index.css index 26501710..e9872199 100644 --- a/css/index.css +++ b/css/index.css @@ -9,14 +9,16 @@ body { flex-wrap:wrap; border: black solid; height: 500px; + width: 500px; + } #search { padding: 10px 10px 10px 10px; } -/* + img { - display: none; - width: 100% -} */ \ No newline at end of file + max-width: 100%; + max-height: 100%; +} diff --git a/index.html b/index.html index 9d4230af..45122187 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@

Reddit Slideshow

+
diff --git a/js/index.js b/js/index.js index d5613905..fea20f97 100644 --- a/js/index.js +++ b/js/index.js @@ -1,9 +1,11 @@ -const form = document.querySelector('#search-form') -const slideShow = document.querySelector('#slideshow') +const form = document.getElementById('search-form') +const slideShow = document.getElementById('slideshow') +const stopButton = document.getElementById('stop-show') let imageArray = [] let imageCount = 0 +let startSlideShow const showInitialImage = (responseArray) => { let array = responseArray.data.children.map( data => data.data) @@ -19,11 +21,11 @@ const showInitialImage = (responseArray) => { picBox.setAttribute('src', imageArray[imageCount].url) slideShow.appendChild(picBox) imageCount++ + startSlideshow = setInterval(showNextImage, 2000) } const showNextImage = () => { - setInterval(showNextImage, 2000); while(slideShow.firstChild) { slideShow.removeChild(slideShow.firstChild) } @@ -36,6 +38,13 @@ const showNextImage = () => { } } +const stopSlideShow = () => { + imageArray = [] + clearInterval(startSlideShow) +} + +stopButton.addEventListener('click', stopSlideShow); + form.addEventListener('submit', event => { let userInput = document.getElementById('user-search').value @@ -47,3 +56,4 @@ form.addEventListener('submit', event => { .catch(console.error) }) +