더보기
검색
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css">
</head>
<body>
<section id="header">
<div class="logo-wrap">
<div class="logo">
<img src="" />
</div>
<div class="logoname">
픽셀스
</div>
</div>
<form class="search-form">
<div class="input-control">
<input type="text" name="search" class="search-input" placeholder="이미지 검색" />
<button type="submit" class="btn btn-submit">
<i class="xi-search"></i>
</button>
</div>
</form>
</section>
<section id="main">
<div class="main-content">
</div>
</section>
<div class="view">
<button class="view-more">더보기</button>
</div>
<script src="app.js"></script>
</body>
</html>app.js
let key = '';
const mainContent = document.querySelector('.main-content');
const searchInput = document.querySelector('.search-input');
const searchForm = document.querySelector('.search-form');
const btnSubmit = document.querySelector('.btn-submit');
const btnViewMore = document.querySelector('.view-more');
let searchImagesLink;
let currentSearch;
let searchValue;
let pageCount = 1;
const apiHandling = async (url) => {
const fetchData = await fetch(url, {
method: "GET",
headers: {
Accept: 'application/json',
Authorization: key
}
})
const data = await fetchData.json();
return data;
}
btnViewMore.addEventListener('click', viewMore);
searchInput.addEventListener('input',(e)=>{
searchValue = e.target.value;
})
searchForm.addEventListener('submit',(e)=>{
e.preventDefault();
currentSearch = searchValue;
searchImages(searchValue);
})
const clear = () => {
mainContent.innerHTML = '';
searchInput.value = '';
}
const insertHTML = (data) => {
data.photos.forEach((photo,i) => {
const gallery = document.createElement('div')
gallery.classList.add('gallery');
gallery.innerHTML = `
<div class='image-holder'>
<img src=${photo.src.large} />
</div>
<div class='profile'>
<a href=${photo.photographer_url}>${photo.photographer}</a>
<a href=${photo.src.large}>down</a>
</div>`;
mainContent.appendChild(gallery);
})
}
const curatedPhotos = async () => {
const data = await apiHandling('https://api.pexels.com/v1/curated?per_page=12');
insertHTML(data);
}
const searchImages = async (searchQuery) => {
clear();
searchImagesLink = `https://api.pexels.com/v1/search?query=${searchQuery}&per_page=12`
const data = await apiHandling(searchImagesLink);
insertHTML(data);
}
async function viewMore (){
pageCount++;
if(currentSearch){
searchImagesLink = `https://api.pexels.com/v1/search?query=${currentSearch}&per_page=12&page=${pageCount}`
}else{
searchImagesLink = `https://api.pexels.com/v1/curated?per_page=12&page=${pageCount}`
}
const data = await apiHandling(searchImagesLink);
insertHTML(data);
}
searchImages();
curatedPhotos();index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<form class="search-form">
<div class="input-control">
<input type="text" name="search" class="search-input" placeholder="Search..." />
<button type="submit" class="btn btn-submit">
button
</button>
</div>
</form>
</section>
<section id="main">
<div class="main-content">
</div>
</section>
<div class="view">
<button class="view-more">View More ↓</button>
</div>
<script src="app.js"></script>
</body>
</html>
프론트엔드