<script>
(function () {
const feedUrl = "https://lottery.debra.org.uk/rss/uni_simple_rss.xml";
function getInputs() {
return Array.from(
document.querySelectorAll("#number-checker .digit-input")
);
}
function updateBall(input) {
if (!input || !input.matches("#number-checker .digit-input")) {
return;
}
const ball = input.closest(".ball");
if (!ball) {
return;
}
let value = String(input.value).replace(/\D/g, "");
if (value.length > 1) {
value = value.slice(-1);
}
input.value = value;
ball.classList.toggle("has-value", value !== "");
}
function updateAllBalls() {
getInputs().forEach(updateBall);
}
document.addEventListener("input", function (event) {
const input = event.target;
if (!input.matches("#number-checker .digit-input")) {
return;
}
updateBall(input);
const inputs = getInputs();
const index = inputs.indexOf(input);
if (input.value !== "" && inputs[index + 1]) {
inputs[index + 1].focus();
}
}, true);
document.addEventListener("change", function (event) {
updateBall(event.target);
}, true);
document.addEventListener("keydown", function (event) {
const input = event.target;
if (!input.matches("#number-checker .digit-input")) {
return;
}
const inputs = getInputs();
const index = inputs.indexOf(input);
if (
event.key === "Backspace" &&
input.value === "" &&
index > 0
) {
inputs[index - 1].focus();
}
}, true);
document.addEventListener("click", async function (event) {
const searchButton = event.target.closest("#number-checker #search");
if (!searchButton) {
return;
}
event.preventDefault();
const inputs = getInputs();
const modal = document.getElementById("result-modal");
const title = document.getElementById("modal-title");
const message = document.getElementById("modal-message");
const matchDates = document.getElementById("match-dates");
const digits = inputs.map(function (input) {
return input.value;
});
if (
digits.length !== 6 ||
digits.some(function (digit) {
return digit.length !== 1 || isNaN(digit);
})
) {
alert("Please enter one digit in each field.");
return;
}
let highestMatch = 0;
let allMatches = [];
try {
const response = await fetch(feedUrl);
if (!response.ok) {
throw new Error("Failed to fetch lottery feed.");
}
const xmlText = await response.text();
const parser = new DOMParser();
const documentContent = parser.parseFromString(
xmlText,
"text/html"
);
const draws = documentContent.querySelectorAll("div.draw");
draws.forEach(function (draw) {
const dateElement = draw.querySelector("div.draw_date");
const date = dateElement
? dateElement.textContent.trim()
: "Unknown date";
const winners = draw.querySelectorAll("winner");
winners.forEach(function (winner) {
const tagNames = [
"one",
"two",
"three",
"four",
"five",
"six"
];
const winningDigits = tagNames.map(function (tagName) {
const element = winner.querySelector(tagName);
return element
? element.textContent.trim()
: "";
});
let match = 0;
let resultDisplay = "";
for (let index = 0; index < 6; index++) {
if (digits[index] === winningDigits[index]) {
match++;
resultDisplay +=
"<strong>" +
winningDigits[index] +
"</strong>";
} else {
resultDisplay += winningDigits[index];
}
}
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: date,
match: match,
sequence: resultDisplay,
prize: prize,
className: className
});
}
if (match > highestMatch) {
highestMatch = match;
}
});
});
} catch (error) {
console.error(error);
alert("There was a problem loading the lottery feed.");
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."
]
};
const selectedMessage = messages[highestMatch] || messages[0];
title.innerHTML = selectedMessage[0];
message.innerHTML = selectedMessage[1];
if (allMatches.length > 0) {
matchDates.innerHTML =
"<h3>Possible Matches:</h3>" +
'<div class="matchedDraws">' +
allMatches.map(function (match) {
return (
'<div class="matchedDraw ' +
match.className +
'">' +
'<span class="date">' +
"<h3>Draw date: <strong>" +
match.date +
"</strong></h3>" +
"</span>" +
'<span class="prize">' +
"<h4>Prize: <strong>" +
match.prize +
"*</strong></h4>" +
"</span>" +
'<span class="matches">' +
"<h5>with " +
match.match +
" digits matched " +
'(<span class="digitsMatched">' +
match.sequence +
"</span>)</h5>" +
"</span>" +
"</div>"
);
}).join("") +
"</div>" +
"<p><small>* To be eligible to win the prize, your game number must meet the criteria specified in the game rules.</small></p>";
} else {
matchDates.innerHTML = "";
}
modal.style.display = "flex";
modal.classList.add("show");
document.body.style.overflow = "hidden";
});
document.addEventListener("click", function (event) {
const closeButton = event.target.closest(
"#number-checker #close-modal"
);
if (!closeButton) {
return;
}
event.preventDefault();
const modal = document.getElementById("result-modal");
modal.style.display = "none";
modal.classList.remove("show");
document.body.style.overflow = "";
});
const observer = new MutationObserver(function () {
updateAllBalls();
});
observer.observe(document.body, {
childList: true,
subtree: true
});
updateAllBalls();
})();
</script>
<style>
/* NUMBER CHECKER */
#number-checker {
padding: 55px 0 60px;
background: var(--icr-grey-pale);
}
#number-checker .wrapInner {
max-width: 1320px !important;
}
#number-checker #input-container > p {
display: none;
}
#number-checker .numberCheckerContainer {
width: 100%;
}
#number-checker .numberChecker {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 26px;
}
#number-checker .ball {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 152px;
width: 152px;
height: 152px;
margin: 0;
padding: 0;
border-radius: 50%;
background-color: #D9DADB !important;
transition:
background-color .2s ease,
transform .2s ease;
}
#number-checker .ball::after {
content: "";
position: absolute;
z-index: 1;
width: 78px;
height: 78px;
border: 1px solid var(--icr-white);
border-radius: 50%;
pointer-events: none;
}
#number-checker .digit-input {
position: relative;
z-index: 2;
width: 78px;
height: 78px;
margin: 0;
padding: 0;
border: 0 !important;
border-radius: 50%;
background: transparent !important;
color: var(--icr-grey) !important;
box-shadow: none !important;
outline: 0;
appearance: textfield;
-moz-appearance: textfield;
font-family: var(--site-heading-font-family);
font-size: 48px;
font-weight: 400;
line-height: 1;
text-align: center;
}
#number-checker .digit-input::-webkit-inner-spin-button,
#number-checker .digit-input::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
#number-checker .digit-input:focus {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
outline: 0;
}
#number-checker .ball.has-value {
transform: scale(1.02);
}
#number-checker .ball:nth-of-type(1).has-value {
background-color: var(--icr-pink) !important;
}
#number-checker .ball:nth-of-type(2).has-value {
background-color: var(--icr-pink-light) !important;
}
#number-checker .ball:nth-of-type(3).has-value {
background-color: var(--icr-orange) !important;
}
#number-checker .ball:nth-of-type(4).has-value {
background-color: var(--icr-yellow) !important;
}
#number-checker .ball:nth-of-type(5).has-value {
background-color: var(--icr-lime) !important;
}
#number-checker .ball:nth-of-type(6).has-value {
background-color: #B71932 !important;
}
#number-checker .ball:nth-of-type(1).has-value .digit-input,
#number-checker .ball:nth-of-type(2).has-value .digit-input,
#number-checker .ball:nth-of-type(6).has-value .digit-input {
color: var(--icr-white) !important;
}
#number-checker .ball:nth-of-type(4).has-value .digit-input,
#number-checker .ball:nth-of-type(3).has-value .digit-input,
#number-checker .ball:nth-of-type(5).has-value .digit-input {
color: var(--icr-grey) !important;
}
#number-checker #search {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 100%;
max-width: 220px;
height: 58px;
margin: 18px auto 0;
border: 0;
border-radius: 999px;
background: var(--icr-pink);
color: var(--icr-white);
font-family: var(--site-heading-font-family);
font-size: 22px;
font-weight: 500;
text-align: center;
}
#number-checker #search:hover,
#number-checker #search:focus {
background: var(--icr-pink-dark);
color: var(--icr-white);
text-decoration: none;
}
#number-checker .modal {
position: fixed;
inset: 0;
z-index: 999999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, .6);
}
#number-checker .modal.show {
display: flex;
}
#number-checker .modal-content {
width: 100%;
max-width: 620px;
max-height: calc(100vh - 40px);
padding: 42px;
overflow-y: auto;
border: 0;
border-radius: 12px;
background: var(--icr-white);
color: var(--icr-grey);
text-align: center;
}
#number-checker .modal-content h2 {
margin: 0 0 20px;
color: var(--icr-pink);
font-size: 36px;
font-weight: 400;
}
#number-checker .modal-content p {
margin: 0 0 24px;
color: var(--icr-grey);
font-size: 18px;
}
#number-checker .modal-content h2 span {
color: var(--icr-pink);
font-weight: 600;
}
#number-checker .matchedDraws {
margin-top: 25px;
}
#number-checker .matchedDraw {
margin-bottom: 16px;
padding: 20px;
border-radius: 8px;
background: var(--icr-grey-pale);
}
#number-checker .matchedDraw h3,
#number-checker .matchedDraw h4,
#number-checker .matchedDraw h5 {
margin: 0 0 8px;
color: var(--icr-grey);
font-size: 16px;
font-weight: 400;
}
#number-checker .digitsMatched strong {
color: var(--icr-pink);
}
#number-checker #close-modal {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 130px;
min-height: 50px;
margin: 22px auto 0;
padding: 10px 24px;
border: 0;
border-radius: 999px;
background: var(--icr-pink);
color: var(--icr-white);
font-size: 18px;
}
#number-checker #close-modal:hover,
#number-checker #close-modal:focus {
background: var(--icr-pink-dark);
color: var(--icr-white);
}
/* MOBILE VIEW */
@media (max-width: 991px) {
#number-checker {
padding: 45px 0 50px;
}
#number-checker .numberChecker {
gap: 14px;
}
#number-checker .ball {
flex-basis: 88px;
width: 88px;
height: 88px;
}
#number-checker .ball::after {
width: 58px;
height: 58px;
}
#number-checker .digit-input {
width: 58px;
height: 58px;
font-size: 34px;
}
#number-checker #search {
flex-basis: 100%;
width: fit-content;
min-width: 190px;
margin: 16px auto 0;
font-size: 18px;
}
#number-checker .modal-content {
padding: 30px 22px;
}
#number-checker .modal-content h2 {
font-size: 30px;
}
}
</style>