goit js hw 06

ภารกิจที่ 1

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 >

เขียนสคริปต์ที่:

1. มันจะคำนวณและนำจำนวนหมวดหมู่ไว้ใน ul#categories เช่นองค์ประกอบ li.item
2. สำหรับแต่ละองค์ประกอบของ li.item ใน ul#categories เขาจะค้นหาและนำข้อความของส่วนหัวองค์ประกอบ ( <h2> แท็ก) และจำนวนองค์ประกอบในหมวดหมู่ (ทั้งหมด <li> ลงทุนในนั้น)

เป็นผลให้ข้อความต่อไปนี้จะปรากฏในคอนโซล

Number of categories: 3

Category: Animals
Elements: 4

Category: Products
Elements: 3

Category: Technologies
Elements: 5

ภารกิจที่ 2

HTML มีรายการที่ว่างเปล่า ul#ingredients

 < ul id =" ingredients " > </ ul >

JavaScript มีอาร์เรย์ของแถว

 const ingredients = [
  'Potatoes' ,
  'Mushrooms' ,
  'Garlic' ,
  'Tomatos' ,
  'Herbs' ,
  'Condiments' ,
] ;

เขียนสคริปต์ที่สำหรับแต่ละองค์ประกอบของอาร์เรย์ ingredients :

1. จะสร้างองค์ประกอบแยกต่างหาก <li> ตรวจสอบให้แน่ใจว่าใช้ document.createElement() วิธีการ
2. จะเพิ่มชื่อของส่วนผสมเป็นเนื้อหาที่เป็นข้อความ
3. จะเพิ่มคลาส item
4. หลังจากนั้นให้แทรกทั้งหมด <li> สำหรับการดำเนินการหนึ่งรายการลงในรายการ ul.ingredients

ภารกิจ 3

เขียนสคริปต์เพื่อสร้างแกลเลอรี่รูปภาพตามอาร์เรย์ของข้อมูล HTML มีรายการ ul.gallery

 < ul class =" gallery " > </ ul >

ใช้อาร์เรย์ของวัตถุ images เพื่อสร้าง <img> รายการที่แทรกลงใน <li> ในการสร้างมาร์กอัปให้ใช้สายเทมเพลตและเมธอด insertAdjacentHTML()

• องค์ประกอบทั้งหมดของแกลเลอรี่ควรเพิ่มลงใน DOM สำหรับการผ่าตัดหนึ่งครั้ง
• เพิ่มการออกแบบที่น้อยที่สุดของแกลเลอรี่ด้วย flexboxes หรือแท่งผ่านคลาส CSS

 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' ,
  } ,
] ; 

ภารกิจที่ 4

ตัวนับประกอบด้วยช่วงและปุ่มซึ่งควรเพิ่มและลดมูลค่าลงหนึ่ง

 < 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

ภารกิจที่ 5

เขียนสคริปต์ที่เมื่อพิมพ์ในอินพุต 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 > 

ภารกิจที่ 6

เขียนสคริปต์ที่ตรวจสอบเนื้อหาเกี่ยวกับจำนวนอักขระที่ถูกต้องที่ป้อนเมื่อสูญเสียโฟกัส ( blur )

 < input
  type =" text "
  id =" validation-input "
  data-length =" 6 "
  placeholder =" Please enter 6 symbols "
/>

• จำนวน smils ควรอยู่ใน inuput มีการระบุไว้ในแอตทริบิวต์ของ data-length
• หากป้อนจำนวนอักขระที่ถูกต้อง border INUPUT จะกลายเป็นสีเขียวหากหมายเลขผิดเป็นสีแดง

ในการเพิ่มสไตล์ให้ใช้คลาส CSS valid และ invalid ซึ่งเราได้เพิ่มไปยังไฟล์เริ่มต้นของงานแล้ว

 # validation-input {
  border : 3 px solid # bdbdbd ;
}

# validation-input . valid {
  border-color : # 4caf50 ;
}

# validation-input . invalid {
  border-color : # f44336 ;
}

ภารกิจ 7

เขียนสคริปต์ที่ตอบสนองต่อการเปลี่ยนแปลงของ input#font-size-control และเปลี่ยนรูปแบบ input span#text อัปเดตคุณสมบัติของ font-size เป็นผลให้โดยการลากตัวเลื่อนขนาดของข้อความจะเปลี่ยนไป

 < input id =" font-size-control " type =" range " min =" 16 " max =" 96 " />
< br />
< span id =" text " > Abracadabra! </ span > 

ภารกิจ 8

เขียนสคริปต์ของแบบฟอร์มการเข้าสู่ระบบ

 < 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 >

1. form.login-form จะต้องดำเนินการตามเหตุการณ์ submit
2. หน้าไม่ควรรีสตาร์ทเมื่อส่งแบบฟอร์ม
3. หากมีฟิลด์ที่ไม่สำเร็จในรูปแบบเอาต์พุตจะ alert ถึงความจริงที่ว่าฟิลด์ทั้งหมดควรได้รับการเติมเต็ม
4. หากผู้ใช้กรอกข้อมูลทั้งหมดและส่งแบบฟอร์มให้รวบรวมค่าของฟิลด์ในวัตถุที่ชื่อฟิลด์จะเป็นชื่อคุณสมบัติและค่าของฟิลด์ - ค่าของคุณสมบัติ ใช้คุณสมบัติ elements เพื่อเข้าถึงองค์ประกอบแบบฟอร์ม
5. นำวัตถุออกมาด้วยข้อมูลที่ป้อนลงในคอนโซลและทำความสะอาดค่าของฟิลด์ของแบบฟอร์มโดย reset

ภารกิจ 9

เขียนสคริปต์ที่เปลี่ยนสีของพื้นหลังองค์ประกอบ <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 ) } ` ;
} 

ภารกิจ 10 (ไม่จำเป็น)

เขียนสคริปต์สำหรับการสร้างและทำความสะอาดคอลเลกชันขององค์ประกอบ ผู้ใช้ป้อนจำนวนรายการลงใน 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

1. ขนาดของ <div> ครั้งแรก - 30px โดย 30px
2. แต่ละองค์ประกอบหลังจากแรกควรกว้างขึ้นและสูงกว่าองค์ประกอบก่อนหน้านี้โดย 10px
3. องค์ประกอบทั้งหมดจะต้องมีสีพื้นหลังแบบสุ่มในรูปแบบ hex ใช้ฟังก์ชั่น getRandomHexColor พร้อมทำสี

 function getRandomHexColor ( ) {
  return `# ${ Math . floor ( Math . random ( ) * 16777215 ) . toString ( 16 ) } ` ;
}

สร้างฟังก์ชั่น destroyBoxes() ที่ทำความสะอาด div#boxes ดังนั้นจึงลบองค์ประกอบทั้งหมดที่สร้างขึ้น