addEventListener('DOMContentLoaded', init); function init () { // DOM elements const header = document.querySelector('.header'); const search = document.querySelector('.search'); const section = document.querySelector('.achievements'); const loading_events = document.querySelector('.loading-events'); const badges_list = document.querySelector('.badges'); // Initializing the array to store our data let badges_array = []; // Listeners addEventListener('scroll', animateHeader); search.addEventListener('keyup', function(e) { let search = e.target.value.toLowerCase(); /* Update the array by showing only the results that match our search. You can search by name or by description. The search by description enables for instance to find all the badges related to challenges, as none of them includes the word "challenge" in the badge's name. */ const new_badges_array = badges_array.filter(badge => { let badge_title = badge.title.toLowerCase(); let badge_description = badge.description.toLowerCase(); return badge_title.includes(search) || badge_description.includes(search); }); // Render our new data renderBadges(new_badges_array); }); // Function declarations function fetchBadgesData() { fetch('https://api.myjson.com/bins/1bkkog') .then(reponse => reponse.json()) .then(badges => { // Adding the data to the array badges_array = badges; // Only after we get the data, we render renderBadges(badges); // We remove the loading text now that we get and rendered the data section.removeChild(loading_events); }) .catch(error => console.log(error)) } function renderBadges(badges) { let badgeInfo = ""; badges.map(badge => { badgeInfo += `

${badge.title}

${badge.description}

${badge.xp} xp

` ; }); badges_list.innerHTML = badgeInfo; } function animateHeader() { if(window.scrollY > 0) { header.classList.add('header-transition'); } else{ header.classList.remove('header-transition'); } } // Function calls fetchBadgesData(); } /* CREDITS ====== Sources for the xp points : https://code.sololearn.com/WPWPl1tlA2fO https://code.sololearn.com/WdNJUx3lFKMZ Tell me if there are any mistakes for the xp points or if any badge is missing, i will update them. */ /* ==== Note ==== I made a json to gather all the data concerning each badge (icon, name, description, xp points) the json is accessible right here 👉 https://api.myjson.com/bins/1bkkog */

#Practical Case | Realtime Search