diff --git a/index.html b/index.html index b1fca4b..f86e579 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,52 @@ - + - - - - + + + - - + + - + Javascript Events & Bootstrap - + - + -
-
- - - - - -
-
+
+ + + + + +
+
-

Stunning free images & royalty free stock

-
- - - - -
-
-
-
-
-
Orientation
-
-
- - -
-
- - -
-
- - -
-
-
-
-
Category
- -
-
-
Color
-
-
- - - - - - - - - - - - - -
- clean filters -
-
-
+
+

+ Stunning free images & royalty free stock +

+
+
+ + + + +
+
+
+
+
+
Orientation
+
+
+ + +
+
+ + +
+
+ +
+
+
+
Category
+ +
+
+
Color
+
+
+ + + + + + + + + + + + +
+ clean filters +
+
+
+
- -
+
+ +
- - - -
-
-
-
- +
+
+
+
+
-
-
-

Most popular

- -

More Filters

- Filter +
+
+

Most popular

+ + +

More Filters

+ Filter +
+
-
- - - - - - - -
-
-
-
Apply a filter
- + +
+
+
+
Apply a filter
+ +
+
+ +
    +
  • + +
    +
    -
-
- - - - +
+
+ + - - - - - - - - - - \ No newline at end of file + + + + + + + + + diff --git a/main.js b/main.js index 7ce1abb..dd013f6 100644 --- a/main.js +++ b/main.js @@ -1,83 +1,84 @@ //GLOBAL VARIABLES -let url = "https://pixabay.com/api/?key=26639219-c988cadef2f5d334da840ad52" -let auth = url +let url = "https://pixabay.com/api/?key=26639219-c988cadef2f5d334da840ad52"; +let auth = url; -//ASYNC FETCH +//ASYNC FETCH async function getData(url) { -const response = await fetch(url); - const data = await response.json(); - return data; - + // ! try catch block + const response = await fetch(url); + const data = await response.json(); + return data; } //FIRST LOAD TO SHOW THE GRID AND SIDEBAR async function handleInitialLoad() { - const data = await getData(url); + const data = await getData(url); - setState(data); - const userNames = getUserNames(getState()); - selectAuthorDOM(userNames); - const imageType = getImageType(getState()); - selectImageTypeDOM(imageType); + setState(data); + const userNames = getUserNames(getState()); + selectAuthorDOM(userNames); + const imageType = getImageType(getState()); + selectImageTypeDOM(imageType); - insertImagesDOM(getState()); - mostPopularItem(getState()); + insertImagesDOM(getState()); + mostPopularItem(getState()); } - - const imgContainer = document.querySelector("#api-data"); const selectAuthor = document.querySelector(".select-author"); const selectType = document.querySelector(".select-type"); -const launchModal = document.querySelector(".modal-content") +const launchModal = document.querySelector(".modal-content"); const input2 = document.getElementById("buscar"); - //EVENTLISTENERS window.addEventListener("DOMContentLoaded", handleInitialLoad); input2.addEventListener("keyup", handleEnter); selectAuthor.addEventListener("change", handleSelectAuthor); selectType.addEventListener("change", handleSelectType); - - //FUNCTION TO STORE "data" IN A LOCAL VARIABLE TO USE IT LATER +// ! GOOD! function useState() { -let _state = null; -function getState() {return _state;} -function setState(data) {_state = [...data.hits];} -return [getState, setState]; + let _state = null; + function getState() { + return _state; + } + function setState(data) { + _state = [...data.hits]; + } + return [getState, setState]; } const [getState, setState] = useState(); - - //TEMPLATE TO CREATE IMAGE GRID -function cardTemplate(data) { //create function that return the html - const { hits, id, user, likes, views, webformatURL, userImageURL } = data; - return ` +function cardTemplate(data) { + //create function that return the html + // ! if you destructure then use the elements directly + const { hits, id, user, likes, views, webformatURL, userImageURL } = data; + return `
- `; } - //TEMPLATE TO CREATE THE MODAL -function modalTemplate(data) { //create function that return the html - const { id, user, tags, webformatURL, userImageURL, } = data; - return ` +function modalTemplate(data) { + //create function that return the html + // ! same thing here, if you destructure use the destructured variables + const { id, user, tags, webformatURL, userImageURL } = data; + return ` `; } -} + }, 1500); + window.scrollTo({ top: 0, behavior: "smooth" }); +}; + +// const pagPrev = () => { +// if (currentPage === 0) { +// return; +// } else { +// currentPage--; +// searchImage(); +// } +// }; +// ! you could simply do it like that (same idea for pagNext()) +const pagPrev = () => { + if (currentPage !== 0) { + currentPage--; + searchImage(); + } +}; const pagNext = () => { - - if (currentPage>totalPages) { - return - } else { - currentPage++ - searchImage(); - } -} + if (currentPage > totalPages) { + return; + } else { + currentPage++; + searchImage(); + } +}; //FUNCTION TO SHOW POPUP ERROR FOR 2 SECONDS const mostrarError = (element, message) => { - divError = document.querySelector(element) - divError.innerHTML = `` - setTimeout(() => { divError.innerHTML = ``;}, 2000) -} \ No newline at end of file + divError = document.querySelector(element); + divError.innerHTML = ``; + setTimeout(() => { + divError.innerHTML = ``; + }, 2000); +};