goit js hw 08

우크라이나어, 영어와 같은 다른 언어로 읽으십시오.

수락 기준

• goit-js-hw-08 만들어졌습니다.
• 숙제에는 출력 파일의 두 가지 링크와 GitHub Pages 의 작업 페이지가 포함되어 있습니다.
• 콘솔에는 작업의 살아있는 페이지를 열 때 오류와 경고가 없습니다.
• 이 프로젝트는 소포 프로젝트를 사용하여 조립됩니다.
• 코드는 Prettier 사용하여 공식화됩니다.

파일 시작

SRC 폴더에서는 각 작업에 대한 준비된 표시, 스타일 및 연결된 스크립트가있는 파일을 시작하는 파일을 찾을 수 있습니다. Parcel-Project-Template에서 src 폴더를 완전히 교체하여 프로젝트에 복사하십시오. 이렇게하려면이 모든 저장소를 아카이브로 다운로드하거나 다운천 서비스를 사용하여 리포지토리에서 별도의 폴더를 다운로드하십시오.

작업 1- SimpleLightbox 라이브러리

이 작업을 01-gallery.html 및 01-gallery.js 에서 완료하십시오. 몇 개의 하위 말로 분해하십시오.

1. npm 사용하여 프로젝트 의존성으로 Simplelightbox 라이브러리를 추가하십시오 (과거 작업의 CDN 참조가 더 이상 필요하지 않음).
2. 이전 숙제에서 JavaScript 코드를 사용하지만 npm (Import/Export Syntax)을 통해 라이브러리가 설치되었으므로 원자로를 사용하십시오.

CSS 라이브러리 코드를 프로젝트에 연결하려면 문서에 설명 된 경우를 제외하고 다른 가져 오기를 추가해야합니다.

 // Описаний в документації
import SimpleLightbox from 'simplelightbox' ;
// Додатковий імпорт стилів
import 'simplelightbox/dist/simple-lightbox.min.css' ; 

작업 2- 비디오 플레어

HTML에는 vimeo 플레이어를위한 비디오가 포함 된 <iframe> 포함되어 있습니다. 비디오를 로컬 리포지토리에 계속 재생하는 스크립트를 작성하고 페이지가 다시 시작된 후에도이 시간부터 비디오를 계속 재생하십시오.

 < iframe
  id =" vimeo-player "
  src =" https://player.vimeo.com/video/236203659 "
  width =" 640 "
  height =" 360 "
  frameborder =" 0 "
  allowfullscreen
  allow =" autoplay; encrypted-media "
> </ iframe >

02-video.html 및 02-video.js 에서이 작업을 완료하십시오. 몇 개의 하위 말로 분해하십시오.

1. Vimeo 라이브러리의 문서를 알게합시다.
2. npm 통해 라이브러리를 프로젝트 의존성으로 추가하십시오.
3. 기존 플레이어 섹션에 설명 된대로 스크립트 파일에서 플레이어를 초기화하지만 플레이어가 CDN이 아닌 NPM 패키지로 추가되어 있음을 명심하십시오.
4. ON () 메소드의 문서를 연구하고 TimeUpdate 이벤트 추적 - 재생 시간 업데이트를 시작하십시오.
5. 현지 스토리지 시설에서 놀이 시간을 유지하십시오. 스토리지 키를 "videoplayer-current-time" 으로 두십시오.
6. SetCurrentime () 메소드를 사용하여 페이지를 다시 시작할 때 보존 된 위치에서 재생산을 복원하십시오.
7. Lodash.throttle Biblilot의 프로젝트에 추가하고 스토리지에서 갱신 시간을 한 번 이상 갱신하게하십시오.

작업 3- 피드백 형태

HTML에는 양식 표시가 포함되어 있습니다. 사용자가 무언가를 인쇄 할 때 로컬 스토리지에 필드 값을 저장하는 스크립트를 작성하십시오.

 < form class =" feedback-form " autocomplete =" off " >
  < label >
    Email
    < input type =" email " name =" email " autofocus />
  </ label >
  < label >
    Message
    < textarea name =" message " rows =" 8 " > </ textarea >
  </ label >
  < button type =" submit " > Submit </ button >
</ form >

이 작업을 03-feedback.html 및 03-feedback.js 로 완료하십시오. 몇 개의 하위 말로 분해하십시오.

1. 양식에서 input 이벤트를 추적하고 매번 양식 필드의 현재 값을 유지하는 로컬 저장소에 email 및 message 필드로 객체를 기록하십시오. 스토리지 키를 "feedback-form-state" 으로 표시하십시오.
2. 페이지를 다운로드 할 때 저장소 상태를 확인하고 저장된 데이터가 있으면 양식 필드를 작성하십시오. 그렇지 않으면 필드가 비어 있어야합니다.
3. 하위 형태의 동안 성형 및 필드가 정리되고 email , message 필드 및 현재 값이있는 콘솔 출력이 청소됩니다.
4. 스토리지가 500 밀리 초마다 한 번 이상 업데이트되어 있는지 확인하십시오. 이렇게하려면 프로젝트에 추가하고 lodash.throttle 라이브러리를 사용하십시오.

---

소포 템플릿

이 프로젝트는 소포의 소즈 단이었다. 노출 앵커리지의 마킹 및 조정을 위해 문서화를 위해 선택됩니다.

새로운 프로젝트 준비

1. Node.js의 컴퓨터로 연결된 lts-version과 일치하십시오. 필요한 경우 다운로드 및 기관.
2. 유리는 저장소입니다.
3. parcel-project-template 내쉬 나쉬미.
4. Github에 새 빈 저장소를 만듭니다.
5. VSCODE의 OTKROI 프로젝트는 정점을 시작하고 지침에 대한 GitHub 리포지토르로 프로젝트를 희생하십시오.
6. 터미널 npm install 팀의 프로젝트 기관.
7. 재생 모드를 시작하고 npm start 명령을 공개하십시오.
8. http : // localhost : 1234의 브라우저로 이동하십시오.이 플롯은 프로젝트 파일에서 자동 제조업체로 대체됩니다.

파일 및 폴더

• 모든 Parshali 파일 스타일은 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 에서 파일 파일의 생성을 도출합니다.

Depaza의 상태

극단적 인 통근의 배치 상태는 Yoditicator의 자아의 아이콘에 의해 정복됩니다.

• 황달 - 프로젝트의 컬렉션과 고추.
• 녹색 - Deploi는 철저하게 끝났습니다.
• 빨간색 - 보풀 시간, 배치의 특종 또는 배치.

상태에 대한 고통스러운 자세한 정보는 아이콘과 Details 의 Windows 스위치를 초과하는 데 적용될 수 있습니다.

라이브 플롯

시간, 두 개의 함대로 인해 나는 음모를 살고 있습니다. homepage 에 표시된 주소를 끓일 수 있습니다. 예를 들어, 나는이 저장소 https://goitacademy.github.io/parcel-project-template에 대한 명령을 산다.

사막 플롯이 열리면 CSS 및 JS 프로젝트 파일의 통합 된 팩 ( 404 )의 Console 탭을 죽이기 위해. homepage 의 불규칙한 의미 또는 파일 package.json 에서 스크립트 build 모든 것을 장식하십시오.

이 일이 어때요

1. 모든 푸시 후 .github/workflows/deploy.yml 파일의 특수 main (GitHub 조치)가 시작됩니다.
2. 모든 파일 저장소는 서버에서 컴파일되어 프로젝트가 초기화되어 수확을 전달합니다.
3. 모든 단계가 너무 많이 지나면 gh-pages 수의사에서 프로젝트 파일 프로젝트의 유일한 제작. 반대의 경우, 논리 스크립트에서 문제에 나옵니다.