<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 <span>£25,000 jackpot</span> winner!',
'Winners are sent their prizes automatically by bank transfer or by post. Keep a look out!'
],
5: [
'This number could be a <span>£1,000</span> winner!',
'Winners are sent their prizes automatically by bank transfer or by post. Keep a look out!'
],
4: [
'This number could be a <span>£25</span> 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 <span>5 prize entries</span>!',
'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.innerHTML, message.innerHTML] = 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{padding:0;background:var(--debra-pale-blue);font-family:var(--site-heading-font-family);z-index:100;max-width:100%}
#number-checker .wrapInner,#number-checker .contentWrap{padding:0!important}
#number-checker #input-container{background:var(--debra-pale-blue);color:var(--debra-purple);text-align:center;padding:40px 20px 30px!important;margin:0}
#number-checker #input-container p{color:var(--debra-purple-dark);font-size:22px;font-weight:500;line-height:1.25;margin:0 0 45px}
#number-checker .numberCheckerContainer{margin-top:0}
#number-checker .numberChecker{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap}
#number-checker .ball{width:160px;height:160px;border-radius:50%;background:var(--debra-blue);border:4px solid #2097c4;box-shadow:6px 9px 0 rgba(32,151,196,.9);position:relative;display:flex;align-items:center;justify-content:center}
#number-checker .ball::before{content:"";position:absolute;top:10px;left:54px;width:58px;height:18px;border-radius:50px;background:rgba(255,255,255,.4);transform:rotate(10deg);pointer-events:none}
#number-checker .ball::after{content:"";position:absolute;right:18px;top:44px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45);box-shadow:9px 16px 0 -3px rgba(255,255,255,.45);pointer-events:none}
#number-checker .ball .formInput{width:98px;height:98px;border-radius:50%;border:4px solid var(--debra-blue);background:var(--debra-white);box-shadow:0 0 0 4px var(--debra-white);padding:0;margin:0;text-align:center;color:var(--debra-purple);font-size:58px;font-weight:800;line-height:1;outline:none;appearance:textfield;-moz-appearance:textfield}
#number-checker .ball .formInput:focus{border:4px solid var(--debra-blue);box-shadow:0 0 0 4px var(--debra-white);outline:none}
#number-checker .ball .formInput::-webkit-outer-spin-button,#number-checker .ball .formInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#number-checker button#search{margin:20px auto 0;background:var(--site-btn-bg);color:var(--site-btn-text-color);border-radius:var(--site-border-radius) 0 var(--site-border-radius) 0;padding:18px 42px;font-size:24px;font-weight:800;line-height:1;border:0}
#number-checker button#search:hover,#number-checker button#search:focus{background:var(--site-btn-hover-bg);color:var(--site-btn-text-color);opacity:1;text-decoration:none}
#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;z-index:99999}
#number-checker .modal small {font-size:0.5em;line-height:1.2;}
#number-checker .modal-content{background:var(--debra-white);color:var(--debra-black);padding:32px!important;width:480px;max-width:calc(100% - 32px);text-align:center;border-radius:12px;border:0;box-shadow:0 20px 60px rgba(0,0,0,.25)}
#number-checker #modal-title{color:var(--debra-purple);margin:0 0 16px}
#number-checker #modal-title>span {color:var(--debra-blue);}
#number-checker #modal-message{color:var(--debra-black);margin:0 0 20px}
#number-checker #match-dates{border:3px solid lightgray;padding:12px;margin-top:6px}
#number-checker #match-dates:empty{display:none}
#number-checker #match-dates>h3{margin-top:-32px;background:var(--debra-white);width:fit-content;padding:0 12px}
#number-checker .matchedDraws{overflow-y:scroll;max-height:225px;margin-bottom:12px}
#number-checker .matchedDraws .matchedDraw{display:block;margin:auto;padding:0 0 12px;background:var(--debra-white);border:3px solid var(--debra-purple);margin-bottom:12px}
#number-checker .matchedDraws span.date{background:var(--debra-purple);margin-top:0;margin-bottom:12px;padding:12px}
#number-checker .matchedDraws span.date h3{color:var(--debra-white);font-size:1.4em!important}
#number-checker .btn#close-modal{background:var(--debra-purple);color:var(--debra-white);border:0;border-radius:var(--site-border-radius);padding:12px 34px;margin:12px auto 0 auto!important}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched{border-color:var(--debra-blue)}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched span.date{background-color:var(--debra-blue)}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched span.date h3{color:var(--debra-purple)}
#number-checker .matchedDraws .matchedDraw.prizeFiveMatched,#number-checker .matchedDraws .matchedDraw.prizeFourMatched{border-color:var(--debra-purple)}
#number-checker .matchedDraws .matchedDraw.prizeFiveMatched span.date,#number-checker .matchedDraws .matchedDraw.prizeFourMatched span.date{background-color:var(--debra-purple)}
#number-checker .matchedDraws .matchedDraw.prizeThreeMatched{border-color:var(--debra-black)}
#number-checker .matchedDraws .matchedDraw.prizeThreeMatched span.date{background-color:var(--debra-black)}
#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}
@media (max-width:767.98px){
#number-checker .numberChecker{
gap:16px
}
#number-checker .ball{
width:82px;
height:82px;
box-shadow:5px 7px 0 rgba(32,151,196,.9)
}
#number-checker button#search{
width: 100%;
}
#number-checker .ball .formInput{
width:50px;
height:50px;
font-size:34px
}
#number-checker .ball::before{
top:6px;
left:27px;
width:32px;
height:10px
}
#number-checker #input-container {
padding: 0px 20px 30px!important;
}
#number-checker .ball::after{
right:9px;
top:23px;
width:6px;
height:6px;
box-shadow:7px 11px 0 -2px rgba(255,255,255,.45)
}
#number-checker #input-container p{
font-size:20px
}
#number-checker button#search{
padding:14px 30px;
font-size:20px
}
#number-checker .modal-content{
padding:24px!important
}
}
</style>