Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add visitor count feature to homepage #68

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add visitor count feature to homepage #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 60 additions & 60 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>CAPTCHA VALIDATION</title>
<link rel="icon" type="image/x-icon" href="assets/recaptcha-icon.png">
<link rel="stylesheet" href="alert/dist/sweetalert.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAPTCHA VALIDATION</title>
<link rel="stylesheet" href="alert/dist/sweetalert.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<nav class="navbar">
<div class="logo">
<a href="index.html">Get Your Captcha</a>
</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#">Contributors</a></li>
<li><a href="about.html">About </a></li>
</ul>
<div class="menu-icon">
<i class="fas fa-bars"></i>
</div>
</nav>
<img src="assets/img1.jpg" class="bg" alt="Background Image">

</head>
<body>
<nav class="navbar">
<div class="logo">
<a href="index.html">Get Your Captcha</a>
<div class="container-fluid">
<div class="visitor-count">
<h2>Visitor Count: <span id="visitor-count">0</span></h2>
</div>

<div class="captcha-container">
<div class="header" style="font-size:40px"><b>CAPTCHA</b></div>
<div class="securityCode">
<img src="assets/img2.jpg" class="captchabg" alt="CaptchaImage">
<p id="code">Avi6479</p>
<div class="icons">
<span class="readText">
<i class="fas fa-volume-up" style="font-size:40px" onmouseover="spkvoiceover()"></i>
</span>
<span class="changeText">
<i class="fas fa-sync-alt" style="font-size:40px" onmouseover="spkrefresh()"></i>
</span>
</div>
</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="#">Contributors</a></li>
<li><a href="about.html">About </a></li>
</ul>
<div class="menu-icon">
<i class="fas fa-bars"></i>
<div class="userInput">
<input id="textbox" type="text" placeholder="Type the text here">
<button class="btn" onmouseover="spksubmit()" type="submit">Submit</button>
</div>
</nav>
<img src="assets/img1.jpg" class="bg" alt="Background Image">
<div class="container-fluid">
<div class="captcha-container">
<div class="header" style="font-size:40px"><b>CAPTCHA</b></div>

<div class="securityCode">
<img src="assets/img2.jpg" class="captchabg" alt="CaptchaImage">
<p id="code">Avi6479</p>
<div class="icons">
<span class="readText">
<i class="fas fa-volume-up" style="font-size:40px" onmouseover="spkvoiceover()"></i>
</span>
<span class="changeText">
<i class="fas fa-sync-alt" style="font-size:40px" onmouseover="spkrefresh()"></i>
</span>
</div>
</div>
<div class="userInput">
<input id="textbox" type="text" placeholder="Type the text here">
<button class="btn" onmouseover="spksubmit()" type="submit">Submit</button>
</div>

<div class="form-group">
<button id="start-btn" onmouseover="spkstart()" class="btn btn-danger btn-block">START</button>
<p id="instructions">PRESS THE START BUTTON</p>
</div>
<div class="form-group">
<button id="start-btn" onmouseover="spkstart()" class="btn btn-danger btn-block">START</button>
<p id="instructions">PRESS THE START BUTTON</p>
</div>
</div>
<footer>
<p>&copy; 2024 ForkTheCaptcha. All rights reserved.</p>
</footer>

</div>

<footer>
<p>&copy; 2024 ForkTheCaptcha. All rights reserved.</p>
</footer>

<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="js/script.js"></script>
<script src="js/speechrecog.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="js/script.js"></script>
<script src="js/speechrecog.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/visitorCount.js"></script> <!-- Link to the visitor count script -->
</body>
</html>
17 changes: 17 additions & 0 deletions js/visitorCount.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// Fetch the current visitor count from the server and update the display
fetch('/api/visitor-count')
.then(response => response.json())
.then(data => {
document.getElementById('visitor-count').textContent = data.count;
})
.catch(error => console.error('Error fetching visitor count:', error));

// Increment the visitor count on page load
fetch('/api/increment-visitor-count', {
method: 'POST'
})
.then(response => response.json())
.then(data => {
document.getElementById('visitor-count').textContent = data.count;
})
.catch(error => console.error('Error incrementing visitor count:', error));
57 changes: 57 additions & 0 deletions server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;

// Serve the static files (HTML, CSS, JS) from the root directory
app.use(express.static(__dirname)); // Serve from the root directory

// Initialize visitor count file
const visitorCountFile = 'visitorCount.txt';

fs.exists(visitorCountFile, (exists) => {
if (!exists) {
fs.writeFile(visitorCountFile, '0', (err) => {
if (err) {
console.error('Could not initialize visitor count file:', err);
} else {
console.log('Initialized visitor count file with 0');
}
});
}
});

// Route for the homepage
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html')); // Adjust path to index.html
});

// API to get the visitor count
app.get('/api/visitor-count', (req, res) => {
fs.readFile(visitorCountFile, 'utf8', (err, data) => {
if (err) {
return res.status(500).json({ error: 'Could not read visitor count.' });
}
const visitorCount = parseInt(data, 10) || 0;
res.json({ count: visitorCount });
});
});

// API to increment the visitor count
app.post('/api/increment-visitor-count', (req, res) => {
fs.readFile(visitorCountFile, 'utf8', (err, data) => {
let visitorCount = parseInt(data, 10) || 0;
visitorCount += 1;
fs.writeFile(visitorCountFile, visitorCount.toString(), (err) => {
if (err) {
return res.status(500).json({ error: 'Could not update visitor count.' });
}
res.json({ count: visitorCount });
});
});
});

app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
9 changes: 9 additions & 0 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,15 @@ body
align-items: center;
/*background: #1A1D2B;*/
}
.visitor-count {
background-color: #e0f7fa; /* Light blue background */
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
font-weight: bold;
font-size: 24px;
text-align: center;
}

/* For background image */
.bg {
Expand Down
1 change: 1 addition & 0 deletions visitorCount.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
0