Bina Laman Web Akordion Soalan Lazim

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: aplikasi web Soalan Lazim Accordion. Projek ini sesuai untuk mereka yang ingin mencipta bahagian Soalan Lazim yang interaktif dan mesra pengguna untuk tapak web mereka. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript sambil membina komponen praktikal yang boleh digunakan dalam pelbagai aplikasi.

Gambaran Keseluruhan Projek

Soalan Lazim Akordion ialah aplikasi web yang direka untuk memaparkan soalan lazim dalam format yang boleh dikembangkan dan boleh dilipat. Dengan reka bentuk yang bersih dan moden, ia membolehkan pengguna mengklik pada soalan untuk mendedahkan jawapan yang sepadan. Projek ini mempamerkan cara membuat bahagian Soalan Lazim interaktif yang meningkatkan pengalaman pengguna dengan menjadikan kandungan mudah diakses.

Ciri-ciri

• Akordeon Interaktif: Pengguna boleh mengklik pada soalan untuk menogol keterlihatan jawapan, meningkatkan kebolehbacaan kandungan.
• Reka Bentuk Responsif: Aplikasi ini responsif sepenuhnya, memastikan pengalaman tontonan yang optimum pada kedua-dua peranti desktop dan mudah alih.
• Ikon Dinamik: Ikon berubah untuk menunjukkan sama ada jawapan dikembangkan atau diruntuhkan.

Teknologi yang Digunakan

• HTML: Menyediakan struktur untuk aplikasi Akordion Soalan Lazim.
• CSS: Menggayakan aplikasi untuk mencipta reka bentuk yang bersih dan responsif.
• JavaScript: Mengurus elemen interaktif, termasuk mengembangkan dan meruntuhkan jawapan dan menogol ikon.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

FAQ-Accordion/
├── index.html
├── style.css
└── script.js

• index.html: Mengandungi struktur HTML untuk aplikasi Akordion Soalan Lazim.
• style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
• script.js: Mengurus elemen interaktif, seperti mengembangkan dan meruntuhkan jawapan dan mengemas kini ikon.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

1. Klon repositori:
   

   git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git
   

2. Buka direktori projek:
   

   cd FAQ-Accordion
   

3. Jalankan projek:

   • Buka fail index.html dalam pelayar web untuk melihat aplikasi Akordion Soalan Lazim.

Penggunaan

1. Buka aplikasi dalam penyemak imbas web.
2. Klik pada soalan untuk menogol keterlihatan jawapan.
3. Kembangkan dan runtuhkan soalan yang berbeza untuk melihat jawapannya.
4. Kemas kini atau tambah soalan baharu mengikut keperluan.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur aplikasi Akordion Soalan Lazim, termasuk soalan dan jawapan. Berikut adalah coretan:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7FAQ accordion6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    7f673eaf394f0b5c3dca2aceb68a12d5
      ca5768eb787de1bcd21f5c4158b542b2
      8f9e4409b06fde1ff1d3a80f075ca0ed
        4a249f0d628e2318394fd9b75b4636b1
          FAQs
          a6d6d8732e7aab09e58fc20552ce9c66
            473be947d5c9cf409521472bde60f1a854bdf357c58b8a65c66d7c19c8e4d114
        473f0a7621bec819994bb5020d29372a
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Is Frontend Mentor free?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              Frontend Mentor offers realistic coding challenges to help
              developers improve their frontend coding skills with projects in
              HTML, CSS, and JavaScript. It's suitable for all levels and ideal
              for portfolio building.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              Yes, Frontend Mentor offers both free and premium coding
              challenges, with the free option providing access to a range of
              projects suitable for all skill levels.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              Yes, you can use projects completed on Frontend Mentor in your
              portfolio. It's an excellent way to showcase your skills to
              potential employers!
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
        d13b48bd4967f80660c6a04fe1b8824c
          17414f1b537c801ab0729a61553cc1ca
            684271ed9684bde649abda8831d4d355
              How can I get help if I'm stuck on a Frontend Mentor challenge?
            39528cedfa926ea0c01e69ef5b2ea9b0
            07e90b323838b387931d6dbf6680ca9e
              e5f2a86ab908242660e95bdf084ea432
            16b28748ea4df4d9c2150843fecfba68
          16b28748ea4df4d9c2150843fecfba68
          56c581cafed1e2f84ea91e1c5413333f
            e388a4556c0f65e1904146cc1a846bee
              The best place to get help is inside Frontend Mentor's Discord
              community. There's a help channel where you can ask questions and
              seek support from other community members.
            94b3e26ee717c64999d7867364b1b4a3
          16b28748ea4df4d9c2150843fecfba68
          231a563c997aa9e3e0ae614bd16728b0
        4d7ab0de9a42de71c682b0860bad1410
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68

  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

Fail style.css menggayakan aplikasi Akordion Soalan Lazim, memastikan ia menarik dan responsif secara visual. Di bawah ialah beberapa gaya utama:

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: hsl(275, 100%, 97%);

}

img {
  width: 100%;
  position: fixed;
}

.container {
  position: absolute;
}

.box {
  top: 100px;
  margin: 0 auto;
  background-color: hsl(0, 0%, 100%);
  max-width: 555px;
  position: relative;
  border-radius: 13px;
  padding: 20px;
}

.imageStar img {
  width: 36px;
  margin-left: 10px;
}

.section {
  padding: 5px;
}

.question {
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.answer {
  display: none;
  overflow: hidden;
  padding: 10px;
}

.answer.active {
  display: block;
}

.icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-img img {
  position: fixed;
  width: 19px;
}

@media (max-width: 700px) {
  .box {
    max-width: 500px;
  }
}

@media (max-width: 500px) {
  .box {
    max-width: 400px;
  }
}

JavaScript

Fail script.js mengandungi fungsi untuk mengembangkan dan meruntuhkan jawapan. Berikut ialah coretan untuk demonstrasi:

const questions = document.querySelectorAll(".question");

questions.forEach(question => {
  question.addEventListener("click", () => {
    const answer = question.nextElementSibling;
    const icon = question.querySelector(".icon-img img");

    // Toggle answer visibility
    answer.classList.toggle("active");

    // Change icon
    if (answer.classList.contains("active")) {
      icon.src = "./assets/images/icon-minus.svg";
    } else {
      icon.src = "./assets/images/icon-plus.svg";
    }
  });
});

Demo Langsung

Anda boleh melihat demo langsung projek Akordion Soalan Lazim di sini.

Kesimpulan

Membina aplikasi Akordion Soalan Lazim merupakan pengalaman yang menggembirakan dalam mencipta bahagian Soalan Lazim yang interaktif dan mesra pengguna. Projek ini menyerlahkan kepentingan penglibatan pengguna dan kebolehcapaian kandungan. Dengan menggunakan HTML, CSS dan JavaScript, kami telah membangunkan komponen yang meningkatkan pengalaman pengguna dengan membuat soalan lazim boleh diakses dengan mudah. Saya harap projek ini memberi inspirasi kepada anda untuk membina komponen interaktif anda sendiri. Selamat mengekod!

Kredit

Projek ini dibangunkan sebagai sebahagian daripada perjalanan pembelajaran berterusan saya dalam pembangunan web.

Pengarang

• Abhishek Gurjar
  • Profil GitHub

Atas ialah kandungan terperinci Bina Laman Web Akordion Soalan Lazim. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!