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 ，从而删除创建的所有元素。
