added arabic names for surahs

khaledmk20 · Apr 11, 2024 · fcb5933 · fcb5933
1 parent cbaebcb
commit fcb5933
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 123 deletions.
diff --git a/index.html b/index.html
@@ -108,7 +108,7 @@
       <div class="img-container">
         <img src="img/Quran.jpg" alt="album art" />
       </div>
-      <h2 id="title">Al-Fatiha</h2>
+      <h2 id="title">Al-Fatiha - الفاتحة</h2>
       <h3 id="artist">Abdul Basit 'Abd us-Samad</h3>
       <audio src=""></audio>
       <!-- progress -->

diff --git a/script.js b/script.js
@@ -27,10 +27,10 @@ let surahNumber = 1;
 let clickedSurah;
 
 const getSurah = async function (surah) {
-  clickedSurah = surah.target.innerText;
+  clickedSurah = surah.target.innerText.split(" - ")[0];
   surahNumber = suras.find((s) => s.name === clickedSurah).number;
-  const { name } = suras[surahNumber - 1];
-  title.textContent = name;
+  const { name, arabicName } = suras[surahNumber - 1];
+  title.textContent = `${name} - ${arabicName}`;
   const data = await fetch(
     `https://api.quran.com/api/v4/chapter_recitations/${reciterNumber}/${surahNumber}`
   );
@@ -59,7 +59,7 @@ showListButton.addEventListener("click", () => {
 
   suras.forEach((sura) => {
     const listItem = document.createElement("li");
-    listItem.textContent = sura.name;
+    listItem.textContent = `${sura.name} - ${sura.arabicName}`;
     listItem.addEventListener("click", getSurah);
     surasList.appendChild(listItem);
   });
@@ -94,8 +94,8 @@ const prevSong = async function () {
   if (surahNumber <= 0) {
     surahNumber = suras.length;
   }
-  const { name } = suras[surahNumber - 1];
-  title.textContent = name;
+  const { name, arabicName } = suras[surahNumber - 1];
+  title.textContent = `${name} - ${arabicName}`;
   const data = await fetch(
     `https://api.quran.com/api/v4/chapter_recitations/${reciterNumber}/${surahNumber}`
   );
@@ -113,8 +113,8 @@ const nextSong = async function () {
   if (surahNumber > suras.length - 1) {
     surahNumber = 0;
   }
-  const { name } = suras[surahNumber];
-  title.textContent = name;
+  const { name, arabicName } = suras[surahNumber];
+  title.textContent = `${name} - ${arabicName}`;
   const data = await fetch(
     `https://api.quran.com/api/v4/chapter_recitations/${reciterNumber}/${
       surahNumber + 1

diff --git a/surahsList.js b/surahsList.js
@@ -1,118 +1,118 @@
 const suras = [
-  { name: "Al-Fatiha", number: 1 },
-  { name: "Al-Baqara", number: 2 },
-  { name: "Aal 'Imran", number: 3 },
-  { name: "An-Nisa'", number: 4 },
-  { name: "Al-Ma'idah", number: 5 },
-  { name: "Al-An'am", number: 6 },
-  { name: "Al-A'raf", number: 7 },
-  { name: "Al-Anfal", number: 8 },
-  { name: "At-Tawbah", number: 9 },
-  { name: "Yunus", number: 10 },
-  { name: "Hud", number: 11 },
-  { name: "Yusuf", number: 12 },
-  { name: "Ar-Ra'd", number: 13 },
-  { name: "Ibrahim", number: 14 },
-  { name: "Al-Hijr", number: 15 },
-  { name: "An-Nahl", number: 16 },
-  { name: "Al-Isra'", number: 17 },
-  { name: "Al-Kahf", number: 18 },
-  { name: "Maryam", number: 19 },
-  { name: "Ta-Ha", number: 20 },
-  { name: "Al-Anbiya'", number: 21 },
-  { name: "Al-Hajj", number: 22 },
-  { name: "Al-Mu'minun", number: 23 },
-  { name: "An-Nur", number: 24 },
-  { name: "Al-Furqan", number: 25 },
-  { name: "Ash-Shu'ara'", number: 26 },
-  { name: "An-Naml", number: 27 },
-  { name: "Al-Qasas", number: 28 },
-  { name: "Al-Ankabut", number: 29 },
-  { name: "Ar-Rum", number: 30 },
-  { name: "Luqman", number: 31 },
-  { name: "As-Sajdah", number: 32 },
-  { name: "Al-Ahzab", number: 33 },
-  { name: "Saba'", number: 34 },
-  { name: "Fatir", number: 35 },
-  { name: "Ya-Sin", number: 36 },
-  { name: "As-Saffat", number: 37 },
-  { name: "Sad", number: 38 },
-  { name: "Az-Zumar", number: 39 },
-  { name: "Ghafir", number: 40 },
-  { name: "Fussilat", number: 41 },
-  { name: "Ash-Shura", number: 42 },
-  { name: "Az-Zukhruf", number: 43 },
-  { name: "Ad-Dukhan", number: 44 },
-  { name: "Al-Jathiyah", number: 45 },
-  { name: "Al-Ahqaf", number: 46 },
-  { name: "Muhammad", number: 47 },
-  { name: "Al-Fath", number: 48 },
-  { name: "Al-Hujurat", number: 49 },
-  { name: "Qaf", number: 50 },
-  { name: "Adh-Dhariyat", number: 51 },
-  { name: "At-Tur", number: 52 },
-  { name: "An-Najm", number: 53 },
-  { name: "Al-Qamar", number: 54 },
-  { name: "Ar-Rahman", number: 55 },
-  { name: "Al-Waqi'ah", number: 56 },
-  { name: "Al-Hadid", number: 57 },
-  { name: "Al-Mujadilah", number: 58 },
-  { name: "Al-Hashr", number: 59 },
-  { name: "Al-Mumtahanah", number: 60 },
-  { name: "As-Saff", number: 61 },
-  { name: "Al-Jumu'ah", number: 62 },
-  { name: "Al-Munafiqun", number: 63 },
-  { name: "At-Taghabun", number: 64 },
-  { name: "At-Talaq", number: 65 },
-  { name: "At-Tahrim", number: 66 },
-  { name: "Al-Mulk", number: 67 },
-  { name: "Al-Qalam", number: 68 },
-  { name: "Al-Haqqah", number: 69 },
-  { name: "Al-Ma'arij", number: 70 },
-  { name: "Nuh", number: 71 },
-  { name: "Al-Jinn", number: 72 },
-  { name: "Al-Muzzammil", number: 73 },
-  { name: "Al-Muddaththir", number: 74 },
-  { name: "Al-Qiyamah", number: 75 },
-  { name: "Al-Insan", number: 76 },
-  { name: "Al-Mursalat", number: 77 },
-  { name: "An-Naba'", number: 78 },
-  { name: "An-Nazi'at", number: 79 },
-  { name: "Abasa", number: 80 },
-  { name: "At-Takwir", number: 81 },
-  { name: "Al-Infitar", number: 82 },
-  { name: "Al-Mutaffifin", number: 83 },
-  { name: "Al-Inshiqaq", number: 84 },
-  { name: "Al-Buruj", number: 85 },
-  { name: "At-Tariq", number: 86 },
-  { name: "Al-A'la", number: 87 },
-  { name: "Al-Ghashiyah", number: 88 },
-  { name: "Al-Fajr", number: 89 },
-  { name: "Al-Balad", number: 90 },
-  { name: "Ash-Shams", number: 91 },
-  { name: "Al-Lail", number: 92 },
-  { name: "Ad-Duha", number: 93 },
-  { name: "Ash-Sharh", number: 94 },
-  { name: "At-Tin", number: 95 },
-  { name: "Al-'Alaq", number: 96 },
-  { name: "Al-Qadr", number: 97 },
-  { name: "Al-Bayyinah", number: 98 },
-  { name: "Az-Zalzalah", number: 99 },
-  { name: "Al-'Adiyat", number: 100 },
-  { name: "Al-Qari'ah", number: 101 },
-  { name: "At-Takathur", number: 102 },
-  { name: "Al-'Asr", number: 103 },
-  { name: "Al-Humazah", number: 104 },
-  { name: "Al-Fil", number: 105 },
-  { name: "Quraysh", number: 106 },
-  { name: "Al-Ma'un", number: 107 },
-  { name: "Al-Kawthar", number: 108 },
-  { name: "Al-Kafirun", number: 109 },
-  { name: "An-Nasr", number: 110 },
-  { name: "Al-Masad", number: 111 },
-  { name: "Al-Ikhlas", number: 112 },
-  { name: "Al-Falaq", number: 113 },
-  { name: "An-Nas", number: 114 },
+  { name: "Al-Fatiha", arabicName: "الفاتحة", number: 1 },
+  { name: "Al-Baqara", arabicName: "البقرة", number: 2 },
+  { name: "Aal 'Imran", arabicName: "آل عمران", number: 3 },
+  { name: "An-Nisa'", arabicName: "النساء", number: 4 },
+  { name: "Al-Ma'idah", arabicName: "المائدة", number: 5 },
+  { name: "Al-An'am", arabicName: "الأنعام", number: 6 },
+  { name: "Al-A'raf", arabicName: "الأعراف", number: 7 },
+  { name: "Al-Anfal", arabicName: "الأنفال", number: 8 },
+  { name: "At-Tawbah", arabicName: "التوبة", number: 9 },
+  { name: "Yunus", arabicName: "يونس", number: 10 },
+  { name: "Hud", arabicName: "هود", number: 11 },
+  { name: "Yusuf", arabicName: "يوسف", number: 12 },
+  { name: "Ar-Ra'd", arabicName: "الرعد", number: 13 },
+  { name: "Ibrahim", arabicName: "إبراهيم", number: 14 },
+  { name: "Al-Hijr", arabicName: "الحجر", number: 15 },
+  { name: "An-Nahl", arabicName: "النحل", number: 16 },
+  { name: "Al-Isra'", arabicName: "الإسراء", number: 17 },
+  { name: "Al-Kahf", arabicName: "الكهف", number: 18 },
+  { name: "Maryam", arabicName: "مريم", number: 19 },
+  { name: "Ta-Ha", arabicName: "طه", number: 20 },
+  { name: "Al-Anbiya'", arabicName: "الأنبياء", number: 21 },
+  { name: "Al-Hajj", arabicName: "الحج", number: 22 },
+  { name: "Al-Mu'minun", arabicName: "المؤمنون", number: 23 },
+  { name: "An-Nur", arabicName: "النور", number: 24 },
+  { name: "Al-Furqan", arabicName: "الفرقان", number: 25 },
+  { name: "Ash-Shu'ara'", arabicName: "الشعراء", number: 26 },
+  { name: "An-Naml", arabicName: "النمل", number: 27 },
+  { name: "Al-Qasas", arabicName: "القصص", number: 28 },
+  { name: "Al-Ankabut", arabicName: "العنكبوت", number: 29 },
+  { name: "Ar-Rum", arabicName: "الروم", number: 30 },
+  { name: "Luqman", arabicName: "لقمان", number: 31 },
+  { name: "As-Sajdah", arabicName: "السجدة", number: 32 },
+  { name: "Al-Ahzab", arabicName: "الأحزاب", number: 33 },
+  { name: "Saba'", arabicName: "سبإ", number: 34 },
+  { name: "Fatir", arabicName: "فاطر", number: 35 },
+  { name: "Ya-Sin", arabicName: "يس", number: 36 },
+  { name: "As-Saffat", arabicName: "الصافات", number: 37 },
+  { name: "Sad", arabicName: "ص", number: 38 },
+  { name: "Az-Zumar", arabicName: "الزمر", number: 39 },
+  { name: "Ghafir", arabicName: "غافر", number: 40 },
+  { name: "Fussilat", arabicName: "فصلت", number: 41 },
+  { name: "Ash-Shura", arabicName: "الشورى", number: 42 },
+  { name: "Az-Zukhruf", arabicName: "الزخرف", number: 43 },
+  { name: "Ad-Dukhan", arabicName: "الدخان", number: 44 },
+  { name: "Al-Jathiyah", arabicName: "الجاثية", number: 45 },
+  { name: "Al-Ahqaf", arabicName: "الأحقاف", number: 46 },
+  { name: "Muhammad", arabicName: "محمد", number: 47 },
+  { name: "Al-Fath", arabicName: "الفتح", number: 48 },
+  { name: "Al-Hujurat", arabicName: "الحجرات", number: 49 },
+  { name: "Qaf", arabicName: "ق", number: 50 },
+  { name: "Adh-Dhariyat", arabicName: "الذاريات", number: 51 },
+  { name: "At-Tur", arabicName: "الطور", number: 52 },
+  { name: "An-Najm", arabicName: "النجم", number: 53 },
+  { name: "Al-Qamar", arabicName: "القمر", number: 54 },
+  { name: "Ar-Rahman", arabicName: "الرحمن", number: 55 },
+  { name: "Al-Waqi'ah", arabicName: "الواقعة", number: 56 },
+  { name: "Al-Hadid", arabicName: "الحديد", number: 57 },
+  { name: "Al-Mujadilah", arabicName: "المجادلة", number: 58 },
+  { name: "Al-Hashr", arabicName: "الحشر", number: 59 },
+  { name: "Al-Mumtahanah", arabicName: "الممتحنة", number: 60 },
+  { name: "As-Saff", arabicName: "الصف", number: 61 },
+  { name: "Al-Jumu'ah", arabicName: "الجمعة", number: 62 },
+  { name: "Al-Munafiqun", arabicName: "المنافقون", number: 63 },
+  { name: "At-Taghabun", arabicName: "التغابن", number: 64 },
+  { name: "At-Talaq", arabicName: "الطلاق", number: 65 },
+  { name: "At-Tahrim", arabicName: "التحريم", number: 66 },
+  { name: "Al-Mulk", arabicName: "الملك", number: 67 },
+  { name: "Al-Qalam", arabicName: "القلم", number: 68 },
+  { name: "Al-Haqqah", arabicName: "الحاقة", number: 69 },
+  { name: "Al-Ma'arij", arabicName: "المعارج", number: 70 },
+  { name: "Nuh", arabicName: "نوح", number: 71 },
+  { name: "Al-Jinn", arabicName: "الجن", number: 72 },
+  { name: "Al-Muzzammil", arabicName: "المزمل", number: 73 },
+  { name: "Al-Muddaththir", arabicName: "المدثر", number: 74 },
+  { name: "Al-Qiyamah", arabicName: "القيامة", number: 75 },
+  { name: "Al-Insan", arabicName: "الإنسان", number: 76 },
+  { name: "Al-Mursalat", arabicName: "المرسلات", number: 77 },
+  { name: "An-Naba'", arabicName: "النبأ", number: 78 },
+  { name: "An-Nazi'at", arabicName: "النازعات", number: 79 },
+  { name: "Abasa", arabicName: "عبس", number: 80 },
+  { name: "At-Takwir", arabicName: "التكوير", number: 81 },
+  { name: "Al-Infitar", arabicName: "الإنفطار", number: 82 },
+  { name: "Al-Mutaffifin", arabicName: "المطففين", number: 83 },
+  { name: "Al-Inshiqaq", arabicName: "الإنشقاق", number: 84 },
+  { name: "Al-Buruj", arabicName: "البروج", number: 85 },
+  { name: "At-Tariq", arabicName: "الطارق", number: 86 },
+  { name: "Al-A'la", arabicName: "الأعلى", number: 87 },
+  { name: "Al-Ghashiyah", arabicName: "الغاشية", number: 88 },
+  { name: "Al-Fajr", arabicName: "الفجر", number: 89 },
+  { name: "Al-Balad", arabicName: "البلد", number: 90 },
+  { name: "Ash-Shams", arabicName: "الشمس", number: 91 },
+  { name: "Al-Lail", arabicName: "الليل", number: 92 },
+  { name: "Ad-Duha", arabicName: "الضحى", number: 93 },
+  { name: "Ash-Sharh", arabicName: "الشرح", number: 94 },
+  { name: "At-Tin", arabicName: "التين", number: 95 },
+  { name: "Al-'Alaq", arabicName: "العلق", number: 96 },
+  { name: "Al-Qadr", arabicName: "القدر", number: 97 },
+  { name: "Al-Bayyinah", arabicName: "البينة", number: 98 },
+  { name: "Az-Zalzalah", arabicName: "الزلزلة", number: 99 },
+  { name: "Al-'Adiyat", arabicName: "العاديات", number: 100 },
+  { name: "Al-Qari'ah", arabicName: "القارعة", number: 101 },
+  { name: "At-Takathur", arabicName: "التكاثر", number: 102 },
+  { name: "Al-'Asr", arabicName: "العصر", number: 103 },
+  { name: "Al-Humazah", arabicName: "الهمزة", number: 104 },
+  { name: "Al-Fil", arabicName: "الفيل", number: 105 },
+  { name: "Quraysh", arabicName: "قريش", number: 106 },
+  { name: "Al-Ma'un", arabicName: "الماعون", number: 107 },
+  { name: "Al-Kawthar", arabicName: "الكوثر", number: 108 },
+  { name: "Al-Kafirun", arabicName: "الكافرون", number: 109 },
+  { name: "An-Nasr", arabicName: "النصر", number: 110 },
+  { name: "Al-Masad", arabicName: "المسد", number: 111 },
+  { name: "Al-Ikhlas", arabicName: "الإخلاص", number: 112 },
+  { name: "Al-Falaq", arabicName: "الفلق", number: 113 },
+  { name: "An-Nas", arabicName: "الناس", number: 114 },
 ];
 
 export default suras;