Display featured rates

Add option for language selection
marsicdev · Dec 21, 2023 · e16e98a · e16e98a
1 parent 3fdadf4
commit e16e98a
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0] - 2023-12-21
+
+### Added
+
+-   Added language switcher to display exchange rates decimal separator in Serbian (`,`) or English (`.`) language (default is English)
+-   Show more currencies button to display all currencies available on the official NBS rates page
+
+### Changed
+
+-   Currency list is by default showing only featured currencies `EUR`, `USD`, `GBP`, `CHF`, `CAD`
+
 ## [1.0.0] - 2023-06-02
 
 ### Added

diff --git a/README.md b/README.md
@@ -15,10 +15,10 @@ The **NBS Exchange Rate Chrome Extension** is a widget that allows users to quic
 
 #### TBD - Upcoming features and improvements
 
--   [ ] Language switcher
+-   [x] Language switcher
+-   [ ] Refetch rates
 -   [ ] Theme switcher
 -   [ ] Favorites
--   [ ] Refetch rates
 -   [ ] Automate release process
 -   [ ] Migrate to TS and MVC
 

diff --git a/extension/css/main.css b/extension/css/main.css
@@ -27,6 +27,11 @@ article {
     /* background-color: red; */
 }
 
+details {
+    border-bottom: 0px;
+    margin: 1.5rem 0px;
+}
+
 mark:hover {
     cursor: pointer !important;
     transform: scale(1.1);
@@ -100,7 +105,11 @@ img {
     /* box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); */
     transform: scale(1.1);
     transition: all 0.3s ease;
-
+}
+
+
+.active {
+    color: #1095c1;
 }
 
 .tiny {

diff --git a/extension/index.js b/extension/index.js
@@ -1,6 +1,6 @@
 //@ts-check
 const NBS_EXCHANGE_RATE_URL =
-    'https://www.nbs.rs/kursnaListaModul/srednjiKurs.faces?lang=eng'
+    'https://www.nbs.rs/kursnaListaModul/srednjiKurs.faces'
 
 const DOMSelector = Object.freeze({
     htmlTag: 'html',
@@ -12,8 +12,8 @@ const DOMSelector = Object.freeze({
     logoImage: '.logo',
 })
 
-function fetchExchangeRates() {
-    const nbsCorsEndpoint = `https://cors.hypetech.xyz/${NBS_EXCHANGE_RATE_URL}`
+function fetchExchangeRates(lang = 'eng') {
+    const nbsCorsEndpoint = `https://cors.hypetech.xyz/${NBS_EXCHANGE_RATE_URL}?lang=${lang}`
     fetch(nbsCorsEndpoint)
         .then((response) => response.text())
         .then((data) => {
@@ -36,20 +36,36 @@ function fetchExchangeRates() {
             }
 
             // Create HTML output
+            const rows = []
+            const tempRows = []
             let htmlOutput = '<div>'
-            currencyList.forEach((elem) => {
-                const exchangeRateRow = elem.innerHTML
-                    .trim()
-                    .replaceAll(` tabindex="0"`, '')
-                    .replaceAll(`<td>`, '')
-                    .split('</td>')
-                    .map((item) => item.trim())
-
-                htmlOutput += createCardHTML(exchangeRateRow)
-            })
+            currencyList
+                .forEach((elem) => {
+                    const exchangeRateRow = elem.innerHTML
+                        .trim()
+                        .replaceAll(` tabindex="0"`, '')
+                        .replaceAll(`<td>`, '')
+                        .split('</td>')
+                        .map((item) => item.trim())
+
+                    const currencyCode = exchangeRateRow[0]
+                    const order = ["EUR", "USD", "GBP", "CHF", "EUR", "CAD"]
+
+                    if (order.includes(currencyCode)) {
+                        tempRows.unshift(createCardHTML(exchangeRateRow))
+                    } else {
+                        rows.push(createCardHTML(exchangeRateRow))
+                    }
+                })
+
+            const more = `
+                <details class="more">
+                    <summary><strong>SHOW MORE</strong></summary>
+                    ${rows.join("")}
+                </details>`
 
             // End HTML output
-            htmlOutput += '</div>'
+            htmlOutput += tempRows.reverse().join("") + more + '</div>'
 
             // Display HTML output
             const $ratesList = document.querySelector(DOMSelector.ratesList)
@@ -173,6 +189,18 @@ Developed by @marsicdev.`)
             url: 'https://github.com/marsicdev',
         })
     })
+
+    document.querySelector('.eng')?.addEventListener('click', () => {
+        fetchExchangeRates('eng')
+        document.querySelector('.lat')?.classList.remove('active')
+        document.querySelector('.eng')?.classList.add('active')
+    })
+
+    document.querySelector('.lat')?.addEventListener('click', () => {
+        fetchExchangeRates('lat')
+        document.querySelector('.eng')?.classList.remove('active')
+        document.querySelector('.lat')?.classList.add('active')
+    })
 }
 
 function init() {

diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "NBS Exchange Rate",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "Official RSD Exchange rates from National Bank of Serbia",
     "permissions": [],
     "action": {

diff --git a/extension/popup.html b/extension/popup.html
@@ -16,6 +16,11 @@
     <main class="rates-list">
         <div aria-busy="true"></div>
     </main>
+    <div>
+        <small class="eng action active">ENG</small>
+        |
+        <small class="lat action">SRB</small>
+    </div>
     <div>
         <small class="nbs action">NBS</small>
         |