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> tag）以及<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對象來創建插入<img> <li>項目。要創建標記，請使用模板行和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' ,
} ,
] ; 該計數器由跨度和按鈕組成，應將其值增加並降低一個。
< 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 >counterValue ，該價值將存儲當前儀表值並初始化其值0 。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將變為綠色。要添加樣式，請使用CSS類valid和invalid ，我們已經將其添加到任務的啟動文件中。
# 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並輸出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 >創建createBoxes(amount)函數。該功能創建的<div>與amount指示一樣多，並將它們添加到div#boxes 。
<div> -30px的尺寸x 30px。getRandomHexColor功能獲得顏色。 function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
}創建destroyBoxes()函數清潔div#boxes ，從而刪除創建的所有元素。
