[01] - 02 - Key Features & How They Work 🚀

1. Page-by-Page Navigation 📖

• Users can easily move through all 604 pages of the Quran using Next and Previous buttons.

• The app keeps track of the current page and updates the content dynamically without reloading the page.

Example: Handling Next/Previous Button Clicks

changePage(direction) {
  this.currentPage += direction;
  this.updatePage();
}

---

2. Jump Directly to Any Page 🔢

• A convenient input box lets users enter a page number and jump straight to that page instantly.

• The app validates the input to make sure the page number is within the valid range (1 to 604).

Example: Validating and Jumping to a Page

jumpToPage() {
  const page = parseInt(this.pageInput.value, 10);
  if (page >= 1 && page <= QuranModel.maxPages) {
    this.currentPage = page;
    this.updatePage();
  } else {
    alert("Please enter a valid page number between 1 and 604.");
  }
}

---

3. Detailed Surah Information 🕌

• When viewing a page, detailed info about the Surah (chapter) is displayed, including:

  • Surah name in Arabic and English

  • English translation of the Surah name

  • Type of revelation (Meccan or Medinan)

  • Total number of Ayahs (verses) in the Surah

• It also shows which Juz and Hizb the page belongs to, helping readers track their progress.

Example: Displaying Surah Details

displaySurahDetails(surah, juz, hizb) {
  if (!surah) return;
  this.surahDetails.innerHTML = `
  <table>
    <tr>
      <td><span>${surah.englishName}</span></td>
      <td><span>${surah.englishNameTranslation}</span></td>
      <td><span>Type:</span> ${surah.revelationType}</td>
      <td><span>Total Ayahs: </span>${surah.numberOfAyahs}</td>
    </tr>
    <tr>
      <td colspan=2><span>Juz:</span> ${juz || "Unknown"}</td>
      <td colspan=2><span>Hizb:</span> ${Math.floor(hizb / 4)} ${hizb % 4}/4</td>
    </tr>
  </table>
  `;
}

---

4. Beautiful Arabic Text Styling ✨

• The Quran text is displayed using the authentic Uthmani script, styled with custom Arabic fonts for readability and tradition.

• Special markers like Ruku signs (۞) are highlighted for clarity.

Example: Formatting Ayah Text

text = text.replace(/۞/g, `<span class="ruku-marker">۞</span>`);
content += `<span class='ayah'>${text} <span class='ayah-number'>(${ayah.numberInSurah})</span></span>`;

---

5. Responsive Design 📱💻

• The app works smoothly on desktops, tablets, and mobile devices, ensuring easy access for everyone.

---

How It Works Behind the Scenes

• The app fetches Quran page data and Surah details dynamically from the AlQuran Cloud API.

• It uses JavaScript to update the page content and navigation elements in real-time based on user actions.

• The MVC structure helps keep the code clean and organized, making it easier to manage data and UI separately.