diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 00000000..fcba306b --- /dev/null +++ b/css/styles.css @@ -0,0 +1,55 @@ +body { + display: flex; + flex-direction: column; + background-color: grey; + justify-content: center; +} +.container { + display: flex; + justify-content: center; + height: 25rem; +} + +.presearch { + display: flex; + flex-direction: column; + justify-content: center; + +} + +.text { + display: flex; + flex-direction: column; + align-items: center; +} + +.search { + display: flex; + align-items: center; + justify-items: center; + padding: 0; +} + + +label { + display: none; + border: 2px solid red; +} +input { + width: 30rem; + height: 1.6rem; + text-align: center; +} + +.searchButton { + height: 2rem; + width: 8rem; + align-items: center; + margin: 0 +} + +.resetButton { + height: 2rem; + width: 4rem; + align-self: center; +} \ No newline at end of file diff --git a/index.html b/index.html index 695897ea..df9b8591 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,26 @@ + + Hello Front-End -

Hello Front-End

+
+
+
+

Reddit Image Crawler

+

Enter a search tearn and view images found on reddit related to your search

+
+ +
+
+ diff --git a/js/scripts.js b/js/scripts.js new file mode 100644 index 00000000..e3028629 --- /dev/null +++ b/js/scripts.js @@ -0,0 +1,53 @@ + +const input = document.querySelector('#input') +console.log(input) +const reset = document.querySelector('#reset') +console.log(reset) +const search = document.querySelector('#searchBTN') +console.log(search) +const presearch = document.querySelector('#preSearch') +console.log(presearch) +const imageContainer = document.querySelector('#imageContainer') +console.log(imageContainer) + + +search.addEventListener('click', function(e){ + e.preventDefault() + console.log(input.value) + presearch.style.display = "none" + fetch(`https://www.reddit.com/search.json?q=${input.value}+nsfw:no`) + .then(function(returnedData) { + return returnedData.json() + }) + .then(function(data){ + let imageArray = data.data.children.map(child => child.data.url) + console.log(imageArray) + let images = document.createElement('img') + imageContainer.appendChild(images) + let interval = 0 + let timer = setInterval(function(){ + images.src = imageArray[interval] + interval++ + }, 2000) + console.log(interval) + console.log(images.src) + images.src= imageArray[interval] + images.style.width = "600px" + images.style.objectFit = 'cover' + reset.addEventListener('click', function(){ + clearInterval(timer) + presearch.style.display = "block" + imageContainer.removeChild(images) + input.value ='' + }) + }) + .catch(console.warn) +}) + + + + + +//have in the setInterval have something to track the an integer and it increases the index 1 and it will increase + +// src \ No newline at end of file