barcode scanner
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Barcode Scanner</title>
<link rel="stylesheet" type="text/css" href="barcode.css">
<script src="barcode.js"></script>
</head>
<body>
<h1>Barcode Scanner</h1>
<div id="scanner">
<p>Scan barcode:</p>
<input type="text" id="barcode">
<p id="error"></p>
<table>
<tr>
<th>Barcode</th>
<th>Scanned Time</th>
<th>Re-scanned Time</th>
<th>Status</th>
</tr>
<tbody id="scan-records"></tbody>
</table>
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
#scanner {
margin: 50px auto;
width: 500px;
text-align: center;
}
p {
margin: 10px 0;
}
#barcode {
padding: 5px;
border: 1px solid #ccc;
}
#error {
color: red;
}
table {
margin-top: 20px;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
th {
background-color: #eee;
}
JAVASCRIPT
let scanRecords = [];
function barcodeScanned(barcode) {
const timeNow = new Date();
const error = document.getElementById('error');
if (barcode === '') {
error.innerHTML = 'Please scan a barcode';
return;
}
// Check if barcode has already been scanned
const previousScan = scanRecords.find(record => record.barcode === barcode);
if (previousScan) {
const timeSinceLastScan = timeNow.getTime() - previousScan.scanned.getTime();
if (timeSinceLastScan < 5000) {
error.innerHTML = 'Please wait 5 seconds before scanning the same barcode again';
return;
} else {
previousScan.reScanned = timeNow;
previousScan.status = 'Success';
}
} else {
scanRecords.push({
barcode: barcode,
scanned: timeNow,
reScanned: null,
status: 'Pending'
});
}
// Clear error message
error.innerHTML = '';
// Update scan records table
const scanRecordsTable = document.getElementById('scan-records');
scanRecordsTable.innerHTML = '';
scanRecords.forEach(record => {
const row = document.createElement('tr');
const barcodeCell = document.createElement('td');
barcodeCell.innerText = record.barcode;
row.appendChild(barcodeCell);
const scannedTimeCell = document.createElement('td');
scannedTimeCell.innerText = record.scanned.toLocaleString();
row.appendChild(scannedTimeCell);
const reScannedTimeCell = document.createElement('td');
if (record.reScanned) {
reScannedTimeCell.innerText = record.reScanned.toLocaleString();
} else {
reScannedTimeCell.innerText = '';
}
row.appendChild(reScannedTimeCell);
const statusCell = document.createElement('td');
statusCell.innerText = record.status;
row.appendChild(statusCell);
scanRecordsTable.appendChild(row);
});
}
// Example usage:
barcodeScanned('123456789'); // Scans barcode 123456789
barcodeScanned('987654321'); // Scans barcode 987654321
setTimeout(() => {
barcodeScanned('123456789'); // Re-scans barcode 123456789 after 5 seconds
}, 5000);
