goit js hw 09
1.0.0
우크라이나어, 영어와 같은 다른 언어로 읽으십시오.
goit-js-hw-09 저장소가 작성되었습니다.GitHub Pages 의 작업 페이지에 대한 두 가지 링크가 포함되어 있습니다.Prettier 사용하여 공식화됩니다. SRC 폴더에서는 각 작업에 대한 준비된 표시, 스타일 및 연결된 스크립트가있는 파일을 시작하는 파일을 찾을 수 있습니다. Parcel-Project-Template에서 src 폴더를 완전히 교체하여 프로젝트에 복사하십시오. 이렇게하려면이 모든 저장소를 아카이브로 다운로드하거나 다운천 서비스를 사용하여 리포지토리에서 별도의 폴더를 다운로드하십시오.
01-color-switcher.html 및 01-color-switcher.js 에서이 작업을 완료하십시오. 스위치의 데모 비디오를 참조하십시오.
HTML에는 "시작"및 "정지"버튼이 포함되어 있습니다.
< button type =" button " data-start > Start </ button >
< button type =" button " data-stop > Stop </ button > 시작 버튼을 클릭 한 후 인라인 스타일을 사용하여 배경 <body> 의 색상을 임의의 값으로 변경하는 스크립트를 작성하십시오. "정지"버튼을 클릭하면 배경의 색상이 중지되어야합니다.
켈 시작 버튼에서 끝없는 횟수를 클릭 할 수 있습니다. 변경이 시작되었는지 확인하고 시작 버튼이 비활성화되어 있는지 확인하십시오.
getRandomHexColor 사용하여 임의의 색상을 생성하십시오.
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} 파일 02-timer.html 및 02-timer.js 에서이 작업을 완료하십시오. 수를 특정 날짜까지 확인하는 타이머 스크립트를 작성하십시오. 이러한 타이머는 블로그 및 온라인 상점, 이벤트 등록 페이지, 유지 보수 등에 사용할 수 있습니다. 타이머의 데모 비디오를 참조하십시오.
HTML에는 준비된 타이머, 필드 선택 필드 및 타이머를 시작 해야하는 클릭의 버튼이 포함되어 있습니다. 최소 인터페이스를 추가하십시오.
< input type =" text " id =" datetime-picker " />
< button type =" button " data-start > Start </ button >
< div class =" timer " >
< div class =" field " >
< span class =" value " data-days > 00 </ span >
< span class =" label " > Days </ span >
</ div >
< div class =" field " >
< span class =" value " data-hours > 00 </ span >
< span class =" label " > Hours </ span >
</ div >
< div class =" field " >
< span class =" value " data-minutes > 00 </ span >
< span class =" label " > Minutes </ span >
</ div >
< div class =" field " >
< span class =" value " data-seconds > 00 </ span >
< span class =" label " > Seconds </ span >
</ div >
</ div >flatpickr 도서관FlatPickr 라이브러리를 사용하여 사용자가 하나의 인터페이스 요소에서 종료 날짜 및 시간을 선택할 수 있습니다. CSS 라이브러리 코드를 프로젝트에 연결하려면 문서에 설명 된 경우를 제외하고 다른 가져 오기를 추가해야합니다.
// Описаний в документації
import flatpickr from 'flatpickr' ;
// Додатковий імпорт стилів
import 'flatpickr/dist/flatpickr.min.css' ; 라이브러리는 input[type="text"] 에서 초기화 될 것으로 예상되므로 input#datetime-picker 필드를 HTML 문서에 추가했습니다.
< input type =" text " id =" datetime-picker " /> flatpickr(selector, options) 의 두 번째 인수는 선택적 매개 변수 객체를 전송할 수 있습니다. 우리는 당신에게 작업을 완료하는 데 필요한 객체를 준비했습니다. 옵션 문서의 모든 속성이 담당하는 내용을 이해하고 코드에 사용하십시오.
const options = {
enableTime : true ,
time_24hr : true ,
defaultDate : new Date ( ) ,
minuteIncrement : 1 ,
onClose ( selectedDates ) {
console . log ( selectedDates [ 0 ] ) ;
} ,
} ; onClose() 파라미터 객체의 메소드는 flatpickr 생성하는 인터페이스가 닫힐 때마다 호출됩니다. 사용자가 선택한 날짜를 처리해야합니다. selectedDates 매개 변수는 선택한 날짜 배열이므로 첫 번째 요소를 취합니다.
"Please choose a date in the future" 텍스트와 함께 show show window.alert() "시작"스크립트를 클릭하면 1 초, 지정된 날짜에 남은 시간의 양과 타이머 인터페이스를 업데이트하여 xx:xx:xx:xx 에서 일, 시간, 몇 분 및 두 번째 4 자리가 표시되는 타이머 인터페이스를 업데이트해야합니다.
00:00:00:00 에 올 때 중지되어야합니다.우리는 복잡하지 않을 것입니다. 새 날짜를 선택하고 다시 시작하려면 타이머가 실행중인 경우 페이지를 다시 시작해야합니다.
값을 계산하려면 완성 된 기능 convertMs 사용하십시오. 여기서 ms 밀리 초의 최종 날짜와 현재 날짜의 차이입니다.
function convertMs ( ms ) {
// Number of milliseconds per unit of time
const second = 1000 ;
const minute = second * 60 ;
const hour = minute * 60 ;
const day = hour * 24 ;
// Remaining days
const days = Math . floor ( ms / day ) ;
// Remaining hours
const hours = Math . floor ( ( ms % day ) / hour ) ;
// Remaining minutes
const minutes = Math . floor ( ( ( ms % day ) % hour ) / minute ) ;
// Remaining seconds
const seconds = Math . floor ( ( ( ( ms % day ) % hour ) % minute ) / second ) ;
return { days , hours , minutes , seconds } ;
}
console . log ( convertMs ( 2000 ) ) ; // {days: 0, hours: 0, minutes: 0, seconds: 2}
console . log ( convertMs ( 140000 ) ) ; // {days: 0, hours: 0, minutes: 2, seconds: 20}
console . log ( convertMs ( 24140000 ) ) ; // {days: 0, hours: 6 minutes: 42, seconds: 20} convertMs() 기능은 계산 된 시간이 최종 날짜까지 남은 객체를 반환합니다. 결과가 형식화되지 않습니다. 즉, 4 분 또는 다른 시간 구성 요소가 있으면 함수가 4 가 아닌 04 반환됩니다. 타이머 인터페이스에서 문자가 두 개 미만인 경우 0 추가해야합니다. padStart() 메소드를 사용하고 렌더링 전에 값을 형식화하는 addLeadingZero(value) 기능을 작성하십시오.
켈 작업에는 다음 기능이 필요하지 않지만 추가적인 연습이 될 것입니다.
dd window.alert() 대신 사용자에게 메시지를 표시하고 Notiflix 라이브러리를 사용하십시오.
이 작업을 03-promises.html 및 03-promises.js 로 완료하십시오. 작업 생성기의 데모 비디오를 참조하십시오.
HTML에는 사용자가 밀리 초로 첫 번째 지연을 입력하는 양식의 표시가 포함되어 있으며, 첫 번째 후에 각 커터의 지연과 생성 할 측정 수를 증가시키는 단계입니다.
< form class =" form " >
< label >
First delay (ms)
< input type =" number " name =" delay " required />
</ label >
< label >
Delay step (ms)
< input type =" number " name =" step " required />
</ label >
< label >
Amount
< input type =" number " name =" amount " required />
</ label >
< button type =" submit " > Create promises </ button >
</ form > 양식의 형식 시점에서 amount 필드에 입력 된만큼 여러 번 createPromise(position, delay) 기능을 유발하는 스크립트를 작성하십시오. 각 통화 중에 사용자와 단계 ( step )가 입력 한 첫 번째 지연 ( delay )이 주어지면 생성 된 position 번호와 지연을 전달하십시오.
function createPromise ( position , delay ) {
const shouldResolve = Math . random ( ) > 0.3 ;
if ( shouldResolve ) {
// Fulfill
} else {
// Reject
}
} createPromise 함수 코드를 보완하여 delay 후 하나의 컷 또는 거부를 반환합니다. 측면의 값은 동일한 매개 변수의 값으로 position 및 delay 속성을 갖는 객체 여야합니다. 원래 함수 코드를 사용하여 처벌과 관련하여 필요한 것을 선택하거나 거부하십시오.
createPromise ( 2 , 1500 )
. then ( ( { position , delay } ) => {
console . log ( `✅ Fulfilled promise ${ position } in ${ delay } ms` ) ;
} )
. catch ( ( { position , delay } ) => {
console . log ( ` Rejected promise ${ position } in ${ delay } ms` ) ;
} ) ;
켈 작업에는 다음 기능이 필요하지 않지만 추가적인 연습이 될 것입니다.
console.log() 대신 사용자에게 메시지를 표시하려면 Notiflix 라이브러리를 사용하십시오.
이 프로젝트는 소포의 소즈 단이었다. 노출 앵커리지의 마킹 및 조정을 위해 문서화를 위해 선택됩니다.
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 수의사에서 프로젝트 파일 프로젝트의 유일한 제작. 반대의 경우, 논리 스크립트에서 문제에 나옵니다.
