goit js hw 11
1.0.0
우크라이나어, 영어와 같은 다른 언어로 읽으십시오.
goit-js-hw-11 저장소가 생성되었습니다.GitHub Pages 의 작업 페이지가 포함되어 있습니다.async/await 구문이 사용됩니다.Prettier 사용하여 공식화됩니다.키워드별로 이미지 검색 및보기 적용 전면을 만듭니다. 인터페이스 요소의 설계를 추가하십시오. 응용 프로그램의 데모 비디오를 참조하십시오.
양식은 먼저 HTML 문서에 포함됩니다. 사용자는 텍스트 상자에 검색하기 위해 줄을 입력하고 HTTP 요청에 의해 양식 양식을 작성해야합니다.
< form class =" search-form " id =" search-form " >
< input
type =" text "
name =" searchQuery "
autocomplete =" off "
placeholder =" Search images... "
/>
< button type =" submit " > Search </ button >
</ form > 후원을 위해 Pixabay Public API를 사용하십시오. 등록하고, 고유 한 액세스 키를 얻고 문서에 익숙해 지십시오.
다음을 표시 해야하는 쿼리 문자열 옵션 목록
key API에 대한 고유 액세스 키입니다.q 검색 용어입니다. 사용자가 입력 할 것.image_type 이미지 유형. 사진 만 필요하므로 photo 넣으십시오.orientation - 사진의 방향. horizontal 의 가치를 넣으십시오.safesearch 연령별 필터. true 가치를 부여하십시오.대답은 쿼리 매개 변수의 기준을 충족시키는 이미지 배열입니다. 각 이미지는 다음 속성에만 관심이있는 객체로 설명됩니다.
webformatURL 카드 목록의 작은 이미지에 링크.largeImageURL 큰 이미지에 링크.tags - 이미지 설명이있는 줄. 속성 alt 에 적합합니다.likes - 좋아요.views - 뷰 수.comments - 댓글 수.downloads - 다운로드 수. 백킹이 빈 배열을 반환하면 적합한 것이 없습니다. 이 경우 "Sorry, there are no images matching your search query. Please try again." . 메시지에는 Notiflix 라이브러리를 사용하십시오.
div.gallery 요소는 먼저 HTML 문서에 포함되어 있으며 이미지 카드 표시를 위해 임대해야합니다. 새로운 키워드를 검색 할 때는 결과를 혼합하지 않도록 갤러리의 내용을 완전히 정리해야합니다.
< div class =" gallery " >
<!-- Картки зображень -->
</ div >갤러리에 대한 하나의 이미지의 카드 마크 업 템플릿.
< div class =" photo-card " >
< img src ="" alt ="" loading =" lazy " />
< div class =" info " >
< p class =" info-item " >
< b > Likes </ b >
</ p >
< p class =" info-item " >
< b > Views </ b >
</ p >
< p class =" info-item " >
< b > Comments </ b >
</ p >
< p class =" info-item " >
< b > Downloads </ b >
</ p >
</ div >
</ div > Pixabay API는 Pagination을 지원하고 page 및 per_page 매개 변수를 제공합니다. 각 답변이 40 개 객체 (기본값 20)가 있는지 확인하십시오.
page 매개 변수의 초기 값은 1 이어야합니다.1 씩 증가해야합니다.page 값을 원래 키워드로 반환해야합니다.HTML 문서에는 이미 버튼 표시가 포함되어 있으며 클릭에 다음 이미지 그룹을 요청하고 갤러리의 기존 요소에 표시를 추가해야합니다.
< button type =" button " class =" load-more " > Load more </ button > 이에 따라 Backing은 totalHits 속성을 반환합니다 - 검색 기준을 충족하는 총 이미지 수입니다 (무료 계정의 경우). 사용자가 컬렉션의 끝에 도달 한 경우 버튼을 숨기고 "We're sorry, but you've reached the end of search results." .
켈 작업에는 다음 기능이 필요하지 않지만 추가적인 연습이 될 것입니다.
새 검색마다 첫 번째 요청 후에 발견 된 이미지 수 ( totalHits )를 말하는 메시지를받습니다. 메시지 텍스트 - "Hooray! We found totalHits images."
SimpleLightbox 라이브러리전체 플러드 갤러리를 위해 Simplelightbox 라이브러리와 함께 큰 버전의 이미지를 추가하십시오.
refresh() Mattode가 포함되어 있습니다.CSS 라이브러리 코드를 프로젝트에 연결하려면 문서에 설명 된 경우를 제외하고 다른 가져 오기를 추가해야합니다.
// Описаний в документації
import SimpleLightbox from 'simplelightbox' ;
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css' ;각 후속 이미지 그룹을 요청하고 재생 한 후 페이지를 매끄럽게 스크롤하십시오. 코드 코드는 다음과 같지만 직접 이해하십시오.
const { height : cardHeight } = document
. querySelector ( '.gallery' )
. firstElementChild . getBoundingClientRect ( ) ;
window . scrollBy ( {
top : cardHeight * 2 ,
behavior : 'smooth' ,
} ) ;더 많은 버튼 대신 스크롤하는 동안 이미지를 끝없이 다운로드 할 수 있습니다. 우리는 당신에게 구현에 대한 완전한 행동의 자유를 제공하며, 당신은 모든 라이브러리를 사용할 수 있습니다.
이 프로젝트는 소포의 소즈 단이었다. 노출 앵커리지의 마킹 및 조정을 위해 문서화를 위해 선택됩니다.
parcel-project-template 내쉬 나쉬미.npm install 팀의 프로젝트 기관.npm start 명령을 공개하십시오.src/sass Papquet에 있으며 페이지의 파일 파일에서 가져옵니다. 예를 들어, index.html 의 경우 스타일 파일을 index.scss 라고합니다.src/images 폴더를 식별하십시오. 코러시아는이를 최적화하지만 프로젝트의 프로젝트 버전의 고갈로만 최적화합니다. 약한 자동차에서 많은 시간이 걸릴 수 있으므로 모든 것이 컴퓨터가 보이는 곳으로 들어갑니다. 프로젝트 Depaza를 조정하려면 저장소 설정에 많은 추가 Shag를 그려야합니다. Settings 탭에 오시면 Actions 하위 사전에서 General 항목을 선택하십시오.
음모를 포스트 세르 시아로 밀어 넣습니다. 여기서 오파 시아는 이미지의 흔적과 Save 위해 트랙에서 가져갑니다. 특종에 이러한 펑크가 없으면 배포 프로세스를 자동화하기위한 부적합이 있습니다.
프로젝트의 프로젝트 버전은 GitHub 페이지에서 자동으로 중지 될 것이며, gh-pages 습식에서 COGD의 시간이 main 습식으로 업데이트됩니다. 예를 들어, 직선 푸시 또는 수영장 재시험 한 푸시 또는 직선 푸시. 이를 위해서는 package.json 파일 homepage 및 스크립트 build 제출하고 자신의 경우 your_username 및 your_repo_name 머플 링하고 github에서 이름을 보내야합니다.
"homepage" : " https://your_username.github.io/your_repo_name/ " ,
"scripts" : {
"build" : " parcel build src/*.html --public-url /your_repo_name/ "
}, GitHub-Repository 튜닝 ( Settings > Pages )으로 거의 들어가서 자동이 아닌 경우 gh-pages 의 폴더 /root 에서 파일 파일의 생성을 도출합니다.
극단적 인 통근의 배치 상태는 Yoditicator의 자아의 아이콘에 의해 정복됩니다.
상태에 대한 고통스러운 자세한 정보는 아이콘과 Details 의 Windows 스위치를 초과하는 데 적용될 수 있습니다.
시간, 두 개의 함대로 인해 나는 음모를 살고 있습니다. homepage 에 표시된 주소를 끓일 수 있습니다. 예를 들어, 나는이 저장소 https://goitacademy.github.io/parcel-project-template에 대한 명령을 산다.
사막 플롯이 열리면 CSS 및 JS 프로젝트 파일의 통합 된 팩 ( 404 )의 Console 탭을 죽이기 위해. homepage 의 불규칙한 의미 또는 파일 package.json 에서 스크립트 build 모든 것을 장식하십시오.
.github/workflows/deploy.yml 파일의 특수 main (GitHub 조치)가 시작됩니다.gh-pages 수의사에서 프로젝트 파일 프로젝트의 유일한 제작. 반대의 경우, 논리 스크립트에서 문제에 나옵니다.
