diff --git a/css/index.css b/css/index.css
new file mode 100644
index 00000000..e9872199
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,24 @@
+body {
+ background-color: rosybrown;
+
+
+}
+
+#slideshow {
+ display:flex;
+ flex-wrap:wrap;
+ border: black solid;
+ height: 500px;
+ width: 500px;
+
+
+}
+
+#search {
+ padding: 10px 10px 10px 10px;
+}
+
+img {
+ max-width: 100%;
+ max-height: 100%;
+}
diff --git a/index.html b/index.html
index 695897ea..45122187 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,25 @@
+
-
-
- 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..fea20f97
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,59 @@
+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)
+ 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++
+ startSlideshow = setInterval(showNextImage, 2000)
+}
+
+
+const showNextImage = () => {
+ 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++
+ }
+}
+
+const stopSlideShow = () => {
+ imageArray = []
+ clearInterval(startSlideShow)
+}
+
+stopButton.addEventListener('click', stopSlideShow);
+
+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)
+})
+
+