Live Visitors Counter
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.counter-container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 3em;
margin-bottom: 10px;
}
p {
font-size: 1.5em;
margin-top: 0;
}
.loading {
font-size: 1.5em;
color: gray;
}
Current Visitors:
Loading…
// Your Firebase config
const firebaseConfig = {
apiKey: “AIzaSyCwJfZf8cl-WrRZEhJQs2gqTI8kpgVCodI”,
authDomain: “wsin-live-visitors.firebaseapp.com”,
databaseURL: “https://wsin-live-visitors-default-rtdb.firebaseio.com”,
projectId: “wsin-live-visitors”,
storageBucket: “wsin-live-visitors.appspot.com”,
messagingSenderId: “1020585611677”,
appId: “1:1020585611677:web:53f899410c235596e81f74”
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
const database = firebase.database();
const visitorsRef = database.ref(“visitorCount”);
// Check if Firebase is initialized successfully
firebase.database().ref(“.info/connected”).on(“value”, (snapshot) => {
if (snapshot.val() === true) {
console.log(“Firebase is connected.”);
} else {
console.log(“Firebase is not connected.”);
}
});
// Increment the visitor count on page load
visitorsRef.transaction(currentCount => {
if (currentCount === null) {
console.log(“Initializing visitor count to 1”);
return 1; // Initialize to 1 if it’s null
} else {
console.log(“Incrementing visitor count from”, currentCount, “to”, currentCount + 1);
return currentCount + 1; // Increment count
}
});
// Update visitor count on the webpage
visitorsRef.on(‘value’, (snapshot) => {
const count = snapshot.val();
console.log(“Current visitor count from Firebase:”, count); // Log current count
document.getElementById(“visitorCount”).textContent = count || 0;
});
