Merge branch 'main' of https://github.com/Igorcbraz/Calculadora

index.html

@@ -60,7 +60,14 @@ <h4 class="col-3" id="reset-theme">theme</h4>
     <button id="startVoice" class="floating-btn">
       <i class="fas fa-microphone-slash" id="microphoneIcon"></i>
       <span id="microphoneTooltip" class="tooltip">Ativar microfone</span>
-    </button>  
+    </button>
+
+    <div id="github-stars" class="github-stars">
+      <a href="https://github.com/Igorcbraz/Calculadora" target="_blank">
+        <i class="fab fa-github"></i>
+        <span id="stars-count">0</span> stars
+      </a>
+    </div>
 
     <script src="https://cdn.jsdelivr.net/npm/intro.js@8.0.0-beta.1/minified/intro.min.js"></script>
     <script type="module" src="./src/js/main.js"></script>

src/constants/getStarsUrl.js

@@ -0,0 +1 @@
+export const getStarsUrl = 'https://api.github.com/repos/Igorcbraz/Calculadora'

src/constants/index.js

@@ -1,7 +1,9 @@
 import { themes } from './themes.js'
 import { buttons } from './buttons.js'
+import { getStarsUrl } from './getStarsUrl.js'
 
 export {
   themes,
-  buttons
+  buttons,
+  getStarsUrl
 }

src/css/index.css

@@ -377,3 +377,38 @@ input[type=range]::-ms-thumb {
 .button-1:focus:not(:focus-visible) {
   outline: none;
 }
+
+.github-stars {
+  position: fixed;
+  bottom: 20px;
+  left: 50px;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.github-stars a {
+  color: #333;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+
+.github-stars i {
+  margin-right: 5px;
+  margin-top: -1.5px;
+}
+
+.github-stars span {
+  margin-top: 1.5px;
+}
+
+#stars-count {
+  width: 25px;
+}

src/js/Stars.js

@@ -0,0 +1,44 @@
+import { getStarsUrl } from '../constants/index.js'
+
+export class Stars {
+  #starsCountElement
+
+  constructor(starsCountElement = document.getElementById('stars-count')) {
+    this.#starsCountElement = starsCountElement
+  }
+
+  async init() {
+    const starCount = await this.fetchStarsCount()
+    this.animateStarCount(starCount)
+  }
+
+  async fetchStarsCount() {
+    try {
+      const response = await fetch(getStarsUrl)
+
+      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+      const data = await response.json()
+
+      return data.stargazers_count
+    } catch (error) {
+      console.error('Error fetching GitHub stars:', error)
+      return 0
+    }
+  }
+
+
+  animateStarCount(finalCount) {
+    let currentCount = 0
+    const increment = Math.ceil(finalCount / 100)
+    const velocity = 35
+
+    const interval = setInterval(() => {
+      currentCount += increment
+      if (currentCount >= finalCount) {
+        currentCount = finalCount
+        clearInterval(interval)
+      }
+      this.#starsCountElement.textContent = currentCount
+    }, velocity)
+  }
+}

src/js/main.js

@@ -3,10 +3,11 @@ import { ThemeManager } from './themeManager.js'
 import { Guide } from './guide.js'
 import { Speak } from './speak.js'
 import { Button } from './components/Button.js'
+import { Stars } from './Stars.js'
 
 import { themes } from '../constants/index.js'
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
   const buttons = new Button()
   buttons.generateButtons()
 
@@ -16,6 +17,9 @@ document.addEventListener('DOMContentLoaded', () => {
   addEventListeners(calculator, themeManager)
   new Speak(calculator)
   initializeGuide()
+
+  const stars = new Stars()
+  await stars.init()
 })
 
 function initializeThemeManager() {