Skip to content

Commit

Permalink
Merge pull request #689 from Subhajit-2023-44/visitor
Browse files Browse the repository at this point in the history
✨Add Visitor Counter feature done !
  • Loading branch information
swaraj-das authored Oct 26, 2024
2 parents bd8f4b0 + 53344a7 commit cdb3c26
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 1 deletion.
10 changes: 10 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -654,6 +654,16 @@ <h2>Feedback Form</h2>
</form>
</div>
</div>

<br /><br />
<link rel="stylesheet" href="visi.css">
<!-- ############### Footer ############### -->
<div class="visitor-counter">
<div>Visitor</div>
<div class="website-counter"></div>
</div>
<script src="visi.js"></script>

<div class="footer-bottom">
<p><a href="PrivacyPolicy/PrivacyPolicy.html">© 2024 GamingTools | All Rights Reserved</a></p>
<p>Developed by <span><a href="https://my-portfolio-git-main-swaraj-das-projects.vercel.app/"
Expand Down
32 changes: 32 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
Expand Up @@ -488,3 +488,35 @@ cartButtons.forEach(button => {
alert('Item added to cart'); // Show alert
});
});


// Function to get the count from localStorage or initialize it
function getVisitorCount() {

return localStorage.getItem('visitorCount') || 0;

}


// Function to increment and save the count
function incrementVisitorCount() {

let count = parseInt(getVisitorCount()) + 1;
localStorage.setItem('visitorCount', count);

return count;
}


// Function to display the count
function displayVisitorCount() {

const counterElement = document.querySelector('.website-counter');
const count = incrementVisitorCount();
counterElement.textContent = count;

}

// Call the display function when the page loads
document.addEventListener('DOMContentLoaded', displayVisitorCount);

107 changes: 106 additions & 1 deletion style.css
Original file line number Diff line number Diff line change
Expand Up @@ -2227,4 +2227,109 @@ button {
#contact button:hover {
background-color: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
}


.visitor-counter {

margin-top: -120px;
margin-left: 730px;
margin-bottom: 20px;
background: linear-gradient(135deg, #8514ee, #00ffffc9, #ff078b);
height: 60px;
width: 70px;
color: #333; /* Darker text for better contrast */
font-weight: 700;
font-size: 18px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 12px; /* Softer corners */
backdrop-filter: blur(10px); /* Increased blur for a modern touch */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15), /* Slightly more pronounced shadow */
0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: all 0.3s ease; /* Smooth transition for hover effect */

}

.visitor-counter:hover {

transform: scale(1.05); /* Slightly enlarge on hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover */

}

.visitor-counter div:first-child {

margin-bottom: 5px;
font-size: 14px; /* Adjusted for clarity */
letter-spacing: 1px; /* Increased spacing for readability */

}

.website-counter {

font-size: 24px;
font-family: 'Arial', sans-serif; /* Consistent font family */

}

@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;

}

}

.dark-mode .visitor-counter div {

color: #f0f0f0; /* Lighter text for dark mode */

}

.dark-mode .visitor-counter .website-counter {

color: #f0f0f0; /* Lighter color for consistency */

}

.dark-mode .visitor-counter {

background-color: rgba(0, 0, 0, 0.7); /* Darker background for dark mode */
box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1),
0 2px 4px rgba(255, 255, 255, 0.05);

}

0 comments on commit cdb3c26

Please sign in to comment.