<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://lottery.debra.org.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 */
#number-checker {
padding: 0;
background: #F4512C;
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 {
max-width: 100%;
margin: 0;
padding: 45px 20px 36px !important;
background: #F4512C;
color: #FFFFFF;
text-align: center;
}
#number-checker #input-container h2 {
max-width: 660px;
margin: 0 auto 12px;
color: #FFFFFF;
font-size: 42px;
font-weight: 700;
line-height: 1.15;
}
#number-checker #input-container > p {
margin: 0 0 34px;
color: #FFFFFF;
font-size: 17px;
font-weight: 700;
line-height: 1.3;
}
#number-checker .numberCheckerContainer {
margin-top: 0;
}
#number-checker .numberChecker {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
max-width: 950px;
margin: 0 auto;
}
#number-checker .ball {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 130px;
width: 130px;
height: 130px;
border: 0;
border-radius: 50%;
background: #FFFFFF;
box-shadow: none;
}
#number-checker .ball::before,
#number-checker .ball::after {
display: none;
}
#number-checker .ball .formInput {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0 !important;
border-radius: 50%;
background: transparent !important;
color: #062B49;
box-shadow: none !important;
outline: none;
appearance: textfield;
-moz-appearance: textfield;
font-size: 48px;
font-weight: 700;
line-height: 1;
text-align: center;
}
#number-checker .ball .formInput:focus {
border: 0 !important;
box-shadow: none !important;
outline: none;
}
#number-checker .ball .formInput::-webkit-outer-spin-button,
#number-checker .ball .formInput::-webkit-inner-spin-button {
margin: 0;
-webkit-appearance: none;
}
#number-checker button#search {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 185px;
min-height: 54px;
margin-top: 28px;
padding: 10px 28px;
border: 0;
border-radius: 0;
background: #CFEBF9!important;
color: #002341!important;
box-shadow: none;
font-size: 21px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
width: 100%;
}
#number-checker button#search:hover,
#number-checker button#search:focus {
background: #C5E6F5;
color: #062B49;
opacity: 1;
text-decoration: none;
}
/* MODAL */
#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: .5em;
line-height: 1.2;
}
#number-checker .modal-content {
width: 480px;
max-width: calc(100% - 32px);
padding: 32px !important;
border: 0;
border-radius: 12px;
background: #FFFFFF;
color: #062B49;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
text-align: center;
}
#number-checker #modal-title {
margin: 0 0 16px;
color: #062B49!important;
}
#number-checker #modal-title > span {
color: #F4512C;
}
#number-checker #modal-message {
margin: 0 0 20px;
color: #062B49;
}
#number-checker #match-dates {
margin-top: 6px;
padding: 12px;
border: 3px solid lightgray;
}
#number-checker #match-dates:empty {
display: none;
}
#number-checker #match-dates > h3 {
width: fit-content;
margin-top: -32px;
padding: 0 12px;
background: #FFFFFF;
}
#number-checker .matchedDraws {
max-height: 225px;
margin-bottom: 12px;
overflow-y: scroll;
}
#number-checker .matchedDraws .matchedDraw {
display: block;
margin: 0 auto 12px;
padding: 0 0 12px;
border: 3px solid #062B49;
background: #FFFFFF;
}
#number-checker .matchedDraws span.date {
margin-top: 0;
margin-bottom: 12px;
padding: 12px;
background: #062B49;
}
#number-checker .matchedDraws span.date h3 {
color: #FFFFFF;
font-size: 1.4em !important;
}
#number-checker .btn#close-modal {
margin: 12px auto 0 !important;
padding: 12px 34px;
border: 0;
border-radius: 0;
background: #F4512C;
color: #FFFFFF;
}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched {
border-color: #F4512C;
}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched span.date {
background-color: #F4512C;
}
#number-checker .matchedDraws .matchedDraw.prizeSixMatched span.date h3 {
color: #FFFFFF;
}
#number-checker .matchedDraws .matchedDraw.prizeFiveMatched,
#number-checker .matchedDraws .matchedDraw.prizeFourMatched {
border-color: #062B49;
}
#number-checker .matchedDraws .matchedDraw.prizeFiveMatched span.date,
#number-checker .matchedDraws .matchedDraw.prizeFourMatched span.date {
background-color: #062B49;
}
#number-checker .matchedDraws .matchedDraw.prizeThreeMatched {
border-color: #111111;
}
#number-checker .matchedDraws .matchedDraw.prizeThreeMatched span.date {
background-color: #111111;
}
#number-checker .digitsMatched {
display: inline-block;
}
#number-checker .digitsMatched strong {
color: #F4512C;
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 h3,
#number-checker .matchedDraw h4,
#number-checker .matchedDraw h5 {
margin: auto;
font-weight: 500;
}
/* MOBILE */
@media (max-width: 767.98px) {
#number-checker #input-container {
padding: 36px 16px 30px !important;
}
#number-checker #input-container h2 {
font-size: 30px;
line-height: 1.2;
}
#number-checker #input-container > p {
margin-bottom: 28px;
font-size: 15px;
}
#number-checker .numberChecker {
gap: 12px;
}
#number-checker .ball {
flex-basis: 82px;
width: 82px;
height: 82px;
}
#number-checker .ball .formInput {
font-size: 34px;
}
#number-checker button#search {
min-width: 145px;
margin-top: 8px;
padding: 12px 22px;
font-size: 17px;
}
#number-checker .modal-content {
padding: 24px !important;
}
}
</style>