typos+extension enhancements

dhirajraut1 · dhirajraut1 · commit 429e32049db7 · 2023-04-29T20:56:15.000+05:45
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+# Gita Chrome Extension
+
+
+## About
+
+Get the desired slok from Bhagwat Gita.
+
+Use as a Chrome extension or just visit the [website](https://dhirajraut27.com.np/GitaChromeExtension/).
+
+
+## Contribute
+Feel free to contribute or let me know for the issues.
+
+
+## Shout-out
+Data Source: [Bhagavad Gita API](https://bhagavadgitaapi.in/)
diff --git a/hello.html b/hello.html
@@ -7,37 +7,30 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./styles/style.css">
     <link rel="stylesheet" href="./styles/bootstrap.min.css">
-
-    <!-- Bootstrap CSS CDN -->
-    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
-
-    <title>Bhagawat Geeta Sloka</title>
+    <title>Bhagawat Geeta Slok</title>
 </head>
 
 <body>
     <div class="container-fluid text-center m-2">
-        <h2 class="p-2">Bhagavad Gita Sloka Fetcher</h2>
+        <h2 class="p-2">Bhagavad Gita Slok Fetcher</h2>
         <img src="https://bhagavadgitaapi.in/slok/krishna.png" alt="">
         <br>
-        <p>Get the desired sloka from Gita </p>
+        <p>Get the desired slok from Gita </p>
         <form>
             <div class="row">
                 <div class="col">
-                    <!-- <label class = "form-label" for="chapter">Select Chapter </label> -->
                     <select class="form-control" id="chapter" name="chapter" required>
                         <option value="" selected="selected">Select a Chapter</option>
                     </select>
                 </div>
                 <div class="col">
-                    <!-- <label class = "form-label" for="sloka">Select Sloka</label> -->
                     <select class="form-control" id="sloka" min="1" required>
-                        <option value="" selected="selected">Select a Sloka</option>
+                        <option value="" selected="selected">Select a Slok</option>
                     </select>
                 </div>
             </div>
             <div class="pt-2 col-12 p-3">
-                <button class="btn btn-danger" type="submit">Fetch Sloka</button>
+                <button class="btn btn-danger" type="submit">Fetch Slok</button>
             </div>
             
         </form>
@@ -52,11 +45,6 @@ <h2 class="p-2">Bhagavad Gita Sloka Fetcher</h2>
 
     <script src="script.js"></script>
 
-    <!-- Bootstrap Bundle with Popper -->
-    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-        crossorigin="anonymous"></script> -->
-
 </body>
 
 </html>
diff --git a/index.html b/index.html
@@ -6,28 +6,21 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/4329/4329416.png" type="image/x-icon">
-    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
-    <!-- <link rel="stylesheet" href="./styles/bootstrap.min.css"> -->
 
     <!-- Bootstrap CSS CDN -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 
-    <title>Bhagawat Geeta Sloka</title>
+    <title>Bhagawat Geeta Slok</title>
 
     <style>
-        /* @import url('https://fonts.googleapis.com/css2?family=Yatra+One&display=swap'); */
-/* @import url('https://fonts.googleapis.com/css2?family=Eczar&display=swap'); */
 @import url('https://fonts.googleapis.com/css2?family=Eczar&family=Noto+Sans+Devanagari:wght@200;400;600&display=swap');
 
 
 body {
-  /* width: 420px;
-  height: 400px; */
   font-family: 'Noto Sans Devanagari', sans-serif;}
 
 div.sloka-container {
-  /* background:linear-gradient(189deg,#fff 19%,#f7fffa 50%);*/
   color: #4f4141;
 }
 
@@ -36,13 +29,9 @@
   opacity: +.98
 }
 
-/* h2 {
-  font-family: 'Yatra One', cursive;
-} */
 
 h3 {
   line-height: 23pt;
-  /* font-family: 'Yatra One', cursive; */
   margin: 10px;
   color: #4f4141;
   font-weight: 600;
@@ -62,7 +51,7 @@
     </style>
 </head>
 
-<body">
+<body>
     <div class="container text-center my-auto ">
         <div class="col-6 mx-auto">
         <h2 class="p-2">Bhagavad Gita Slok Fetcher</h2>
@@ -80,20 +69,20 @@ <h2 class="p-2">Bhagavad Gita Slok Fetcher</h2>
                 <div class="col-4">
                     <!-- <label class = "form-label" for="sloka">Select Sloka</label> -->
                     <select class="form-control" id="sloka" min="1" required>
-                        <option value="" selected="selected">Select a Sloka</option>
+                        <option value="" selected="selected">Select a Slok</option>
                     </select>
                 </div>
             </div>
             <div class="pt-2 col-12 p-3">
-                <button class="btn btn-danger" type="submit">Fetch Sloka</button>
+                <button class="btn btn-danger" type="submit">Fetch Slok</button>
             </div>
             
         </form>
         <div class="text-center p-2 sloka-container" id="sloka-container"></div>
 
-        <footer class="p-2">
+        <footer class="footer mt-auto py-3">
             <p>Made with 🙏 by Dhiraj Raut. <br>
-                Fetched from <a href="https://bhagavadgitaapi.in/" target="_blank">@BhagavadGitaApi</a> </p>
+                Data Source: <a href="https://bhagavadgitaapi.in/" target="_blank">BhagavadGitaApi</a> </p>
         </footer>
     </div>
 </div>
diff --git a/script.js b/script.js
@@ -38,7 +38,8 @@ form.addEventListener('submit', event => {
   // const url = `https://bhagavadgitaapi.in/slok/${chapter}/${sloka}`;
   const queryId = `BG${chapter}.${sloka}`;
 
-  
+  //using API CALL
+
   // Check if data is already in local storage
   // const storedData = localStorage.getItem(`gita${chapter}-${sloka}`);
   // if (storedData) {
@@ -68,7 +69,6 @@ form.addEventListener('submit', event => {
   //     .then(data => {
   //       // Store data in local storage
   //       localStorage.setItem(`gita${chapter}-${sloka}`, JSON.stringify(data));
-  //       // Use the data as needed
   //       const slokaText = data.slok;
   //       const formattedSloka = slokaText.replace(/\n/g, '<br>');
   //       const translation = data.siva.et;
@@ -84,20 +84,15 @@ form.addEventListener('submit', event => {
 
 
 
-  // use the local json file 
+  // using the local json file 
 
   fetch('shlokas_limited.json')
     .then(response => response.json())
     .then(data => {
-      // Store data in local storage
-      // localStorage.setItem(`gita${chapter}-${sloka}`, JSON.stringify(data));
-
       // Filter the data based on the user input
       const filteredData = data.filter(item => item.id === queryId);
       console.log(filteredData[0])
 
-
-      // Use the data as needed
       const slokaText = filteredData[0].slok;
       const formattedSloka = slokaText.replace(/\n/g, '<br>');
       const translation = filteredData[0].siva.et;
