sei-ec-remote · infinitelyann · Sep 16, 2022 · Sep 18, 2022 · Sep 24, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git 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;
+}
diff --git a/index.html b/index.html
@@ -1,11 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
+
+  <link rel="stylesheet" type="text/css" href="css/styles.css" />
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hello Front-End</title>
 </head>
-<body>
-  <h1>Hello Front-End</h1>
+<body id="body">
+
+<main class="main-container">
+
+<div id="middle-container">
+  <div id="pics-container" > 
+  </div>
+  <button id='submit'>Submit Keyword</button>
+  <div id="button-container">
+
+      <form id="form">
+          <input id="search" type="text" placeholder="Search" >
+        </div>
+
+        <button id='see-images'>See SlideShow</button>
+
+      </form>
+
+
+      <button id="stop">Stop Slideshow</button>
+</div>
+
+
+
+</main>
+
+
+  <script src="js/app.js">
+  </script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,98 @@
+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'
+
+
+
+
+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`)
+    .then(res => res.json())
+    .then(jsonData => {
+         photos = jsonData.data.children.map(obj => {
+            return{
+                title: obj.data.title,
+                url: obj.data.thumbnail,
+                subreddit: obj.data.subreddit,
+                posthint: obj.data.post_hint
+            }
+            }).filter(obj =>{
+                return obj.posthint === 'image'
+            })
+            console.log(photos)
+        })
+
+
+
+
+    .catch(err => {
+        console.log('ERROR', err)
+       })   
+
+       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()
+
+
+
+})
+