🚀 Production Ready !

README.md

@@ -25,6 +25,8 @@ bun dev
 ## Tech Stack
 
 - Astro
+- Bootstrap
+- Netlify
 
 ## How to support?
 
@@ -34,9 +36,9 @@ bun dev
 
 ## Resources
 
-- [Quran](https://github.com/marwanzayed-coder/quran/)
-- [Azkar](https://github.com/osamayy/azkar-db)
-- [Quran API](/src/data/quran.json)
+- [Quran & Azkar](https://github.com/marwanzayed-coder/quran/)
+- [Azkar DB](https://github.com/osamayy/azkar-db)
+- [Quran DB](/src/data/quran.json)
 
 ## License
 

src/components/zkr-btn.astro

@@ -0,0 +1,25 @@
+---
+export interface Props {
+  count: number
+}
+const {count=3} = Astro.props
+---
+<button>
+  Remaining itterations:
+  <span class="btnCount">{count}</span>
+</button>
+
+<script>
+  const countEl = document.querySelector(".btnCount") as HTMLElement
+  const getCount = () => +countEl.innerText
+  const setCount = (n: number|string) => countEl.innerText = `${n}`
+  const btn = document.querySelector('button') as HTMLElement
+
+  btn.onclick = () => {
+    const count = getCount()
+    count > 0  && setCount(count - 1)
+    if (count <=0)
+      btn.classList.add('done')
+  }
+
+</script>

src/pages/404.astro

@@ -1,7 +1,7 @@
 ---
 import Base from "@/layouts/base.astro";
 ---
-<Base >
+<Base title="Page not Found | Adhkar">
   <div
     class="container text-center page-not-found d-flex justify-content-center align-items-center flex-column"
   >

src/pages/evening.astro

@@ -1,35 +1,32 @@
 ---
 import Base from "@/layouts/base.astro";
 import azkar from "@/data/zikr.json";
+import RepetitionBtn from "@/components/zkr-btn.astro";
 ---
-<Base > <section class="morning">
-      <div class="container text-center mt-5">
-        <div class="text">
-          <h1 class="mb-4">Evening Azkar</h1>
-          <p class="h4">There are 30 Zikr</p>
-        </div>
-        <div id="row-evening">
-         {azkar.slice(31, 60+1).map(zikr => {
-            let {count} = zikr
-            const getCount = () => count
-            return (
-            <div class="item">
-
-              <p class="text-start h5 m-2" style="border-bottom: 1px solid rgba(0,0,0,.125);">
-                Repetiton: {zikr.count.toLocaleString()}
-              </p>
-
-              <p class="zekr">{zikr.zekr}</p>
+<Base title="Evening Adhkar" >
+  <section class="morning">
+    <div class="container text-center mt-5">
+      <div class="text">
+        <h1 class="mb-4">Evening Azkar</h1>
+        <p class="h4">There are 30 Zikr</p>
+      </div>
+      <div id="row-evening">
+        {azkar.slice(31, 60+1).map(zikr =>(
+          <div class="item">
+
+            <p class="text-start h5 m-2" style="border-bottom: 1px solid rgba(0,0,0,.125);">
+              Repetiton: {zikr.count.toLocaleString()}
+            </p>
+
+            <p class="zekr">{zikr.zekr}</p>
 
-              <button onclick="count>0 ? count--:this.classList.add('done')">
-                Remaining itterations:
-                <span class="btnCount">{+getCount().toLocaleString() ||"done"}</span>
-              </button>
+            <RepetitionBtn count={+zikr.count} />
 
-              <p class="text-start h5 m-2" style="border-top: 1px solid rgba(0,0,0,.125);">{zikr.reference}</p>
+            <p class="text-start h5 m-2" style="border-top: 1px solid rgba(0,0,0,.125);">{zikr.reference}</p>
 
-             </div>    
-          )})}
-        </div>
+            </div>    
+        ))}
       </div>
-    </section></Base>
+    </div>
+  </section>
+</Base>

src/pages/index.astro

@@ -8,7 +8,7 @@ const surah = quran[randSurah];
 const verse = surah.verses[randVerse];
 ---
 
-<Base >
+<Base title="Adhkar">
     <section class="home">
       <div class="container">
         <h1 class="text-center mt-5 p-3">Welcome to the Holy Quran website</h1>

src/pages/morning.astro

@@ -1,19 +1,18 @@
 ---
 import Base from "@/layouts/base.astro";
 import azkar from "@/data/zikr.json";
+import RepetitionBtn from "@/components/zkr-btn.astro";
+
 ---
-<Base >
+<Base title="Morning Adhkar" >
     <section class="morning">
       <div class="container text-center mt-5">
         <div class="text">
           <h1 class="mb-4">Morning Azkar</h1>
           <p class="h4">There are 31 Zikr</p>
         </div>
         <div id="row">
-          {azkar.slice(0, 30+1).map(zikr => {
-            let {count} = zikr
-            const getCount = () => count
-            return (
+          {azkar.slice(0, 30+1).map(zikr => (
             <div class="item">
 
               <p class="text-start h5 m-2" style="border-bottom: 1px solid rgba(0,0,0,.125);">
@@ -22,15 +21,13 @@ import azkar from "@/data/zikr.json";
 
               <p class="zekr">{zikr.zekr}</p>
 
-              <button onclick="count>0 ? count--:this.classList.add('done')">
-                Remaining itterations:
-                <span class="btnCount">{+getCount().toLocaleString() ||"done"}</span>
-              </button>
+                <RepetitionBtn count={+zikr.count} />
+
 
               <p class="text-start h5 m-2" style="border-top: 1px solid rgba(0,0,0,.125);">{zikr.reference}</p>
 
              </div>    
-          )})}
+          ))}
         </div>
       </div>
     </section>

src/pages/other.astro

@@ -2,7 +2,7 @@
 import Base from "@/layouts/base.astro";
 import azkar from "@/data/zikr.json";
 ---
-<Base >
+<Base title="Other Adhkar & Duas">
  <section class="morning">
       <div class="container text-center mt-5">
         <div class="text">

src/pages/quran/[id].astro

@@ -1,7 +1,6 @@
 ---
 import Base from "@/layouts/base.astro";
 import quran from "@/data/quran.json";
-import QuranIndex from "./index.astro";
 
 export const getStaticPaths = () =>
 	quran.map((surah) => ({
@@ -12,10 +11,9 @@ const { id } = Astro.params;
 if (!id) return Astro.redirect("/quran");
 
 const surah = quran[+id - 1];
-
 if (!surah) return Astro.redirect("/quran");
 ---
-<Base >
+<Base title={`${surah.transliteration} | Quran Kareem`}>
  <section class="surah mt-5">
     <div class="container text-center" id="surah">
 <h1 class="text-center mt-5 p-3">{surah.name}</h1>

src/pages/quran/index.astro

@@ -2,7 +2,7 @@
 import Base from "@/layouts/base.astro";
 import quran from "@/data/quran.json";
 ---
-<Base ><section class="quran mt-3">
+<Base title = "Quran Kareem"><section class="quran mt-3">
       <div class="container">
         <div class="row" id="quran">
           {quran.map(surah =>(

src/pages/ruqia.astro

@@ -3,7 +3,7 @@ import Base from "@/layouts/base.astro";
 import azkar from "@/data/zikr.json";
 ---
 
-<Base > <section class="morning">
+<Base title="Ruqia by Shariya"> <section class="morning">
       <div class="container text-center mt-5">
         <div class="text">
           <h1 class="mb-4">

src/scripts/mode.ts

@@ -1,6 +1,8 @@
-const modo = document.getElementById("modo");
-const html = document.getElementsByTagName("html");
-const navbar = document.getElementById("navbar");
+const modo = document.getElementById("modo") as HTMLDivElement;
+const html = document.getElementsByTagName(
+	"html",
+) as HTMLCollectionOf<HTMLHtmlElement>;
+const navbar = document.getElementById("navbar") as HTMLElement;
 
 modo.onclick = () => {
 	modo.classList.toggle("open");