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ライブラリを使用して、ユーザーが1つのインターフェイス要素で終了日と時間を選択できるようにします。 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)の2番目の引数は、オプションのパラメーターオブジェクトを送信できます。タスクを完了するために必要なオブジェクトを準備しました。オプションドキュメント内のすべてのプロパティが責任を負い、コードで使用するものを理解してください。
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"テキストでwindow.alert()を表示します。「開始」スクリプトをクリックすると、指定された日付までの時間が1秒に1回計算され、タイマーインターフェイスを更新する必要があります。xx 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分または他のコンポーネントがある場合、関数は04ではなく4返します。タイマーインターフェイスでは、2文字未満の場合は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)関数を引き起こすスクリプトを作成します。各コール中に、ユーザーが入力した最初の遅延（ delay ）とステップ（ step ）を与えられた場合、作成されたposition番号と遅延を渡します。
function createPromise ( position , delay ) {
const shouldResolve = Math . random ( ) > 0.3 ;
if ( shouldResolve ) {
// Fulfill
} else {
// Reject
}
} createPromise関数コードを補完して、 delay後に1つのカットまたは拒否を返すようにします。側面の値は、同じパラメーターの値を持つ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パプケにあり、ページのファイルファイルにインポートされています。たとえば、 index.htmlの場合、スタイルファイルはindex.scssと呼ばれます。src/imagesフォルダーに識別します。合唱団はそれらを最適化しますが、プロジェクトのプロジェクトバージョンの枯渇によってのみです。すべてがあなたのコンピューターの姿を見せているので、それは弱い車で多くの時間になる可能性があるためです。 プロジェクトDepazaを調整するには、リポジトリの設定に多くの追加のシャグを描く必要があります。 Settingsタブをご覧になり、 ActionsサブセクションでGeneralアイテムを選択します。
プロットをポストセシアにスライドさせます。この跡は、画像のトレースとSaveのためにトラックに撮影されます。スクープにこれらのタンクがなければ、展開のプロセスを自動化するための公開はありません。
プロジェクトのプロジェクトバージョンは自動化され、GITHUBページで停止します。GH gh-pages WETでは、COGDの時間がmainウェットで更新されます。たとえば、まっすぐなプッシャまたはプール再テストプッシャまたはストレートプッシャ。このために、 package.jsonファイルのhomepageとスクリプトbuildをファイルする必要があります。独自のyour_usernameとyour_repo_nameをmumfftし、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からファイルファイルの生成を引き出します。
極端な通勤の展開のステータスは、ヨディティカーターのエゴのアイコンによって征服されます。
ステータスに関する痛みを伴う詳細情報は、アイコンに浸し、 Details Windowsスイッチを超えることができます。
その時、数人の艦隊、私は陰謀を生きています、あなたはhomepageに示されている住所で煮ることができます。たとえば、私はこのリポジトリhttps://goitacademy.github.io/parcel-project-templateのマンドを生きています。
砂漠のプロットが開かれている場合、CSSおよびJSプロジェクトファイルの組み込まれたパックを見て、 Consoleタブを殺します（ 404 ）。コウノトリはすべて、 homepageの不規則な意味で、またはファイルpackage.jsonにスクリプトbuild 。
.github/workflows/deploy.ymlファイルからの特別なmain （githubアクション）が起動します。gh-pages Vetでのプロジェクトファイルプロジェクトの唯一の生産。反対の場合、ロジックスクリプトでは問題に示されます。
