https://github.com/yousefkhalaf0/quran-app

Final Proj. of JS. course of ITI (Track: Front-End and Cross-Platform Mobile Development "4 months").
https://github.com/yousefkhalaf0/quran-app

api azkar bootstrap css frontend html js quran responsive website

Last synced: 3 months ago
JSON representation

Final Proj. of JS. course of ITI (Track: Front-End and Cross-Platform Mobile Development "4 months").

• Host: GitHub
• URL: https://github.com/yousefkhalaf0/quran-app
• Owner: yousefkhalaf0
• Created: 2024-12-31T15:35:53.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2025-01-20T00:36:22.000Z (5 months ago)
• Last Synced: 2025-02-01T10:18:09.071Z (5 months ago)
• Topics: api, azkar, bootstrap, css, frontend, html, js, quran, responsive, website
• Language: HTML
• Homepage:
• Size: 4.65 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# **Quran & Azkar Web Application**

## **Overview**

This project is a comprehensive **Quran & Azkar Web Application** designed to provide users with access to:

- The full Quran with **Arabic and English text**.

- **Audio recitations** of the Quran by multiple renowned Sheikhs (in Arabic only).

- A **search feature** to quickly find any Surah.

- **Prayer times** based on the user’s location.

- The ability to view content for a specific **Juz' (Part)** of the Quran.

This application was developed as the **final project** for the **JavaScript Course** at **ITI**.

---

## **Features**

- **Surah Text**:

  - View Quranic Surahs in **Arabic** and their **English translations**.

- **Audio Playback**:

  - Listen to the Quran recited by multiple Sheikhs (Arabic only).

- **Search Functionality**:

  - Easily search for specific Surahs by name or number.

- **Prayer Times**:

  - Display accurate daily prayer times.

- **Juz’ Selection**:

  - Select and view content for a specific Quranic Juz’.

---

## **Technologies Used**

- **HTML5**

- **CSS3**

- **JavaScript**

- **Bootstrap**

- **Quran API**

---

## **Collaborators**

This project was collaboratively developed by:

- **Yousef Khalaf** ([GitHub: yousefkhalaf0](https://github.com/yousefkhalaf0))

- **Mahmoud Hassan** ([GitHub: Mahm0ud-HassaN](https://github.com/Mahm0ud-HassaN))

- **Hagar Saad** ([GitHub: HagarSaad12](https://github.com/HagarSaad12))

---

## **How to Use**

1. Open the web application in your browser.

2. Use the **search bar** to find a Surah.

3. Select a Surah to view its text in Arabic and English.

4. Play the audio recitation (Arabic only) from the **audio player**.

5. Check **prayer times** for your location.

6. Navigate to a specific Juz’ using the Juz' selection feature.

---

## **Screenshots**

![image](https://github.com/user-attachments/assets/3997eaeb-1763-45f1-b313-db4c41c542f5)

![image](https://github.com/user-attachments/assets/bdb01590-7e3c-4050-8641-1d48530669a4)

![image](https://github.com/user-attachments/assets/b70d84f2-b935-4aa7-9db9-730246b2cf9e)

![image](https://github.com/user-attachments/assets/c259b4d7-1f65-44ca-945c-2fe0414313bb)

![image](https://github.com/user-attachments/assets/062792ae-74ea-4a16-b2e3-742f8201f87e)

![image](https://github.com/user-attachments/assets/9812f6a6-a607-4115-be07-ab9c628994fd)

![image](https://github.com/user-attachments/assets/e411954c-1e73-4c87-8bd3-435b5d60d0c8)

![image](https://github.com/user-attachments/assets/5f75a4c2-2872-4c1b-aa3d-1bb63e97cd25)

![image](https://github.com/user-attachments/assets/01abba0f-ea4c-4236-9da7-47145852bdfd)

![image](https://github.com/user-attachments/assets/cc5d29c0-1ff1-45fc-8278-40191a04fac9)

---

## **Future Enhancements**

- Add translations in more languages.

- Include audio recitations with translations.

- Offline functionality for Quran text and audio.

---

## **License**

This project is open-source and available under the [MIT License](https://opensource.org/licenses/MIT).