import ‘./style.css’
import javascriptLogo from ‘./javascript.svg’
import viteLogo from ‘/vite.svg’
import { setupCounter } from ‘./counter.js’
import md5 from ‘md5’
let resultsPerPage = 15;
let offset = null
let currentPage = 1
const publicKey = ‘’;
const privateKey = ‘’;
let timestamp = new Date().getTime()
let hashVal = md5(timestamp+privateKey+publicKey);
const button = document.getElementById(‘submit-search’);
const searchInput = document.getElementById(‘search-input’)
const pagination = document.getElementById(‘pagination’)
const main = document.getElementById(‘main’)
const getMarvelCharacters = async function(currentPage, searchInput){
const url = http://gateway.marvel.com/v1/public/characters?ts=${timestamp}&apikey=${publicKey}&hash=${hashVal}&limit=${resultsPerPage}&offset=${offset}
;
const response = await fetch(url)
try {
if(!response.ok){
throw new Error(‘network response is not okay’)
}
const data = await response.json()
let characters = data.data.results
const numPages = Math.ceil(characters.length / resultsPerPage);
displayCharacters(characters, searchInput)
console.log(characters)
return characters
} catch (error) {
console.error(‘There was an error:’, error)
}
}
const getResPage = function(characters,currentPage) {
offset = (currentPage - 1) * resultsPerPage ;
const start = offset
const end = start + resultsPerPage;
return characters.slice(start, end);
}
const displayCharacters = function(characters){
main.innerHTML = ‘’
let markup = ‘’
characters.forEach(character =>{
markup +=
<div id="results-container"> <div class="image-container"> <img src="${character.thumbnail.path}.${character.thumbnail.extension}" alt=""> </div> <div class="character-info"> <h2 class="Character-name">${character.name}</h2> <p class="character-info">${character.description}</p> </div> </div>
});
main.insertAdjacentHTML(‘beforeend’, markup)
}
const getPaginationButtonResults = function(currentPage){
const next = document.querySelector(‘.right’)
const prev = document.querySelector(‘.left’)
next.addEventListener(‘click’, async (event)=>{
event.preventDefault()
currentPage++
offset+=resultsPerPage
const characters = await getMarvelCharacters(currentPage)
displayCharacters(characters)
})
prev.addEventListener(‘click’, async (event)=>{
event.preventDefault()
currentPage–
if(currentPage>0){
offset-=resultsPerPage
const characters = await getMarvelCharacters(currentPage)
displayCharacters(characters)
}
})
}
getMarvelCharacters(currentPage)
button.addEventListener(‘click’, ()=>{
getPaginationButtonResults(currentPage)
})
Hi I am wondering how to create a search function and incorperate it into this code any ideas???