From 6bad4ee76908e684453a0aecb797f8cfa9ce162a Mon Sep 17 00:00:00 2001 From: sheikdon Date: Thu, 15 Sep 2022 22:47:56 -0500 Subject: [PATCH 1/2] finished html --- index.css | 0 index.html | 29 ++++++++++++++++++++++++++--- index.js | 0 3 files changed, 26 insertions(+), 3 deletions(-) create mode 100644 index.css create mode 100644 index.js diff --git a/index.css b/index.css new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html index 695897ea..bac19b50 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,32 @@ - Hello Front-End + + + Abdiresac Sheikdon - -

Hello Front-End

+
+
+

Reddit Slideshow Generator

+

Welcome

+

Hit "Type here to start..." to see a Reddit API slideshow

+
+
+ +
+
+
+
+
+
+
+
+ +

You can click this stop button once the show begins if you decide to return to this form

+
+
diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b From 86706378932715620a42683b8db5b6e495b316c0 Mon Sep 17 00:00:00 2001 From: sheikdon Date: Sun, 25 Sep 2022 23:50:46 -0500 Subject: [PATCH 2/2] finish fetch and commited late --- .vscode/settings.json | 3 +++ index.css | 33 +++++++++++++++++++++++++++++++++ index.html | 34 ++++++++++++++-------------------- index.js | 30 ++++++++++++++++++++++++++++++ 4 files changed, 80 insertions(+), 20 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.css b/index.css index e69de29b..3dec0800 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,33 @@ +body { + text-align: center; + background: black; + color: lime; +} + +#searchtext{ + margin: 0 auto; + margin-top: 30vh; + display: flex; + flex-direction: column; + width: 200px; +} + +div { + margin: 50px auto; + height: 400px; + width: 400px; +} + +#img-div > img { + height: 400px; + width: 400px; + object-fit: cover; +} + +#stop{ + margin: 0 auto; + display: flex; + flex-direction: column; + width: 105px; + justify-content: center; +} \ No newline at end of file diff --git a/index.html b/index.html index bac19b50..ac246c7d 100644 --- a/index.html +++ b/index.html @@ -7,28 +7,22 @@ Abdiresac Sheikdon -
-
+

Reddit Slideshow Generator

-

Welcome

-

Hit "Type here to start..." to see a Reddit API slideshow

-
-
- -
-
-
-
-
-
+ + +
+
- -

You can click this stop button once the show begins if you decide to return to this form

+
-
- - + + + \ No newline at end of file diff --git a/index.js b/index.js index e69de29b..7a12a500 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,30 @@ +document.addEventListener('DOMContentLoaded', ()=>{ + const form = document.querySelector('form') + const searchBar = document.getElementById('search-button') + const img = document.querySelector('img') + const imgArr = [] + let arrIndex = 0 + + form.addEventListener('submit', e=>{ + e.preventDefault() + const redditUrl = `https://www.reddit.com/search.json?q=${searchBar.value}+nsfw:no` + fetch(redditUrl) + .then(redditData =>{ + return redditData.json() + }) + .then(redditJson=>{ + redditJson.data.children.forEach(result=>{ + if(result.data.thumbnail != "self"){ + imgArr.push(result.data.thumbnail) + } + }) + setInterval(()=>{ + arrIndex += 1 + if(arrIndex <= imgArr.length -1){ + img.src = `${imgArr[arrIndex]}` + } else {arrIndex = 0} + }, 2000) + + }) + }) +}) \ No newline at end of file