<script>
const inputs = document.querySelectorAll('.digit-input');
const modal = document.getElementById('result-modal');
const body = document.getElementById('body');
const title = document.getElementById('modal-title');
const message = document.getElementById('modal-message');
const matchDates = document.getElementById('match-dates');
inputs.forEach((input, i) => {
input.addEventListener('input', () => {
if (input.value && i < inputs.length - 1) inputs[i + 1].focus();
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Backspace' && !input.value && i > 0) {
inputs[i - 1].focus();
inputs[i - 1].value = '';
}
});
});
document.getElementById('search').addEventListener('click', async () => {
const digits = Array.from(inputs).map(input => input.value);
if (digits.some(d => d.length !== 1 || isNaN(d))) {
alert("Please enter one digit in each field.");
return;
}
const userInput = digits;
let highestMatch = 0;
let allMatches = [];
try {
const res = await fetch('https://www.theforceslottery.co.uk//rss/uni_simple_rss.xml');
if (!res.ok) throw new Error('Failed to fetch feed');
const xmlText = await res.text();
const parser = new DOMParser();
const xml = parser.parseFromString(xmlText, 'text/html');
const draws = xml.querySelectorAll('div.draw');
draws.forEach((draw) => {
const date = draw.querySelector('div.draw_date')?.textContent.trim() || 'Unknown Date';
const winners = draw.querySelectorAll('winner');
winners.forEach((winner) => {
const sequenceDigits = ['one', 'two', 'three', 'four', 'five', 'six'].map((tag) => {
const el = winner.querySelector(tag);
return el ? el.textContent.trim() : '';
});
let match = 0;
let resultDisplay = '';
for (let i = 0; i < 6; i++) {
if (userInput[i] === sequenceDigits[i]) {
match++;
resultDisplay += `<strong>${sequenceDigits[i]}</strong>`;
} else {
resultDisplay += sequenceDigits[i];
}
}
if (match >= 3) {
let prize = '';
let className = '';
switch (match) {
case 6:
prize = '£25,000';
className = 'prizeSixMatched';
break;
case 5:
prize = '£1,000';
className = 'prizeFiveMatched';
break;
case 4:
prize = '£25';
className = 'prizeFourMatched';
break;
case 3:
prize = '5 Prize Entries';
className = 'prizeThreeMatched';
break;
}
allMatches.push({ date, match, sequence: resultDisplay, prize, className });
if (match > highestMatch) highestMatch = match;
}
});
});
} catch (error) {
alert('There was a problem loading the lottery feed.');
console.error(error);
return;
}
const messages = {
6: [
'This number could be a £25,000 jackpot winner!',
'Winners are sent their prizes automatically. Keep a look out for a cheque arriving in the post if this is your number!'
],
5: [
'This number could be a £1,000 winner!',
'Winners are sent their prizes automatically by bank transfer or by post. Keep a look out!'
],
4: [
'This number could be a £25 winner!',
'Winners are sent their prizes automatically by bank transfer or by post. Keep a look out!'
],
3: [
'This number could be a winner of 5 prize entries!',
'Winners are sent their prizes automatically by bank transfer or by post. Keep a look out!'
],
2: [
'Better luck next time!',
'This number has matched 2 digits. You must match a minimum of 3 digits to win a prize.'
],
1: [
'Better luck next time!',
'This number has matched 1 digit. You must match a minimum of 3 digits to win a prize.'
],
0: [
'No win this time',
"This number hasn't matched enough digits in any of the available draws to win a prize."
]
};
[title.textContent, message.textContent] = messages[highestMatch];
if (allMatches.length > 0) {
matchDates.innerHTML =
'<h3>Possible Matches:</h3><div class="matchedDraws">' +
allMatches
.map((m) => `<div class="matchedDraw ${m.className}">
<span class="date"><h3>Draw date: <strong>${m.date}</strong></h3></span>
<span class="prize"><h4>Prize: <strong>${m.prize}*</strong></h4></span>
<span class="matches"><h5>with ${m.match} digits matched (<div class="digitsMatched">${m.sequence}</div>)</h5></span>
</div>`)
.join('') +
'</div><p><small>* To be eligible to win the prize, your game number must meet the criteria specified in point 5.4 of the the game rules.</small></p>';
} else {
matchDates.innerHTML = '';
}
modal.style.display = 'flex';
body.style.overflow = 'hidden';
});
document.getElementById('close-modal').addEventListener('click', () => {
modal.style.display = 'none';
body.style.overflow = '';
});
</script>
<style>
#number-checker #input-container {background: var(--navy);color: #FFF;padding: 36px 24px !important;}
#number-checker{padding:0;z-index:100;}
#number-checker #input-container{margin-bottom:24px;text-align:center;}
#number-checker #input-container h1{margin-top:0!important;}
#number-checker .numberCheckerContainer{margin-top:24px;}
#number-checker .numberChecker{display:contents;justify-content:center;}
#number-checker .digit-input{width:75px;height:75px;font-size:48px;font-weight:600;color:var(--navy);text-align:center;margin:0 5px;background:#FFF;border:4px solid var(--magenta);border-radius:100%;}
#number-checker button#search{color:#FFF;margin:0 5px;background:#d61f35;display:block;margin:24px auto 0 auto;}
#number-checker button#search:hover{cursor:pointer;}
#number-checker .modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);justify-content:center;align-items:center;}
#number-checker .modal-content{background:#FFF;color:#000;padding:24px!important;width:480px;text-align:center;}
#number-checker #match-dates>h3{margin-top:-32px;background:#fff;width:fit-content;padding:0 12px;}
#number-checker #match-dates{border:3px solid lightgray;padding:12px;margin-top:48px;}
#number-checker #match-dates:empty{display:none;}
#number-checker .matchedDraws{overflow-y:scroll;max-height:225px;margin-bottom:12px;}
#number-checker .matchedDraws .matchedDraw{display:block;margin:auto;padding:0 0 12px 0;background:#FFF;border:3px solid #150857;margin-bottom:12px;}
#number-checker .matchedDraws span.date{background:var(--navy);margin-top:0;margin-bottom:12px;padding:12px;}
#number-checker .matchedDraws span.date h3{color:#FFF;font-size:1.4em!important;}
#number-checker .btn#close-modal{background:#13074e;color:#FFF;}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched{border-color:var(--magenta);}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched span.date{background-color:var(--magenta);}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched span.date h3 {color:var(--navy);}
#number-checker .matchedDraws .matchedDraw.prizeFiveMatched{border-color:var(--purple);}
#number-checker .matchedDraws .matchedDraw.prizeFiveMatched span.date{background-color:var(--purple);}
#number-checker .matchedDraws .matchedDraw.prizeFourMatched{border-color:var(--navy);}
#number-checker .matchedDraws .matchedDraw.prizeFourMatched span.date{background-color:var(--navy);}
#number-checker .matchedDraws .matchedDraw.prizeThreeMatched{border-color:#000000;}
#number-checker .matchedDraws .matchedDraw.prizeThreeMatched span.date{background-color:#000000;}
#number-checker .digitsMatched{display:inline-block;}
#number-checker .digitsMatched strong{color:#E71A19;text-decoration:underline;}
#number-checker .matchedDraw span{display:block;margin:6px auto;}
#number-checker .matchedDraw span:last-of-type{margin-bottom:12px;}
#number-checker .matchedDraw h4, #number-checker .matchedDraw h3, #number-checker .matchedDraw h5{margin:auto;font-weight:500;}
</style>