ready for meets?

Author: sahvsergio

README.md

@@ -1 +1,10 @@
 # sahvsergio-Treehouse_Full-Stack_JavaScript_Techdegree_unit5
+[]Functionality has been added to switch back and forth between employees when the detail modal window is open.
+No errors in the console when the end or beginning of the list is reached.
+[]At least one of the following has been added or changed:
+        color
+        background color
+        font
+        box or text shadows
+
+    Above style changes noted in the README.md file

js/scripts.js

@@ -5,34 +5,24 @@ let peopleUrl = "https://randomuser.me/api/?results=12&nat=AU,CA,GB,IE,NZ,US";
 let searchContainer = document.querySelector(".search-container");
 let galleryDiv = document.querySelector("#gallery");
 
-
-
 // =================
 
 //fetch requests
 
 //================
 async function fetchEmployees(url) {
   try {
-    let response = await fetch(url)
-    let data= await response.json();
-    let employees=data.results;
-    displayEmployees(employees)
+    let response = await fetch(url);
+    let data = await response.json();
+    let employees = data.results;
+    displayEmployees(employees);
     createModal(employees);
-    
-  
-
-  } catch (error){ 
-  console.error(error);
-  } 
-  
-  finally {
+  } catch (error) {
+    console.error(error);
+  } finally {
     createSearch();
     closeModal();
     searchEmployee();
-    
-
-  
   }
 }
 
@@ -50,7 +40,7 @@ function createSearch() {
 //=======================================================
 
 function displayEmployees(employees) {
-  console.log(employees);
+
   for (i = 0; i < employees.length; i++) {
     let employee = employees[i];
     let employeeMarkup = `<div class="card">
@@ -72,18 +62,16 @@ function createModal(employees) {
   galleryDiv.addEventListener("click", (e) => {
     let employeeCard = e.target.closest(".card");
     if (!employeeCard) return; //
-    
+
     let employeeCardName = employeeCard.querySelector("h3").innerText;
-   
-    
+
     let emp;
-    
+
     const matchedEmployee = employees.find(
       (emp) => `${emp.name.first} ${emp.name.last}` === employeeCardName
     );
-    let dob=matchedEmployee.dob.date.split('T');
-    let dateOfBirth=dob[0].split('-');
-   
+    let dob = matchedEmployee.dob.date.split("T");
+    let dateOfBirth = dob[0].split("-");
 
     let ModalMarkup = `<div class="modal-container">
                 <div class="modal">
@@ -101,18 +89,11 @@ function createModal(employees) {
                 </div>`;
     galleryDiv.insertAdjacentHTML("afterend", ModalMarkup);
   });
-  
-  
 }
 
-
-
-
-
 fetchEmployees(peopleUrl);
 
-function closeModal(){
-
+function closeModal() {
   document.addEventListener("click", (e) => {
     const modalContainer = document.querySelector(".modal-container");
 
@@ -123,24 +104,18 @@ function closeModal(){
   });
 }
 
-function searchEmployee(){
-  let searchInput=document.querySelector('#search-input');
-  searchInput.addEventListener('keyup',(e)=>{
-    let currentValue=e.target.value.toLowerCase();
-    console.log(currentValue);
+function searchEmployee() {
+  let searchInput = document.querySelector("#search-input");
+  searchInput.addEventListener("keyup", (e) => {
+    let currentValue = e.target.value.toLowerCase();
+  
     let employees = document.querySelectorAll("h3.card-name");
-    employees.forEach(employee=>{
-      if(employee.textContent.toLowerCase().includes(currentValue)){
-        employee.parentNode.parentNode.style.display='block';
-
-      }
-      else{
-        employee.parentNode.parentNode.style.display='none';
+    employees.forEach((employee) => {
+      if (employee.textContent.toLowerCase().includes(currentValue)) {
+        employee.parentNode.parentNode.style.display = "block";
+      } else {
+        employee.parentNode.parentNode.style.display = "none";
       }
-    })
-
-
-  }
-);
-
-}
+    });
+  });
+}