Di bawah gambar kami menempatkan daftar kosong berurutan dengan “adventDoors” pemilih id yang akan diisi oleh skrip. Jika pengguna tidak mengaktifkan JavaScript di browser mereka, mereka hanya akan melihat gambar Natal sederhana.

            
 
Kalender Advent
  
 
     

Langkah 3 - Isi “Pesan” Array

Kami membutuhkan 24 kutipan Natal untuk mengisi “pesan” array Saya memilih milik saya dari GoodReads.

Buka skrip / messages.js mengajukan; kami akan menempatkan tanda kutip di sini untuk memisahkannya dari fungsi. Itu pesan array adalah array di dalam array, setiap elemen dari array luar berisi array lain dengan dua elemen: kutipan, dan pengarangnya.

Isi array dengan kutipan favorit Anda berdasarkan sintaks berikut:

 var messages = [["Kutipan 1", "Penulis 1"], ["Kutipan 2", "Penulis 2"], ... ["Kutipan 24", "Penulis 24"]];

Langkah 4 - Tambahkan Gaya CSS Dasar untuk Pintu

Untuk membuat gaya CSS yang diperlukan untuk pintu kita perlu membayangkan desain akhir, karena pintu itu sendiri akan dibuat dengan JavaScript pada langkah-langkah berikut.

Kita perlu membuat 4 kolom dan 6 baris persegi panjang dalam perataan yang tepat. Untuk ini, kita akan menggunakan posisi: relatif dan posisi: absolut Aturan CSS. Karena posisi yang tepat akan berubah dari pintu ke pintu, kami akan menambahkan teratas, bawah, kiri, dan kanan properti di JavaScript, di CSS kita hanya perlu menambahkan posisi relatif ke wadah (daftar unordered dalam HTML), dan posisi absolut untuk elemen daftar (mereka akan ditambahkan dalam JS juga).

Hal penting lainnya dalam file stylesheet adalah buat desain yang berbeda untuk penyandang cacat dan negara yang diaktifkan. Itu .cacat pemilih akan ditambahkan ke dinonaktifkan oleh JavaScript.

Untuk Kalender demo saya, saya menetapkan batas putih solid dan font putih untuk pintu yang diaktifkan dengan latar belakang putih transparan saat melayang; dan perbatasan lampu hijau, dan font, dan latar belakang lampu hijau transparan untuk yang dinonaktifkan. Jika Anda tidak menyukai desain ini, Anda dapat mengubah warna dan gaya sesuai keinginan Anda.

Masukkan kode berikut (atau aturan gaya Anda yang dimodifikasi) ke dalam style.css mengajukan.

 ul # adventDoors position: relative; daftar-gaya: tidak ada; bantalan: 0; margin: 0;  #adventDoors li position: absolute;  #adventDoors li a color: #fff; lebar: 100%; tinggi: 100%; ukuran font: 24px; perataan teks: tengah; display: flex; arah fleksibel: kolom; justify-content: center; teks-dekorasi: tidak ada; perbatasan: 1px #fff solid;  #adventDoors li a: not (.disabled): hover color: #fff; warna latar belakang: transparan; background-color: rgba (255.255.255,0.15);  #adventDoors li a.disabled border-color: # b6fe98; background-color: rgba (196.254.171,0.15); warna: # b6fe98; kursor: default; 

Langkah 5 - Buat Variabel Global

Dari langkah ini, kami hanya akan bekerja dengan skrip / calendar.js file, jadi sekarang mari kita buka ini. Kalender Advent kami akan menggunakan dua variabel global.

Itu myCal variabel memegang gambar Kalender sebagai objek JS. Gambar sudah ditambahkan ke index.html file di Langkah 2. Kami akan menempatkan pintu ke gambar ini di Langkah 7. Kami menangkap HTML terkait elemen ditandai dengan “adventCal” identifier dengan menggunakan metode DOM getElementById (). Itu myCal variabel akan menjadi objek DOM HTMLImageElement.

Itu tanggal sekarang variabel memegang tanggal saat ini sehingga skrip kami dapat dengan mudah memutuskan apakah pintu harus diaktifkan atau dinonaktifkan. Untuk membuat tanggal sekarang kami instantiate objek baru dari kelas JavaScript Tanggal.

Masukkan potongan kode berikut ke atas Anda calendar.js mengajukan.

 var myCal = document.getElementById ("adventCal"); var currentDate = Tanggal baru ();

Langkah 6 - Buat “Pintu” Kelas

Karena kita membutuhkan 24 pintu, cara paling mudah untuk melakukan ini adalah dengan membuat a “Pintu” kelas, dan kemudian instantiate 24 kali.

Kelas Door kami memiliki dua parameter, kalender dan hari. Untuk kalender parameter kita harus melewati gambar Natal yang akan berfungsi sebagai latar belakang. Untuk hari parameter kita harus melewati hari Desember dalam bentuk integer.

Kami akan melewati nilai yang tepat dari parameter pada langkah terakhir (Langkah 8), selama instantiasi objek 24 Pintu.

Kami akan membuat 5 properti dan 1 metode untuk kelas Door. Pada Langkah ini kita hanya akan membahas 5 properti, dan saya akan menjelaskan konten () metode pada Langkah selanjutnya.

Itu “lebar” & “tinggi” properti

Itu lebar dan tinggi properti secara dinamis menghitung lebar dan tinggi setiap pintu individu (yang berubah sesuai dengan lebar dan tinggi gambar latar belakang).

Pengganda 0,1 dan 0,95 berada dalam persamaan untuk menyisakan ruang untuk margin, antara setiap pintu, dan di sekitar sisi-sisi Kalender, juga.

Itu “adventMessage” milik

Itu adventMessage properti menyimpan konten pesan peringatan, yaitu kutipan dan penulis yang cocok yang kami miliki messages.js file memegang. Itu adventMessage properti mengambil penawaran dan penulis dari pesan [] array, tergantung pada tanggal saat ini.

Untuk 1 Des adventMessage properti mengambil elemen pertama dari array luar yaitu pesan [0], karena array berbasis nol di JavaScript.

Untuk alasan yang sama, penawaran untuk 1 Desember diposisikan sebagai pesan [0] [0] (elemen pertama dari array dalam), dan penulis yang cocok dapat dihubungi sebagai pesan [0] [1] (elemen kedua dari array dalam).

Itu “x”&”y” properti

Properti x dan y tahan posisi yang tepat dari setiap pintu yang akan kita gunakan pada langkah berikutnya untuk mengatur teratas dan kiri Properti CSS. Ini akan melengkapi posisi: relatif dan posisi: absolut Aturan CSS yang kami tetapkan di Langkah 4 untuk wadah pintu (ul # adventDoors), dan pintu itu sendiri (#adventDoors li). Perhitungannya mungkin terlihat agak mengintimidasi, tetapi mari kita telusuri lebih dalam.

Itu x properti akan digunakan oleh kiri Properti pemosisian CSS di Langkah berikutnya (Langkah 7). Ini menentukan dalam piksel di mana Pintu individu harus ditempatkan pada sumbu x.

Dibutuhkan lebar gambar latar belakang, dan menyisakan sedikit margin untuknya (4%). Kemudian dengan bantuan operator sisanya, ia menilai di kolom mana ia akan ditempatkan (ingat, akan ada 4 kolom), dan akhirnya menambahkan sedikit (10%) margin untuk setiap Pintu individu dengan menggunakan pengali 1,1.

Dengan cara yang sama, y properti akan digunakan oleh teratas Properti penentuan posisi CSS, dan juga menentukan dalam piksel di mana Pintu individual harus ditempatkan pada sumbu y.

Kami mengambil ketinggian gambar latar belakang dengan bantuan properti ketinggian yang dilewati kalender parameter (yang menampung objek-DOM), dan meninggalkan margin 4% di sekitar sisi vertikal Kalender.

Kemudian, dengan bantuan metode Math.floor () kita menghitung di baris mana objek Door akan diberikan (akan ada 6 baris).

Akhirnya kami menambahkan margin 10% untuk setiap objek Pintu dengan mengalikan ketinggiannya menggunakan pengali 1,1.

 function Door (kalender, hari) this.width = ((calendar.width - 0.1 * calendar.width) / 4) * 0.95; this.height = ((calendar.height - 0.1 * calendar.height) / 6) * 0.95; this.adventMessage = 'Hari' + hari + 'dari Advent \ n \ n' + '"' + pesan [hari - 1] [0] + '" \ n \ n \ t' + 'oleh' + pesan [hari - 1] [1] + '\ n \ n'; this.x = (0,04 * calendar.width + ((hari - 1)% 4) * (1.1 * this.width)); this.y = - (0.96 * calendar.height - Math.floor ((hari - 1) / 4) * (1.1 * this.height)); this.content = function () ...; 

Langkah 7 - Isi “Konten ()” metode

Ini adalah konten () metode yang akan menampilkan pintu kami di browser. Pertama-tama, kita membuat simpul DOM baru dengan bantuan variabel simpul yang akan membuat

 this.content = function () var node = document.createElement ("li"); document.getElementById ("adventDoors"). appendChild (node); node.id = "pintu" + hari; node.style.cssText = "width:" + this.width + "px; height:" + this.height + "px; top:" + this.y + "px; kiri:" + this.x + "px ; "; var innerNode = document.createElement ("a"); document.getElementById ("door" + day) .appendChild (innerNode); innerNode.innerHTML = hari; innerNode.href = "#"; if ((currentDate.getMonth () + 1) < 12 || currentDate.getDate() < day )  innerNode.className = "disabled"; innerNode.onclick = function()  return false;   else  var adventMessage = this.adventMessage; innerNode.onclick = function()  alert(adventMessage); return false;   ;

 (function () var doors = []; for (var i = 0; i < 24; i++)  doors[i] = new Door(myCal, i + 1); doors[i].content();  return doors; )();