From 4c8c3a42ac80d78d5396232db53f545e4361cec7 Mon Sep 17 00:00:00 2001
From: OttaviaFeletig <ottafel@hotmail.it>
Date: Wed, 11 May 2022 17:10:57 +0200
Subject: [PATCH 1/2] Ottavia and Raul review

---
 main.js | 524 ++++++++++++++++++++++++++++++--------------------------
 1 file changed, 281 insertions(+), 243 deletions(-)

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 `
     <div class="col-xs-4 col-sm-6 col-md-6 col-lg-6 col-xl-4 col-xxl-4 mb-4">
-        <div class="card" id="${data.id}">
+        <div class="card" id="${id}">
             <a id="img-link" 
             href="#exampleModal" 
             data-bs-toggle="modal" 
             data-bs-target="#exampleModal"
-            onclick="insertModalDOM(getState(), ${data.id})">
-                <span class="badge rounded-pill bg-dark views"><i class="fa fa-eye"> </i> ${data.views}</span>
-                <span class="badge rounded-pill bg-dark likes"><i class="fa fa-heart"> </i> ${data.likes}</span>
-                <img class="card-img-top" src="${data.webformatURL}" alt="${data.user}">
+            onclick="insertModalDOM(getState(), ${id})">
+                <span class="badge rounded-pill bg-dark views"><i class="fa fa-eye"> </i> ${views}</span>
+                <span class="badge rounded-pill bg-dark likes"><i class="fa fa-heart"> </i> ${likes}</span>
+                <img class="card-img-top" src="${webformatURL}" alt="${user}">
                 <div class="overlay"><i class="fa fa-plus"></i></div>
             </a>
         </div>
     </div>`;
 }
 
-
 //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 `
         <div id="myModalContent" class="modal-header"><img src="${data.userImageURL}">
             <h5>${data.user}</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
@@ -97,9 +98,10 @@ function modalTemplate(data) { //create function that return the html
 }
 
 //TEMPLATE FOR MY RIGHTSIDEB BAR
-function rightbarTemplate(data) { //create function that return the html
-    const { id, user, tags, webformatURL, userImageURL } = data;
-    return `
+function rightbarTemplate(data) {
+  //create function that return the html
+  const { id, user, tags, webformatURL, userImageURL } = data;
+  return `
     <li class="list-group-item d-flex">
             <a id="img-link" 
             href="#exampleModal" 
@@ -114,27 +116,29 @@ function rightbarTemplate(data) { //create function that return the html
     </li>`;
 }
 
-
 //FUNCTION TO INJECT THE IMAGES INTO THE DOM
 function insertImagesDOM(data) {
-    let images = data.filter((item, index) => index < 5).map((item) => cardTemplate(item)).join('');
-    // console.log(images);
-    imgContainer.innerHTML = `<div class="mySpinner"><div></div><div></div></div>`
-    setTimeout(() => {
-        imgContainer.innerHTML = images
-    }, 1500)
+  let images = data
+    .filter((item, index) => index < 5)
+    .map((item) => cardTemplate(item))
+    .join("");
+  // console.log(images);
+  imgContainer.innerHTML = `<div class="mySpinner"><div></div><div></div></div>`;
+  setTimeout(() => {
+    imgContainer.innerHTML = images;
+  }, 1500);
 }
 
 //FUNCTION TO INJECT MODAL INTO THE DOM
 function insertModalDOM(data, e) {
-    let imageId = e;
-    // console.log(imageId);
-    data.forEach((item) => {
-        if (item.id === imageId) {
-            let images = modalTemplate(item)
-            launchModal.innerHTML = images;
-        } 
-    });
+  let imageId = e;
+  // console.log(imageId);
+  data.forEach((item) => {
+    if (item.id === imageId) {
+      let images = modalTemplate(item);
+      launchModal.innerHTML = images;
+    }
+  });
 }
 
 // function handleSearchInputChange(e) {
@@ -144,244 +148,278 @@ function insertModalDOM(data, e) {
 //     insertImagesDOM(filteredItems);
 // }
 
-function handleEnter(e) { 
-    if (e.key === "Enter") {
+function handleEnter(e) {
+  if (e.key === "Enter") {
     searchImage();
-    }
+  }
 }
 
-
-
-// GET AUTHOR NAMES 
+// GET AUTHOR NAMES
 function getUserNames(data) {
-    const authors = data.map((item) => item.user);
-    const uniqAuthor = [...new Set(authors)];
-    return uniqAuthor;
+  const authors = data.map((item) => item.user);
+  const uniqAuthor = [...new Set(authors)];
+  return uniqAuthor;
 }
 
 //FUNCTION TO LOOP "data" AND TO INJECT THE AUTHOR NAMES INTO THE DOM
 function selectAuthorDOM(data) {
-    let author = ['<option selected value="all">All Authors</option>'];
-    data.forEach((item) => {
-        author.push(`<option value="${item}">${item}</option>`);
-    });
-    selectAuthor.innerHTML = author.join('');
+  let author = ['<option selected value="all">All Authors</option>'];
+  data.forEach((item) => {
+    author.push(`<option value="${item}">${item}</option>`);
+  });
+  selectAuthor.innerHTML = author.join("");
 }
 
 //FUNCTOIN ATTACHED TO A EVENTLISTENER TO FILTER THE SELECTION WITH THE ITEMS STORED IN "data"
 function handleSelectAuthor(e) {
-const value = e.currentTarget.value.toLowerCase();
-const data = getState();
-    const filteredItems = data.filter((item) => value.toLowerCase() === 'all' ? item : item.user.toLowerCase() === value.toLowerCase()
-    );
-    insertImagesDOM(filteredItems);
+  const value = e.currentTarget.value.toLowerCase();
+  const data = getState();
+  const filteredItems = data.filter((item) =>
+    value.toLowerCase() === "all"
+      ? item
+      : item.user.toLowerCase() === value.toLowerCase()
+  );
+  insertImagesDOM(filteredItems);
 }
 
-
 //GET IMAGE TYPE NAMES
 function getImageType(data) {
-    const types = data.map((item) => item.type);
-    const uniqTypes = [...new Set(types)];
-    return uniqTypes;
+  const types = data.map((item) => item.type);
+  const uniqTypes = [...new Set(types)];
+  return uniqTypes;
 }
 
 //FUNCTION TO LOOP "data" AND TOINJECT THE IMAGE TYPE NAMES INTO THE DOM
 function selectImageTypeDOM(data) {
-    let imageType = ['<option selected value="all">All Types</option>'];
-    data.forEach((item) => {
-        imageType.push(`<option value="${item}">${item}</option>`);
-    });
-    selectType.innerHTML = imageType.join('');
+  let imageType = ['<option selected value="all">All Types</option>'];
+  data.forEach((item) => {
+    imageType.push(`<option value="${item}">${item}</option>`);
+  });
+  selectType.innerHTML = imageType.join("");
 }
 
 //FUNCTION ATTACHED TO A EVENTLISTENER TO FILTER THE SELECTION WITH THE ITEMS STORED IN "data"
 function handleSelectType(e) {
-const value = e.currentTarget.value.toLowerCase(); 
-const data = getState();
-const filteredItems = data.filter((item) => value.toLowerCase() === 'all'? item: item.type.toLowerCase() === value.toLowerCase()
-);
-insertImagesDOM(filteredItems);
+  const value = e.currentTarget.value.toLowerCase();
+  const data = getState();
+  const filteredItems = data.filter(
+    (item) =>
+      //   ! you can write it like this (same for select author filter)
+      value.toLowerCase() === "all" ||
+      item.type.toLowerCase() === value.toLowerCase()
+    // value.toLowerCase() === "all"
+    //   ? item
+    //   : item.type.toLowerCase() === value.toLowerCase()
+  );
+  insertImagesDOM(filteredItems);
 }
 
-
 //FUNCTION TO DETECT WHICH RADIO WAS SELECTED AND RETURNING THE RESULT OF THE SELECTION
 function radioOrientacion() {
-    let numOrientations = document.getElementsByName('flexRadioDefault');
-    let result = "all";
-    for (let i = 0; i < numOrientations.length; i++) {
-        result = document.querySelector('input[name="flexRadioDefault"]:checked').value  
-    }
-    // console.log(result);
-    return result
+  let numOrientations = document.getElementsByName("flexRadioDefault");
+  let result = "all";
+  for (let i = 0; i < numOrientations.length; i++) {
+    result = document.querySelector(
+      'input[name="flexRadioDefault"]:checked'
+    ).value;
+  }
+  // console.log(result);
+  return result;
 }
 
-
 //FUNCTION TO DETECT WHICH RADIO WAS SELECTED AND RETURNING THE RESULT OF THE SELECTION
 function checkColor() {
-    let colorSelected = document.getElementsByName('color');
-    let checked = []
-    for (let i = 0; i < colorSelected.length; i++) {
-        if (colorSelected[i].checked) {
-            checked.push(colorSelected[i].value)
-        }
-        var checkedColors = checked.join(',')   
+  let colorSelected = document.getElementsByName("color");
+  let checked = [];
+  for (let i = 0; i < colorSelected.length; i++) {
+    if (colorSelected[i].checked) {
+      checked.push(colorSelected[i].value);
     }
-    return checkedColors
+    var checkedColors = checked.join(",");
+  }
+  return checkedColors;
 }
 
 //FUNCTION TO ADD A CLASS IN THE SELECTED COLOR
+// ! why do you show clean filter only when selecting a color?
 function checkLabel() {
-    let colorSelected = document.getElementsByName('color')
-    let label = document.getElementsByClassName('color-select')
-    let filter = document.getElementById("clean-filter")
-    filter.style.opacity = "1";
-    for (let i = 0; i < colorSelected.length; i++) {
-        if (colorSelected[i].checked == true) {
-            label[i].classList.add("checked")
-            colorSelected[i].classList.add("checked")
-        } else {
-            label[i].classList.remove("checked")
-            colorSelected[i].classList.add("checked")
-        }
+  let colorSelected = document.getElementsByName("color");
+  let label = document.getElementsByClassName("color-select");
+  let filter = document.getElementById("clean-filter");
+  filter.style.opacity = "1";
+  for (let i = 0; i < colorSelected.length; i++) {
+    if (colorSelected[i].checked == true) {
+      label[i].classList.add("checked");
+      colorSelected[i].classList.add("checked");
+    } else {
+      label[i].classList.remove("checked");
+      colorSelected[i].classList.add("checked");
     }
+  }
 }
 
-
-//FUNCTION TO 
+//FUNCTION TO
 let mostPopularItem = async () => {
-    let mostPopularTable = document.querySelector("#popular-list")
-    let imagesPerPages = 20
-    let query = `&per_page=${imagesPerPages}`
-    let url = (auth + query)
-    console.log(url)
-
-    let response = await fetch(url)
-    let data = await response.json()
-    setState(data)
-    let images = getState()
-
-    images.sort((a,b)=> (a.likes < b.likes ? 1 : -1))
-    let likes = images.filter((item, idx) => idx < 20).map((item) => rightbarTemplate(item)).join('');
-    mostPopularTable.innerHTML = likes;
-}
-
-
-const refreshPage =  () => {
-    window.location.reload();
-}
-
-
-
-let currentPage = 1
-let totalPages = 0
-let copyInput = ""
-let copyValueTypeImage = ""
-let copyValueOrientation = ""
-let copyValueCategory = ""
-let copyValueColor = ""
+  let mostPopularTable = document.querySelector("#popular-list");
+  let imagesPerPages = 100;
+
+  // ! here you could have divided the function into 2 functions: one to get the data from fetch, one to build the cards.
+  // ! it doesn't make too much sense to first use setState() and then getState() if you are always in the same function
+  let query = `&per_page=${imagesPerPages}`;
+  let url = auth + query;
+  console.log(url);
+  // ! try catch block
+  let response = await fetch(url);
+  let data = await response.json();
+
+  setState(data);
+
+  let images = getState();
+
+  images.sort((a, b) => (a.likes < b.likes ? 1 : -1));
+  let likes = images
+    .filter((item, idx) => idx < 3)
+    .map((item) => rightbarTemplate(item))
+    .join("");
+  mostPopularTable.innerHTML = likes;
+};
+
+const refreshPage = () => {
+  window.location.reload();
+};
+
+let currentPage = 1;
+let totalPages = 0;
+let copyInput = "";
+let copyValueTypeImage = "";
+let copyValueOrientation = "";
+let copyValueCategory = "";
+let copyValueColor = "";
 
 //FUNCTION TO DISPLAY IMAGES BASED ON A SEARCH TERM AND ALASO SOME FILTERS
+// ! very long and complex function, maybe you could simplify it
 let searchImage = async () => {
-    let input = document.querySelector("#buscar").value
-    let valueTypeImage = document.querySelector("#imageType").value
-    let valueOrientation = document.querySelector('input[name="flexRadioDefault"]:checked').value
-    let valueCategory = document.querySelector("#imgCategory").value
-    let divPagination = document.querySelector("#pagination")
-    divPagination.style.display = "none"
-    let inputWithSpaces = input.replace(/ /g, '+');
-    
-    if (input === "") {
-        mostrarError("#msg-error", "Please, type a searh term")
-        return;
-    }
-    
-    //SOME CONDITIONS TO GENERATE THE DEFAULT URL OR TO POPULATE IT BY TAKING VALUES FROM THE FORM
-    if (input != copyInput || valueTypeImage != copyValueTypeImage || valueOrientation != copyValueOrientation || valueCategory != copyValueCategory) {
-        currentPage = 1 
-    }
-    
-
-    let orienta = radioOrientacion()
-    let color = checkColor()
-    let imgType = document.querySelector("#imageType").value
-    let imgCategory = document.querySelector("#imgCategory").value
-    let imagesPerPage = 6
-    let query = `&q=${inputWithSpaces}&colors=${color}&image_type=${imgType}&category=${imgCategory}&orientation=${orienta}&per_page=${imagesPerPage}&page=${currentPage}`
-    let url = (auth + query)
-
-    let response = await fetch(url)
-    let data = await response.json();
-    setState(data)
-    
-
-    const images = getState();
-    getUserNames(images)
-    let imagesHTML = images.filter((item, index) => index < 9).map((item) => cardTemplate(item)).join('');
-
-    const userNames = getUserNames(getState());
-    selectAuthorDOM(userNames);
-    const imageType = getImageType(getState());
-    selectImageTypeDOM(imageType);
-
-    divImgList = document.getElementById("api-data")
-    divImgList.innerHTML = `<div class="mySpinner"><div></div><div></div></div>`
-
-        
-    totalPages = Math.ceil(data.totalHits / imagesPerPage)
-    console.log("total: " + totalPages);
-    console.log(url);
-
-    let pagPrev = (currentPage === 1)?`<li class="page-item disabled"><a class="page-link" href="#prev" onclick="pagPrev()"><< Prev</a></li>`:`<li class="page-item"><a class="page-link" href="#prev" onclick="pagPrev()"><< Prev</a></li>`
-
-    let pagNext = (currentPage === totalPages)?`<li class="page-item disabled"><a class="page-link" href="#prev" onclick="pagNext()">Next >></a></li>`:`<li class="page-item"><a class="page-link" href="#prev" onclick="pagNext()">Next >></a></li>`
-
-    copyInput = input
-    copyValueTypeImage = valueTypeImage
-    copyValueOrientation = valueOrientation
-    copyValueCategory = valueCategory
-
-    setTimeout(() => {
-        divImgList.innerHTML = imagesHTML
-        divPagination.style.display = "flex"
-        if (images.length != 0) {
-            divPagination.innerHTML = `${pagPrev} ${pagNext}`
-        } else {
-        mostrarError("#msg-error", "No items for this search")
-            divPagination.innerHTML = `   
+  // ! ¡no entiendo español!
+  let input = document.querySelector("#buscar").value;
+  let valueTypeImage = document.querySelector("#imageType").value;
+  let valueOrientation = document.querySelector(
+    'input[name="flexRadioDefault"]:checked'
+  ).value;
+  let valueCategory = document.querySelector("#imgCategory").value;
+  let divPagination = document.querySelector("#pagination");
+  divPagination.style.display = "none";
+  let inputWithSpaces = input.replace(/ /g, "+");
+
+  if (input === "") {
+    mostrarError("#msg-error", "Please, type a searh term");
+    return;
+  }
+
+  //SOME CONDITIONS TO GENERATE THE DEFAULT URL OR TO POPULATE IT BY TAKING VALUES FROM THE FORM
+  if (
+    input != copyInput ||
+    valueTypeImage != copyValueTypeImage ||
+    valueOrientation != copyValueOrientation ||
+    valueCategory != copyValueCategory
+  ) {
+    currentPage = 1;
+  }
+
+  let orienta = radioOrientacion();
+  let color = checkColor();
+  let imgType = document.querySelector("#imageType").value;
+  let imgCategory = document.querySelector("#imgCategory").value;
+  let imagesPerPage = 6;
+  let query = `&q=${inputWithSpaces}&colors=${color}&image_type=${imgType}&category=${imgCategory}&orientation=${orienta}&per_page=${imagesPerPage}&page=${currentPage}`;
+  let url = auth + query;
+  // ! try catch and separate this function is too long
+  let response = await fetch(url);
+  let data = await response.json();
+  setState(data);
+
+  const images = getState();
+  getUserNames(images);
+  let imagesHTML = images
+    .filter((item, index) => index < 9)
+    .map((item) => cardTemplate(item))
+    .join("");
+
+  const userNames = getUserNames(getState());
+  selectAuthorDOM(userNames);
+  const imageType = getImageType(getState());
+  selectImageTypeDOM(imageType);
+
+  divImgList = document.getElementById("api-data");
+  divImgList.innerHTML = `<div class="mySpinner"><div></div><div></div></div>`;
+
+  totalPages = Math.ceil(data.totalHits / imagesPerPage);
+  console.log("total: " + totalPages);
+  console.log(url);
+
+  let pagPrev =
+    currentPage === 1
+      ? `<li class="page-item disabled"><a class="page-link" href="#prev" onclick="pagPrev()"><< Prev</a></li>`
+      : `<li class="page-item"><a class="page-link" href="#prev" onclick="pagPrev()"><< Prev</a></li>`;
+
+  let pagNext =
+    currentPage === totalPages
+      ? `<li class="page-item disabled"><a class="page-link" href="#prev" onclick="pagNext()">Next >></a></li>`
+      : `<li class="page-item"><a class="page-link" href="#prev" onclick="pagNext()">Next >></a></li>`;
+
+  copyInput = input;
+  copyValueTypeImage = valueTypeImage;
+  copyValueOrientation = valueOrientation;
+  copyValueCategory = valueCategory;
+
+  setTimeout(() => {
+    divImgList.innerHTML = imagesHTML;
+    divPagination.style.display = "flex";
+    if (images.length != 0) {
+      divPagination.innerHTML = `${pagPrev} ${pagNext}`;
+    } else {
+      mostrarError("#msg-error", "No items for this search");
+      divPagination.innerHTML = `   
             <div class="container col-xs-1 col-sm-12 mb-4 mt-4">             
                 <div class="d-flex flex-column align-self-center mb-5">
                     <img src="./img/no-items.jpg" alt="No Items" width="426px" class="align-self-center">
                     <h1 class="text-center">No items found</h1>
                     <h3 class="text-center">Please, try to use a different search term</h3>
                 </div>
-            </div>`
-        }
-    }, 1500)
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-}
-
-const pagPrev = () => {
-    
-    if (currentPage === 0) {
-        return
-    } else {
-        currentPage--;
-        searchImage();
+            </div>`;
     }
-}
+  }, 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 = `<div class="alert alert-danger d-flex justify-content-center mt-4 w-50" role="alert">${message}</div>`
-    setTimeout(() => { divError.innerHTML = ``;}, 2000)
-}
\ No newline at end of file
+  divError = document.querySelector(element);
+  divError.innerHTML = `<div class="alert alert-danger d-flex justify-content-center mt-4 w-50" role="alert">${message}</div>`;
+  setTimeout(() => {
+    divError.innerHTML = ``;
+  }, 2000);
+};

From 42af211fbaf341a952668b90dea3ec4cb3a8ef0b Mon Sep 17 00:00:00 2001
From: OttaviaFeletig <ottafel@hotmail.it>
Date: Wed, 11 May 2022 17:11:14 +0200
Subject: [PATCH 2/2] Raul and Ottavia review

---
 index.html | 601 ++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 386 insertions(+), 215 deletions(-)

diff --git a/index.html b/index.html
index b1fca4b..f86e579 100644
--- a/index.html
+++ b/index.html
@@ -1,34 +1,52 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <link rel="stylesheet" href="styles.css">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="styles.css" />
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
 
     <title>Javascript Events & Bootstrap</title>
-</head>
+  </head>
 
-<body>
+  <body>
     <!-- NAV BAR MENU  -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <div class="container">
-            <a class="navbar-brand" href="#"><img src="./img/afm.png" alt="afm:berlin" width="50" height="50"></a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link active" aria-current="page" href="./index.html">Home</a>
-                    </li>
-                    <!-- <li class="nav-item">
+      <div class="container">
+        <a class="navbar-brand" href="#"
+          ><img src="./img/afm.png" alt="afm:berlin" width="50" height="50"
+        /></a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="./index.html"
+                >Home</a
+              >
+            </li>
+            <!-- <li class="nav-item">
                         <a class="nav-link" href="./data.html">Data API</a>
                     </li>
                     </li>
@@ -49,224 +67,377 @@
                             <li><a class="dropdown-item" href="#">Something else here</a></li>
                         </ul>
                     </li> -->
-                </ul>
-                <!-- <form class="d-flex">
+          </ul>
+          <!-- <form class="d-flex">
                     <input class="form-control form-control-sm me-2" type="search" placeholder="Search"
                         aria-label="Search">
                     <button class="btn btn-outline-light btn-sm" type="submit">Search</button>
                 </form> -->
-            </div>
         </div>
+      </div>
     </nav>
     <!-- END NAV BAR MENU  -->
 
-
     <!-- TOP CONTENT SEARCH BAR -->
     <div class="container-fluid search-container">
-        <div class="home-top-bg">
-            <picture>
-                <source srcset="https://cdn.pixabay.com/index/2022/04/25/12-08-59-434_1920x550.jpg" media="(min-width: 1440px)">
-                <source srcset="https://cdn.pixabay.com/index/2022/04/25/12-08-59-434_1920x550.jpg" media="(max-width: 640px)">
-                <img src="https://cdn.pixabay.com/index/2022/04/25/12-08-59-434_1920x550.jpg">
-            </picture>
-        </div>
-        <div class="home-top-bg-overlay"></div>
+      <div class="home-top-bg">
+        <picture>
+          <source
+            srcset="
+              https://cdn.pixabay.com/index/2022/04/25/12-08-59-434_1920x550.jpg
+            "
+            media="(min-width: 1440px)"
+          />
+          <source
+            srcset="
+              https://cdn.pixabay.com/index/2022/04/25/12-08-59-434_1920x550.jpg
+            "
+            media="(max-width: 640px)"
+          />
+          <img
+            src="https://cdn.pixabay.com/index/2022/04/25/12-08-59-434_1920x550.jpg"
+          />
+        </picture>
+      </div>
+      <div class="home-top-bg-overlay"></div>
 
-        <div class="container title"><h1 class="text-center m-5">Stunning free images & royalty free stock</h1></div>
-        <div class="input-group top-search" style="margin: 0 auto">
-            <select id="imageType" class="form-select" aria-label="Image Type">
-                <option value="all" selected>All</option>
-                <option value="photo">Photo</option>
-                <option value="illustration">Illustration</option>
-                <option value="vector">Vector</option>
-            </select>
-            <input id="buscar" class="form-control form-control-sm" type="search" placeholder="Search" aria-label="Search" keypress="searchImage()">
-            <button id="mybutton" class="btn btn-primary" type="button" onclick="searchImage()">Go</button>
-            <a class="btn btn-outline-light ms-1" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false"
-                aria-controls="collapseExample">
-                +
-            </a>
-            <div class="collapse" id="collapseExample">
-                <div class="card card-body">
-                    <div class="container">
-                        <div class="row">
-                            <div class="col">
-                                <h6>Orientation</h6>
-                                <form name="imgOrientation" id="imgOrientation">
-                                <div class="form-check">
-                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault0" value="all" checked>
-                                    <label class="form-check-label" for="flexRadioDefault0">
-                                        All
-                                    </label>
-                                </div>
-                                <div class="form-check">
-                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" value="horizontal">
-                                    <label class="form-check-label" for="flexRadioDefault1">
-                                        Horizontal
-                                    </label>
-                                </div>
-                                <div class="form-check">
-                                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" value="vertical">
-                                    <label class="form-check-label" for="flexRadioDefault2">
-                                        Vertical
-                                    </label>
-                                </div>
-                                </form>
-                            </div>
-                            <div class="col">
-                                <h6>Category</h6>
-                                <select id="imgCategory" class="form-select" aria-label="Image Type">
-                                    <option value="all" selected>All</option>
-                                    <option value="animals">Animals</option>
-                                    <option value="backgrounds">Backgrounds</option>
-                                    <option value="fashion">Fashion</option>
-                                    <option value="nature">Nature</option>
-                                    <option value="science">Science</option>
-                                    <option value="education">Education</option>
-                                    <option value="feelings">Feelings</option>
-                                    <option value="health">Health</option>
-                                    <option value="people">People</option>
-                                </select>
-                            </div>
-                            <div class="col">
-                                <h6>Color</h6>
-                                <div class="color-form">
-                                        <div class="grid-colors">
-                                            <label class="color-select reset">
-                                                X
-                                                <input type="radio" name="color" value="all" onclick="checkLabel();searchImage()" checked="checked">
-                                            </label>
-                                            <label class="color-select red">
-                                                <input type="radio" name="color" value="red" onclick="checkLabel();searchImage()" >
-                                            </label>
-                                            <label class="color-select orange">
-                                                <input type="radio" name="color" value="orange" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select yellow">
-                                                <input type="radio" name="color" value="yellow" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select green">
-                                                <input type="radio" name="color" value="green" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select turquoise">
-                                                <input type="radio" name="color" value="turquoise" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select blue">
-                                                <input type="radio" name="color" value="blue" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select lilac">
-                                                <input type="radio" name="color" value="lilac" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select pink">
-                                                <input type="radio" name="color" value="pink" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select grey">
-                                                <input type="radio" name="color" value="gray" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select black">
-                                                <input type="radio" name="color" value="black" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            <label class="color-select brown">
-                                                <input type="radio" name="color" value="brown" onclick="checkLabel();searchImage()">
-                                            </label>
-                                            
-                                        </div>
-                                        <a id="clean-filter" href="#" onclick="refreshPage()">clean filters</a> 
-                                </div>
-                            </div>
-                        </div>
+      <div class="container title">
+        <h1 class="text-center m-5">
+          Stunning free images & royalty free stock
+        </h1>
+      </div>
+      <div class="input-group top-search" style="margin: 0 auto">
+        <select id="imageType" class="form-select" aria-label="Image Type">
+          <option value="all" selected>All</option>
+          <option value="photo">Photo</option>
+          <option value="illustration">Illustration</option>
+          <option value="vector">Vector</option>
+        </select>
+        <input
+          id="buscar"
+          class="form-control form-control-sm"
+          type="search"
+          placeholder="Search"
+          aria-label="Search"
+          keypress="searchImage()"
+        />
+        <button
+          id="mybutton"
+          class="btn btn-primary"
+          type="button"
+          onclick="searchImage()"
+        >
+          Go
+        </button>
+        <a
+          class="btn btn-outline-light ms-1"
+          data-bs-toggle="collapse"
+          href="#collapseExample"
+          role="button"
+          aria-expanded="false"
+          aria-controls="collapseExample"
+        >
+          +
+        </a>
+        <div class="collapse" id="collapseExample">
+          <div class="card card-body">
+            <div class="container">
+              <div class="row">
+                <div class="col">
+                  <h6>Orientation</h6>
+                  <form name="imgOrientation" id="imgOrientation">
+                    <div class="form-check">
+                      <input
+                        class="form-check-input"
+                        type="radio"
+                        name="flexRadioDefault"
+                        id="flexRadioDefault0"
+                        value="all"
+                        checked
+                      />
+                      <label class="form-check-label" for="flexRadioDefault0">
+                        All
+                      </label>
+                    </div>
+                    <div class="form-check">
+                      <input
+                        class="form-check-input"
+                        type="radio"
+                        name="flexRadioDefault"
+                        id="flexRadioDefault1"
+                        value="horizontal"
+                      />
+                      <label class="form-check-label" for="flexRadioDefault1">
+                        Horizontal
+                      </label>
+                    </div>
+                    <div class="form-check">
+                      <input
+                        class="form-check-input"
+                        type="radio"
+                        name="flexRadioDefault"
+                        id="flexRadioDefault2"
+                        value="vertical"
+                      />
+                      <label class="form-check-label" for="flexRadioDefault2">
+                        Vertical
+                      </label>
                     </div>
+                  </form>
                 </div>
+                <div class="col">
+                  <h6>Category</h6>
+                  <select
+                    id="imgCategory"
+                    class="form-select"
+                    aria-label="Image Type"
+                  >
+                    <option value="all" selected>All</option>
+                    <option value="animals">Animals</option>
+                    <option value="backgrounds">Backgrounds</option>
+                    <option value="fashion">Fashion</option>
+                    <option value="nature">Nature</option>
+                    <option value="science">Science</option>
+                    <option value="education">Education</option>
+                    <option value="feelings">Feelings</option>
+                    <option value="health">Health</option>
+                    <option value="people">People</option>
+                  </select>
+                </div>
+                <div class="col">
+                  <h6>Color</h6>
+                  <div class="color-form">
+                    <div class="grid-colors">
+                      <label class="color-select reset">
+                        X
+                        <input
+                          type="radio"
+                          name="color"
+                          value="all"
+                          onclick="checkLabel();searchImage()"
+                          checked="checked"
+                        />
+                      </label>
+                      <label class="color-select red">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="red"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select orange">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="orange"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select yellow">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="yellow"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select green">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="green"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select turquoise">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="turquoise"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select blue">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="blue"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select lilac">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="lilac"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select pink">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="pink"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select grey">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="gray"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select black">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="black"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                      <label class="color-select brown">
+                        <input
+                          type="radio"
+                          name="color"
+                          value="brown"
+                          onclick="checkLabel();searchImage()"
+                        />
+                      </label>
+                    </div>
+                    <a id="clean-filter" href="#" onclick="refreshPage()"
+                      >clean filters</a
+                    >
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
         </div>
-        <!-- ERROR -->
-        <div class="error d-flex justify-content-center" id="msg-error"></div>
+      </div>
+      <!-- ERROR -->
+      <div class="error d-flex justify-content-center" id="msg-error"></div>
     </div>
 
-
-
-
-<div class="container-md">
-    <div class="row">
-        <div class="col-xs-1 col-sm-6 col-md-7 col-lg-8 col-xl-9 col-xxl-9 mb-4 mt-4">
-            <div id="api-data" class="row fade-in-image"></div>
-            <nav>
-                <ul class="pagination justify-content-center" id="pagination"></ul>
-            </nav>
+    <div class="container-md">
+      <div class="row">
+        <div
+          class="col-xs-1 col-sm-6 col-md-7 col-lg-8 col-xl-9 col-xxl-9 mb-4 mt-4"
+        >
+          <div id="api-data" class="row fade-in-image"></div>
+          <nav>
+            <ul class="pagination justify-content-center" id="pagination"></ul>
+          </nav>
         </div>
-        <div class="col-xs-1 col-sm-6 col-md-5 col-lg-4 col-xl-3 col-xxl-3 mt-4">
-            <div class="is-sticky fade-in-image">
-                <h4>Most popular</h4>
-                <div id="popular" class="is-sticky">
-                    <ul class="list-group list-group-flush" id="popular-list">
-                    </ul>
-                </div>
-                <h4 class="mt-3">More Filters</h4>
-                <a class="btn btn-danger btn-sm filter-button" data-bs-toggle="offcanvas" href="#offcanvasRight" role="button"
-                    aria-controls="offcanvasRight">Filter</a>
+        <div
+          class="col-xs-1 col-sm-6 col-md-5 col-lg-4 col-xl-3 col-xxl-3 mt-4"
+        >
+          <div class="is-sticky fade-in-image">
+            <h4>Most popular</h4>
+            <div id="popular" class="is-sticky">
+              <ul class="list-group list-group-flush" id="popular-list"></ul>
             </div>
+            <!-- ! be careful, when displaying 20 characters the more filers button gets overlapped by the cards -->
+            <h4 class="mt-3">More Filters</h4>
+            <a
+              class="btn btn-danger btn-sm filter-button"
+              data-bs-toggle="offcanvas"
+              href="#offcanvasRight"
+              role="button"
+              aria-controls="offcanvasRight"
+              >Filter</a
+            >
+          </div>
         </div>
+      </div>
     </div>
-</div>
-
 
-
-
-
-
-
-        <!-- OFFCANVAS CONTENT -->
-        <div class="container">
-            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
-                aria-labelledby="offcanvasRightLabel">
-                <div class="offcanvas-header">
-                    <h5 id="offcanvasRightLabel">Apply a filter</h5>
-                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
-                        aria-label="Close"></button>
+    <!-- OFFCANVAS CONTENT -->
+    <div class="container">
+      <div
+        class="offcanvas offcanvas-end"
+        tabindex="-1"
+        id="offcanvasRight"
+        aria-labelledby="offcanvasRightLabel"
+      >
+        <div class="offcanvas-header">
+          <h5 id="offcanvasRightLabel">Apply a filter</h5>
+          <button
+            type="button"
+            class="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="offcanvas-body">
+          <nav class="collapse bd-filters">
+            <ul class="list-unstyled mb-0 py-3 pt-md-1">
+              <li class="">
+                <button
+                  class="btn d-inline-flex align-items-center rounded"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#by-author"
+                  aria-expanded="true"
+                >
+                  By Author
+                </button>
+                <div class="collapse show" id="by-author">
+                  <select
+                    style="width: 200px"
+                    id="filter-select"
+                    class="form-select form-select-sm me-2 select-author"
+                    aria-label="form-select-sm"
+                  ></select>
                 </div>
-                <div class="offcanvas-body">
-                    <nav class="collapse bd-filters">
-                        <ul class="list-unstyled mb-0 py-3 pt-md-1">
-                            <li class="">
-                                <button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse"
-                                    data-bs-target="#by-author" aria-expanded="true">By Author</button>
-                                <div class="collapse show" id="by-author">
-                                    <select style="width: 200px" id="filter-select" class="form-select form-select-sm me-2  select-author" aria-label="form-select-sm"></select>
-                                </div>
-                            </li>
-                        </ul>
+              </li>
+            </ul>
 
-                        <ul class="list-unstyled mb-0 py-3 pt-md-1">
-                            <li class="">
-                                <button class="btn d-inline-flex align-items-center rounded" data-bs-toggle="collapse"
-                                    data-bs-target="#type-images" aria-expanded="true">Type of image</button>
-                                <div class="collapse show" id="by-type">
-                                    <select style="width: 200px" id="filter-select" class="form-select form-select-sm me-2  select-type"
-                                        aria-label="form-select-sm"></select>
-                                </div>
-                            </li>
-                        </ul>
-                    </nav>
+            <ul class="list-unstyled mb-0 py-3 pt-md-1">
+              <li class="">
+                <button
+                  class="btn d-inline-flex align-items-center rounded"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#type-images"
+                  aria-expanded="true"
+                >
+                  Type of image
+                </button>
+                <div class="collapse show" id="by-type">
+                  <select
+                    style="width: 200px"
+                    id="filter-select"
+                    class="form-select form-select-sm me-2 select-type"
+                    aria-label="form-select-sm"
+                  ></select>
                 </div>
-            </div>
-        </div>
-        
-        
-        <!-- MODAL -->
-        <div class="modal fade" id="exampleModal" tabindex="-1"aria-labelledby="exampleModalLabel" aria-hidden="true">
-            <div class="modal-dialog modal-dialog-centered modal-lg">
-                <div class="modal-content"></div>
-            </div>
+              </li>
+            </ul>
+          </nav>
         </div>
+      </div>
+    </div>
 
+    <!-- MODAL -->
+    <div
+      class="modal fade"
+      id="exampleModal"
+      tabindex="-1"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content"></div>
+      </div>
+    </div>
 
-        <!-- Bootstrap core JS-->
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
-        <!-- <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script> -->
-        <script src="./data.js"></script>
-        <script src="./main.js"></script>
-        <!-- <script src="./main2.js"></script> -->
-        <!-- <script src="./old_main.js"></script> -->
-</body>
-
-</html>
\ No newline at end of file
+    <!-- Bootstrap core JS-->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script> -->
+    <!-- <script src="./data.js"></script> -->
+    <script src="./main.js"></script>
+    <!-- <script src="./main2.js"></script> -->
+    <!-- <script src="./old_main.js"></script> -->
+  </body>
+</html>