goit js hw 06

Tugas 1

HTML berisi daftar 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 >

Tulis skrip yang:

1. Ini akan menghitung dan membawa ke konsol jumlah kategori dalam ul#categories , yaitu elemen li.item .
2. Untuk setiap elemen li.item dalam ul#categories , ia akan menemukan dan membawa teks header elemen (tag <h2> ) dan jumlah elemen dalam kategori (semua <li> diinvestasikan di dalamnya).

Akibatnya, pesan -pesan berikut akan ditampilkan di konsol.

Number of categories: 3

Category: Animals
Elements: 4

Category: Products
Elements: 3

Category: Technologies
Elements: 5

Tugas 2

HTML berisi Daftar Kosong ul#ingredients .

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

JavaScript berisi berbagai baris.

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

Tulis skrip yang untuk setiap elemen array ingredients :

1. Akan membuat elemen terpisah <li> . Pastikan untuk menggunakan metode document.createElement() .
2. Akan menambahkan nama bahan sebagai konten tekstual.
3. Akan menambahkan kelas item .
4. Setelah itu, masukkan semua <li> untuk satu operasi ke dalam daftar ul.ingredients .

Tugas 3

Tulis skrip untuk membuat galeri gambar berdasarkan array data. HTML berisi daftar ul.gallery .

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

Gunakan array objek images untuk membuat item <img> yang dimasukkan ke dalam <li> . Untuk membuat markup, gunakan garis template dan metode insertAdjacentHTML() .

• Semua elemen galeri harus ditambahkan ke DOM untuk satu operasi.
• Tambahkan desain minimal galeri dengan flexbox atau batang melalui kelas 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' ,
  } ,
] ; 

Tugas 4

Penghitung terdiri dari rentang dan tombol, yang harus meningkatkan dan mengurangi nilainya.

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

• Buat Variabel counterValue , yang akan menyimpan nilai meter saat ini dan menginisialisasi nilainya 0 .
• Tambahkan klik ke tombol di dalamnya yang menambah atau mengurangi penghitung.
• Perbarui antarmuka dengan nilai baru variabel counterValue .

Tugas 5

Tulis skrip yang, saat mengetikkan input input#name-input ( input ), mengganti nilai saat ini dalam span#name-output . Jika input kosong, rentang harus menampilkan baris "Anonymous" .

 < input type =" text " id =" name-input " placeholder =" Please enter your name " />
< h1 > Hello, < span id =" name-output " > Anonymous </ span > ! </ h1 > 

Tugas 6

Tulis skrip yang memeriksa isinya tentang jumlah karakter yang benar yang dimasukkan saat kehilangan fokus ( blur ).

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

• Berapa banyak Smil yang harus ada di Inuput, ditunjukkan dalam atributnya dari data-length .
• Jika jumlah karakter yang benar dimasukkan, border inuput menjadi hijau jika angka yang salah berwarna merah.

Untuk menambahkan gaya, gunakan kelas CSS valid dan invalid , yang telah kami tambahkan ke file awal tugas.

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

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

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

Tugas 7

Tulis skrip yang bereaksi terhadap perubahan input#font-size-control dan mengubah gaya input span#text , memperbarui properti font-size . Akibatnya, dengan menyeret slider, ukuran teks akan berubah.

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

Tugas 8

Tulis skrip formulir login.

 < 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 harus diproses sesuai dengan Acara submit .
2. Halaman tidak boleh dimulai ulang saat mengirim formulir.
3. Jika ada bidang yang tidak terisi dalam formulir, output alert terhadap fakta bahwa semua bidang harus diisi.
4. Jika pengguna telah mengisi semua bidang dan mengirim formulir, kumpulkan nilai -nilai bidang di objek di mana nama bidang akan menjadi nama properti dan nilai bidang - nilai properti. Gunakan properti elements untuk mengakses elemen formulir.
5. Keluarkan objek dengan data yang dimasukkan ke dalam konsol dan bersihkan nilai bidang formulir dengan reset .

Tugas 9

Tulis skrip yang span.color warna-warna latar belakang elemen <body> melalui inline klik pada button.change-color .

 < div class =" widget " >
  < p > Background color: < span class =" color " > - </ span > </ p >
  < button type =" button " class =" change-color " > Change color </ button >
</ div >

Gunakan getRandomHexColor untuk menghasilkan warna acak.

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

Tugas 10 (tidak diperlukan)

Tulis skrip untuk membuat dan membersihkan koleksi elemen. Pengguna memasukkan jumlah item ke dalam input dan klik tombol Створити , dan kemudian membuat koleksi. Mengklik tombol Очистити , koleksi elemen dibersihkan.

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

Buat fungsi createBoxes(amount) yang menerima satu parameter - angka. Fitur ini menciptakan <div> sebanyak yang ditunjukkan dalam amount dan menambahkannya ke div#boxes .

1. Dimensi <div> pertama - 30px dengan 30px.
2. Setiap elemen setelah yang pertama harus lebih luas dan lebih tinggi dari yang sebelumnya 10px.
3. Semua elemen harus memiliki warna latar belakang acak dalam format hex. Gunakan fungsi getRandomHexColor yang siap untuk mendapatkan warna.

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

Buat fungsi destroyBoxes() yang membersihkan div#boxes , sehingga menghapus semua elemen yang dibuat.