/Islamic-Website

Islamic website using HTML, CSS, JavaScript, REST API, MVC architectural pattern, clean code.

Primary LanguageJavaScript

Islamic Website

This is an Islamic website project developed using HTML, CSS, and JavaScript, a REST API, clean code, and the MVC architectural pattern. It is a responsive website that can be used on all devices. The website serves as a comprehensive online Muslim resource like (Holy Quran, Hijri Calendar, Ahadith, and Adhkar) You can visit the website here

Technologies and Techniques Used

  • HTML5 and its semantics
  • CSS3
    • with new CSS3 features like Flexbox, Grid, and selectors.
  • JavaScript
    • ES6 Features
    • DOM Manipulation and Traversal
    • DOM Events
    • DOM Storage
    • Modular JavaScript
    • Fetch API
    • Asynchronous Functions
    • Generative Functions
  • REST API
  • Clean Code Principles
    • DRY
    • KISS
    • YAGNI
    • Good Naming
    • Avoiding Callback Hell
    • Avoiding Deep Nesting
    • Avoiding Long Functions
    • Avoiding Long Parameter List
    • Avoiding Global Variables
    • Avoiding Using Flags as Function Parameters
  • MVC Pattern

Page Features

Common

  • There is a navbar on all pages that includes the following:

    • Home
    • Hijri Calendar
    • Holy Quran
    • Ahadith
    • Adhkar

  • There is a scroll-to-top button on all pages that appears when the user scrolls down the page.

  • There is a loading overlay that appears until the page is fully loaded.

Home Page

This website includes an overview of the website and a brief description of the website's pages, such as:

  • Hijri Calendar
  • Holy Quran
  • Ahadith
  • Adhkar

Hijri Calendar

Key features:

  • The Hijri Calendar page includes a calendar that shows the current Hijri day and its prayer timings.
  • The user can choose any month from any year to show its days as Hijri days in this month. showing each day as a card that includes Hijri Day, and Gregorian Day.
    • After clicking on any of these cards, a popup will appear that includes more information about this day, including the prayer timings for this day.
  • There is a loading spinner that appears until the Hijri days are fully loaded.

Holy Quran

This page includes the Holy Quran, which can be browsed by pages or surahs and can be played by audio. The Quran player has the following features:

  • The user can choose any surah from the drop-down list to get its page.
  • The surah name is in good style before the beginning of the surah.
  • The basmala SVG before the beginning of the surah (excluding Surat Al-Tawbah).
  • The number of each ayah beside it.
  • When hovering over any ayah, the ayah will be highlighted.
  • When clicking on any ayah, the ayah will be highlighted, the audio of this ayah will be played, and its tafsir will be shown.
  • The user can specify the audio of the ayah with various reciters.
  • After the audio of the current ayah finishes, the next ayah will be played automatically.
  • The user can move forward or backward between pages or use a dropdown list to choose any page.

Ahadith

This page includes a list of various Ahadith narrators.

key features:

  • Each narrator has a card, and after clicking on any of these cards, a range of his ahadith will be shown.
  • The user can load many Ahadith by clicking on the load more button.
  • In each case, a rage of ahadith (20) will be loaded.
  • There is a loading spinner that appears each time you click on the load more button until the range of Ahadith is fully loaded.

Adhkar

This page includes a list of various Adhkars.

Key features:

  • Each Adhkar has a card, and after clicking on any of these cards, the Adhkar will be shown.
  • In the Adhkar sections, there is a counter button that can be used to remind the user about the number of times he should read this Adhkar.
  • user can click on this counter button to decrease the counter number.