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 클래스를 추가합니다.ul.ingredients 목록에 모든 <li> 삽입하십시오. 스크립트를 작성하여 다양한 데이터 배열을 기반으로 이미지 갤러리를 만듭니다. HTML에는 ul.gallery 목록이 포함되어 있습니다.
< ul class =" gallery " > </ ul > <li> 에 삽입 된 <img> 항목을 생성하려면 images 배열을 사용하십시오. 마크 업을 만들려면 템플릿 라인과 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 >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 > Focus ( 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 의 변경에 반응하는 스크립트를 작성하고 font-size 의 속성을 업데이트하여 span#text input 스타일을 변경하십시오. 결과적으로 슬라이더를 드래그하면 텍스트의 크기가 변경됩니다.
< 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 에 따라 양식 필드의 값을 청소하십시오. button.change-color 을 통해 요소 배경 <body> 색상 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) 함수를 만듭니다. 이 기능은 amount 으로 표시된 것만 큼 많은 <div> 생성하고 div#boxes 에 추가합니다.
<div> -30px x 30px의 치수.getRandomHexColor 함수를 사용하여 색상을 얻으십시오. function getRandomHexColor ( ) {
return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
} div#boxes 정리하는 destroyBoxes() 함수를 작성하여 생성 된 모든 요소를 제거합니다.
