goit js hw 09
1.0.0
阅读其他语言：乌克兰，英语。
goit-js-hw-09存储库。GitHub Pages上的输出文件和工作页面。Prettier制定的。 在SRC文件夹中，您可以找到每个任务的启动文件，并使用Ready -MADE标记，样式和连接的脚本。通过完全替换包裹项目板中的src文件夹来将它们复制到项目中。为此，请下载所有这些存储库作为存档，或使用Downgit服务下载从存储库中下载单独的文件夹。
在01-color-switcher.html和01-color-switcher.js中完成此任务。请参阅开关的演示视频。
HTML包含“开始”和“停止”按钮。
< button type =" button " data-start > Start </ button >
< button type =" button " data-stop > Stop </ button >在单击“开始”按钮后，写一个将背景<body>的颜色更改为随机值的脚本。单击“停止”按钮更改背景的颜色应停止。
配x 请记住，您可以在开始按钮上单击无数次。确保启动更改，开始按钮不活动。
使用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 ] ) ;
} ,
} ;每当创建flatpickr接口都关闭时，请调用参数对象的onClose()方法。有必要处理用户选择的日期。选定selectedDates参数是选定日期的数组，因此我们采用第一个元素。
window.alert() "Please choose a date in the future"文字。单击“启动”脚本应计算一次，一秒钟，剩下多少时间到指定的日期，然后更新计时器接口，显示四位数字： xx:xx:xx:xx day，小时，分钟和第二个数字。
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)功能。
配x 任务不需要以下功能，但将是一个很好的额外练习。
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字段中输入的次数多次。在每个呼叫过程中，给定第一个延迟（延迟）和台阶（ 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` ) ;
} ) ;
配x 任务不需要以下功能，但将是一个很好的额外练习。
要向用户显示消息，而不是console.log() ，请使用notiflix库。
这个项目是包裹的苏联。为了标记和调整以选择文档的锚定限制。
parcel-project-template纳什·纳什米（Nash Nashmi）。npm install团队中项目的机构。npm start命令。src/sass PAPQUET中，并在页面文件文件中导入。例如，对于index.html ，样式文件称为index.scss 。src/images文件夹。 Chorusian对它们进行了优化，但仅在项目版本的遗憾中。一切都进入了您的计算机的视线，因此在薄弱的汽车上可能会有很多时间。 为了调整DePaza项目，有必要在存储库的设置上绘制许多其他粗毛。来到Settings选项卡，在Actions订阅中选择General项目”。
将情节滑到帖子-Secia上，其中在图像的轨迹和Save的痕迹上将冰川片带到轨道上。如果没有勺子中的这些tunk，就会有毫无疑问的部署过程。
该项目的项目版本将是自动的，并在GITHUB页面上停止，在gh-pages潮湿中，COGD的时间已更新了main湿。例如，笔直的Pusha或泳池重新测试的Pusha或笔直的Pusha。为此，您需要提交一个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上超过窗口开关。
由于时间，几个舰队，我生活在剧情上，您可以在homepage中指示的地址煮熟。例如，我为此存储库的命令https://goitacademy.github.io/parcel-project-template。
如果打开了沙漠地块，以杀死NOR的Console Tab，以击杀CSS和JS项目文件（ 404 ）。在taby中静止为homepage的不规则含义或在文件package.json中build脚本。
.github/workflows/deploy.yml文件的特殊main （github操作）。gh-pages Vet中唯一的项目文件项目的生产。在相反的情况下，逻辑脚本将在问题中给出。
