Как работать с API pexels?
Впервые работаю с API, извиняюсь за глупые вопросы, но надеюсь на помощь. Есть код для вывода, поиска и загрузки фотографий с сайта pexels.com, но для видео сделать не могу. Сам код - код Еще интересно как можно обновлять ресурсы API? Нужно чтобы при заходе каждый день пользователь видел новые фото, видео, но контент сейчас не изменяется.
class PhotoGallery {
constructor() {
this.API_KEY = 'KEY';
this.galleryDIv = document.querySelector('.photo-gallery');
this.searchForm = document.querySelector('.main-screen__item');
this.loadMore = document.querySelector('.load-more');
this.logo = document.querySelector('.main-header__logo')
this.pageIndex = 1;
this.searchValueGlobal = '';
this.eventHandle();
}
eventHandle() {
document.addEventListener('DOMContentLoaded', () => {
this.getImg(1);
});
this.searchForm.addEventListener('submit', (e) => {
this.pageIndex = 1;
this.getSearchedImages(e);
});
this.loadMore.addEventListener('click', (e) => {
this.loadMoreImages(e);
})
this.logo.addEventListener('click', () => {
this.pageIndex = 1;
this.galleryDIv.innerHTML = '';
this.getImg(this.pageIndex);
})
}
async getImg(index) {
this.loadMore.setAttribute('data-img', 'curated');
const baseURL = `https://api.pexels.com/v1/curated?page=${index}&per_page=12`;
const data = await this.fetchImages(baseURL);
this.GenerateHTML(data.photos)
console.log(data)
}
async fetchImages(baseURL) {
const response = await fetch(baseURL, {
method: 'GET',
headers: {
Accept: 'application/json',
Authorization: this.API_KEY
}
});
const data = await response.json();
// console.log(data);
return data;
}
GenerateHTML(photos) {
photos.forEach(photo => {
const item = document.createElement('div');
item.classList.add('item-photo');
item.classList.add('_ibg');
item.innerHTML = `
<img src="${photo.src.large}" class="image">
<h3>${photo.photographer}</h3>
<div class="item__menu">
<ul class="item-photo__list item-list">
<li class="item-list__item">
<a download="" href="${photo.src.original}" class="item-list__link">original</a>
<a download="" href="${photo.src.large}" class="item-list__link">large</a>
<a download="" href="${photo.src.medium}" class="item-list__link">medium</a>
<a download="" href="${photo.src.small}" class="item-list__link">small</a>
</li>
</ul>
</div>
`;
this.galleryDIv.appendChild(item)
})
}
async getSearchedImages(e) {
this.loadMore.setAttribute('data-img', 'search');
e.preventDefault();
this.galleryDIv.innerHTML = '';
const searchValue = e.target.querySelector('input').value;
this.searchValueGlobal = searchValue;
const baseURL = `https://api.pexels.com/v1/search?query=${searchValue}&page=1&per_page=12`
const data = await this.fetchImages(baseURL);
this.GenerateHTML(data.photos);
e.target.reset();
}
async getMoreSearchedImages(index) {
// console.log(searchValue)
const baseURL = `https://api.pexels.com/v1/search?query=${this.searchValueGlobal}&page=${index}&per_page=12`
const data = await this.fetchImages(baseURL);
console.log(data)
this.GenerateHTML(data.photos);
}
loadMoreImages(e) {
let index = ++this.pageIndex;
const loadMoreData = e.target.getAttribute('data-img');
if (loadMoreData === 'curated') {
// load next page for curated]
this.getImg(index)
} else {
// load next page for search
this.getMoreSearchedImages(index);
}
}
}
const gallery = new PhotoGallery;