visitor count

#1452
khushi-joshi-05 · Jul 23, 2024 · 502b1a9 · 502b1a9
1 parent 925b5d6
commit 502b1a9
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -55,6 +55,14 @@
 </head>
 
 <body>
+    <link rel="stylesheet" href="./assets/css/visitors.css">
+  <!-- ############### Footer ############### -->
+  <div class="visitor-counter">
+    <div>Visitors</div>
+    <div class="website-counter"></div>
+  </div>
+  <script src="path/to/visitorCounter.js"></script>
+  <script src="./assets/js/visitors.js"></script>
     <!-- Progress bar -->
     <div id="progressBar"></div>
     <script>

diff --git a/script.js b/script.js
@@ -17,3 +17,21 @@ document.querySelectorAll('.faq-item h2').forEach(item => {
       parent.classList.toggle('active');
   });
 });
+
+
+ function getVisitorCount() {
+  return localStorage.getItem('visitorCount') || 0;
+}
+
+function incrementVisitorCount() {
+  let count = parseInt(getVisitorCount()) + 1;
+  localStorage.setItem('visitorCount', count);
+  return count;
+}
+
+function displayVisitorCount() {
+  const counterElement = document.querySelector('.website-counter');
+  const count = incrementVisitorCount();
+  counterElement.textContent = count;
+}
+document.addEventListener('DOMContentLoaded', displayVisitorCount);
diff --git a/style.css b/style.css
@@ -842,3 +842,94 @@ body {
     font-size: 1rem;
   }
 }
+.visitor-counter {
+    position: fixed;
+    top: 600px;
+    left: 50px;
+    background-color: grey;
+    height: 70px;
+    width: 70px;
+    color: black;
+    font-weight: 700;
+    font-size: 10px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 200px;
+    backdrop-filter: blur(5px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
+                0 1px 3px rgba(0, 0, 0, 0.08);
+    z-index: 1000;
+    animation: bounce 2s ease-in-out infinite;
+  }
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-10px);
+    }
+  }
+  .visitor-counter div:first-child {
+    margin-bottom: 5px;
+  }
+
+  .website-counter {
+    font-size: 24px;
+  }
+
+  @media screen and (max-width: 768px) {
+    .visitor-counter {
+      height: 100px;
+      width: 100px;
+      font-size: 16px;
+    }
+
+    .website-counter {
+      font-size: 20px;
+    }
+  }
+
+  @media screen and (max-width: 480px) {
+    .visitor-counter {
+      height: 80px;
+      width: 80px;
+      font-size: 14px;
+    }
+
+    .website-counter {
+      font-size: 18px;
+    }
+  }
+.visitor-counter div:first-child {
+  margin-bottom: 5px;
+}
+
+.website-counter {
+  font-size: 24px;
+}
+
+@media screen and (max-width: 768px) {
+  .visitor-counter {
+    height: 100px;
+    width: 100px;
+    font-size: 16px;
+  }
+
+  .website-counter {
+    font-size: 20px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .visitor-counter {
+    height: 80px;
+    width: 80px;
+    font-size: 14px;
+  }
+
+  .website-counter {
+    font-size: 18px;
+  }
+}