goit js hw 09
1.0.0
Читать на других языках: украинский, английский.
goit-js-hw-09 был создан.GitHub Pages .Prettier . В папке SRC вы найдете начальные файлы с готовыми маркировками, стилями и подключенными сценариями для каждой задачи. Скопируйте их в проект, полностью заменив папку src в Parcel-Project-Template. Для этого загрузите все это хранилище в качестве архива или используйте службу DownGit, чтобы загрузить отдельную папку из репозитория.
Заполните эту задачу в 01-color-switcher.html и 01-color-switcher.js . Смотрите демо-видео переключателя.
HTML содержит кнопки «Start» и «Stop».
< 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 представляет собой массив выбранных дат, поэтому мы принимаем первый элемент.
window.alert() с текстом "Please choose a date in the future" . Нажав на сценарий «Start», следует рассчитывать один раз за секунду, сколько времени осталось до указанной даты, и обновить интерфейс таймера, показывая четыре цифры: дни, часы, минуты и второе в xx:xx:xx:xx .
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 , если есть менее двух символов. Напишите функцию addLeadingZero(value) , которая использует метод padStart() и отформатируйте значение перед рендерингом.
️ Следующая функциональность не требуется для этой задачи, но будет хорошей дополнительной практикой.
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 > Напишите сценарий, который во время формы формы вызывает функцию createPromise(position, delay) столько раз, сколько введено в поле amount . Во время каждого вызова передайте созданный номер position и задержку, с учетом первой задержки ( delay ), введенной пользователем и шагом ( step ).
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 Nash Nashmi.npm install .npm start .src/sass Papquet и импортируются в файлах страниц. Например, для index.html файл стиля называется index.scss .src/images . Припев оптимизирует их, но только с помощью защиты проектной версии проекта. Все идет в виде вашего компьютера, так что, поскольку это может быть много времени на слабых автомобилях. Чтобы скорректировать проект Depaza, необходимо нарисовать много дополнительных баллов на настройке вашего репозитория. Приходите на вкладку Settings и в подразделениях Actions выберите General элемент.
Сдвиньте сюжет до поста, в которой Опация принимается в трассе на следе изображения и саме Save . Без этих тунков в совках будет бесстрасть для автоматизации процесса развертывания.
Версия проекта проекта будет автоматической и остановлена на страницах GitHub, во влажном состоянии gh-pages , время COGD обновляется main мокрой. Например, прямая пуша или сдержанная бассейн Pusha или прямая пуша. Для этого вам нужно подать homepage и build сценариев package.json , приглушенный 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 ) и вытянут производство файла файла из папки /root gh-pages , если это не так много автоматического.
Статус развертывания экстремального коммутирования завоеван иконой эго йодитатора.
Болезненная подробная информация о статусе может быть пропитана в значке, а в превышении переключателя Windows в Details .
Из -за времени, пара флотов, я живу сюжетом, вы можете варить на адресу, указанном в homepage . Например, я живу мандатом для этого хранилища https://goitacademy.github.io/parcel-project-template.
Если открыт заговор по пустыне, чтобы убить Console вкладку NO NO до вида включенных пакетов файлов проекта CSS и JS ( 404 ). Аист все в табичном нерегулярном значении homepage или сценария build в файловом package.json .
main скрипт (действие GitHub) из файла .github/workflows/deploy.yml .gh-pages . В противоположном случае в сценарии логики будет дано в проблеме.
