goit js hw 06
1.0.0
HTMLにはul#categoriesのリストが含まれています。
< ul id =" categories " >
< li class =" item " >
< h2 > Animals </ h2 >
< ul >
< li > Cat </ li >
< li > Hamster </ li >
< li > Horse </ li >
< li > Parrot </ li >
</ ul >
</ li >
< li class =" item " >
< h2 > Products </ h2 >
< ul >
< li > Bread </ li >
< li > Prasley </ li >
< li > Cheese </ li >
</ ul >
</ li >
< li class =" item " >
< h2 > Technologies </ h2 >
< ul >
< li > HTML </ li >
< li > CSS </ li >
< li > JavaScript </ li >
< li > React </ li >
< li > Node.js </ li >
</ ul >
</ li >
</ ul >スクリプトを書く：
ul#categoriesのカテゴリの数、つまりli.item要素を計算してコンソールにもたらします。ul#categoriesのli.itemの各要素について、彼は要素ヘッダー（ <h2>タグ）のテキストとカテゴリの要素の数（すべて<li>投資）を見つけて持ち込みます。その結果、次のメッセージがコンソールに表示されます。
Number of categories: 3
Category: Animals
Elements: 4
Category: Products
Elements: 3
Category: Technologies
Elements: 5 HTMLには、空のリストul#ingredientsが含まれています。
< ul id =" ingredients " > </ ul >JavaScriptには、行の配列が含まれています。
const ingredients = [
'Potatoes' ,
'Mushrooms' ,
'Garlic' ,
'Tomatos' ,
'Herbs' ,
'Condiments' ,
] ; ingredientsアレイの各要素についてスクリプトを作成します。
<li> 。 document.createElement()メソッドを必ず使用してください。itemクラスを追加します。<li>をul.ingredientsリストに挿入します。 スクリプトを作成して、一連のデータに基づいて画像ギャラリーを作成します。 HTMLにはul.galleryリストが含まれています。
< ul class =" gallery " > </ ul >一連のimagesオブジェクトを使用して、 <li>に挿入された<img>アイテムを作成します。マークアップを作成するには、テンプレート行とinsertAdjacentHTML()メソッドを使用します。
const images = [
{
url : 'https://images.pexels.com/photos/140134/pexels-photo-140134.jpeg?dpr=2&h=750&w=1260' ,
alt : 'White and Black Long Fur Cat' ,
} ,
{
url : 'https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?dpr=2&h=750&w=1260' ,
alt : 'Orange and White Koi Fish Near Yellow Koi Fish' ,
} ,
{
url : 'https://images.pexels.com/photos/219943/pexels-photo-219943.jpeg?dpr=2&h=750&w=1260' ,
alt : 'Group of Horses Running' ,
} ,
] ; カウンターはスパンとボタンで構成されており、その値を1つずつ増やして減少させるはずです。
< div id =" counter " >
< button type =" button " data-action =" decrement " > -1 </ button >
< span id =" value " > 0 </ span >
< button type =" button " data-action =" increment " > +1 </ button >
</ div >0を初期化する変数counterValueを作成します。counterValue変数の新しい値でインターフェイスを更新します。 入力input#name-input （ input ）を入力するときに、現在の値をspan#name-outputに置き換えるスクリプトを書きます。入力が空の場合、スパンは"Anonymous"行を表示する必要があります。
< input type =" text " id =" name-input " placeholder =" Please enter your name " />
< h1 > Hello, < span id =" name-output " > Anonymous </ span > ! </ h1 > 焦点を失ったときに入力された正しい数の文字（ blur ）について、その内容をチェックするスクリプトを書きます。
< input
type =" text "
id =" validation-input "
data-length =" 6 "
placeholder =" Please enter 6 symbols "
/>data-lengthの属性に示されています。border緑色になります。スタイルを追加するには、 validでinvalid CSSクラスを使用します。これは、タスクの開始ファイルにすでに追加されています。
# validation-input {
border : 3 px solid # bdbdbd ;
}
# validation-input . valid {
border-color : # 4caf50 ;
}
# validation-input . invalid {
border-color : # f44336 ;
} input#font-size-controlの変更に反応し、 span#text inputスタイルを変更し、 font-sizeのプロパティを更新するスクリプトを作成します。その結果、スライダーをドラッグすることにより、テキストのサイズが変更されます。
< input id =" font-size-control " type =" range " min =" 16 " max =" 96 " />
< br />
< span id =" text " > Abracadabra! </ span > ログインフォームのスクリプトを書きます。
< form class =" login-form " >
< label >
Email
< input type =" email " name =" email " />
</ label >
< label >
Password
< input type =" password " name =" password " />
</ label >
< button type =" submit " > Login </ button >
</ form >form.login-form submitイベントに従って処理する必要があります。alert 。elementsプロパティを使用して、フォームエレメントにアクセスします。resetてフォームのフィールドの値をクリーニングします。 要素の<body>グラウンドの色をインラインで変更するスクリプトを作成します。 button.change-colorとChange-Colorの出力span.colorの色の値を出力します。
< div class =" widget " >
< p > Background color: < span class =" color " > - </ span > </ p >
< button type =" button " class =" change-color " > Change color </ button >
</ div > getRandomHexColorを使用して、ランダムな色を生成します。
function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} 要素のコレクションを作成してクリーニングするためのスクリプトを作成します。ユーザーはinputにアイテムの数を入力し、 Створитиボタンをクリックしてから、コレクションをレンダリングします。ボタンをクリックしてОчистити 、要素のコレクションがクリーニングされます。
< div id =" controls " >
< input type =" number " min =" 1 " max =" 100 " step =" 1 " />
< button type =" button " data-create > Create </ button >
< button type =" button " data-destroy > Destroy </ button >
</ div >
< div id =" boxes " > </ div > 1つのパラメーター（数字）を受け入れるcreateBoxes(amount)関数を作成します。この機能は、 amountが示されていると同じくらい<div>を作成し、 div#boxesに追加します。
<div> -30px x 30pxの寸法。getRandomHexColor関数を使用して色を取得します。 function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} div#boxesを浄化するdestroyBoxes()関数を作成し、作成されたすべての要素を削除します。
