barraDeBuscaGabriel.js

var charactersList = document.getElementById('charactersList');
var searchBar = document.getElementById('searchBar');
var hpCharacters = []; 

/* código novo */
function pesquisar() {
  var termosDaBusca = document.getElementById("searchBar").value;
  var filteredCharacters = hpCharacters.filter((character) => {
        return (
            character.body.toLowerCase().includes(termosDaBusca) ||
            character.title.toLowerCase().includes(termosDaBusca)
        );
    });

    displayCharacters(filteredCharacters);
};


/*
searchBar.addEventListener('keyup', (e) => {
    var searchString = e.target.value.toLowerCase(); 
  
  
  
    var filteredCharacters = hpCharacters.filter((character) => {
        return (
            character.body.toLowerCase().includes(searchString) ||
            character.title.toLowerCase().includes(searchString)
        );
    });

    displayCharacters(filteredCharacters);
});
*/

async function loadCharacters() {
    try {
        
        var res = await fetch('https://gist.githubusercontent.com/DiegoPinho/0a6465f44626cbdbc02d14255f8e8527/raw/7f701179adc769eb77e4976061f9db46f4370bf1/mobile.json');
        hpCharacters = await res.json();
        console.log(hpCharacters);
            
      
      //displayCharacters(hpCharacters);
      
    } catch (err) {
        console.error(err);
    }
};


function displayCharacters(characters){
    var htmlString = characters
        .map((character) => {
            return `
            <li class="character">
                <h2>${character.title}</h2>
                <p>${character.body}</p>
                <img src="${character.image}"></img>
            </li>
        `;
        })
        .join('');
  
    charactersList.innerHTML = htmlString;
};

loadCharacters();