Merge pull request #36 from sadiul-hakim/main

Updated Quran App Included Arabic and audio
Jisan-mia · Apr 27, 2024 · 2b720c6 · 2b720c6
2 parents 6cff645 + 872e671
commit 2b720c6
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 13 deletions.
diff --git a/projects/Quran/app.js b/projects/Quran/app.js
@@ -4,6 +4,7 @@ const next_num = document.getElementById("next__btn");
 let ayat__list = document.getElementById("ayat__list");
 const title__eng = document.getElementById("title__eng");
 const title__arb = document.getElementById("title__arb");
+const language = document.getElementById("language");
 
 let surahNumber = surah_num.value;
 
@@ -33,35 +34,61 @@ next_num.onclick = async () => {
 }
 
 async function loadAndShow(number) {
-    let response = await fetch(`https://api.alquran.cloud/v1/surah/${number}/en.asad`);
-    let data = await response.json();
+
+    let lang = language.value;
+    let data;
+
+    if (lang === "eng") {
+        let engResponse = await fetch(`https://api.alquran.cloud/v1/surah/${number}/en.asad`);
+        data = await engResponse.json();
+    } else {
+        let engResponse = await fetch(`https://api.alquran.cloud/v1/surah/${number}/ar.alafasy`);
+        data = await engResponse.json();
+    }
 
     title__eng.innerText = data.data.englishName;
     title__arb.innerText = data.data.name;
 
-    showAyat(data.data)
+    showAyat(data.data, lang);
 }
 
-function showAyat(data) {
+function showAyat(data, lang) {
     let ayahs = data.ayahs;
 
     ayat__list.innerHTML = "";
 
     for (let i = 0; i < ayahs.length; i++) {
         let ayah = ayahs[i];
-        let tag = createLiTag("li", "ayah", ayah.number, ayah.text);
+        let tag = createLiTag("li", "ayah", ayah.text, ayah.number);
+
+        if (lang === "arb") {
+            let audioTag = createTag("audio", "");
+            audioTag.controls = true;
+            audioTag.classList.add("audio");
+
+            let sourceTag = createTag("source", "");
+            sourceTag.src = ayah.audio;
+            sourceTag.type = "audio/mp3";
+
+            audioTag.append(sourceTag);
+            tag.append(audioTag);
+        }
+
         ayat__list.append(tag);
     }
 }
 
-function createLiTag(name, className, number, content) {
-    let tag = createTag(name, className);
-    tag.innerText = `${number}. ${content}`;
-    return tag;
+function createLiTag(name, className, content, number) {
+    let liTag = createTag(name, className);
+    liTag.innerText = `${number}. ${content}`;
+    return liTag;
 }
 
 function createTag(name, className) {
     let tag = document.createElement(name);
-    tag.classList.add(className)
+
+    if (className.length !== 0) {
+        tag.classList.add(className)
+    }
     return tag;
 }
diff --git a/projects/Quran/index.html b/projects/Quran/index.html
@@ -14,6 +14,10 @@ <h1 class="title">
         </h1>
         <div class="action__area">
             <input type="number" name="surah_num" id="surah_num" value="1" placeholder="Surah Number (1-114)"/>
+            <select id="language">
+                <option value="eng">English</option>
+                <option value="arb">Arabic</option>
+            </select>
             <button class="load__btn" id="load__btn">Load</button>
             <button class="next__btn" id="next__btn">Next</button>
             <a href="./SurahList.html" class="load__btn">See Surahs</a>

diff --git a/projects/Quran/style.css b/projects/Quran/style.css
@@ -1,6 +1,6 @@
 :root {
     --primary-color: #003f35;
-    --secondary-color: rgba(123, 225, 208, 0.56);
+    --secondary-color: rgba(252, 252, 252, 0.56);
 }
 
 * {
@@ -12,7 +12,7 @@
 @font-face {
     font-family: "Overlook";
     src: url("./font/Overlock-Regular.ttf"),
-        url("./font/Overlock-Bold.ttf");
+    url("./font/Overlock-Bold.ttf");
 }
 
 body {
@@ -87,10 +87,28 @@ body {
 }
 
 .surah__list li:hover,
-.ayah:hover{
+.ayah:hover {
     background: var(--secondary-color);
 }
 
+.ayah:hover .audio{
+    display: inline-block;
+}
+
 a {
     text-decoration: none;
+}
+
+#language {
+    margin: 0 5px;
+    padding: 5px;
+    color: white;
+    background: var(--primary-color);
+    border: none;
+    border-radius: 4px;
+}
+
+.audio{
+    margin-left: 10px;
+    display: none;
 }