/* =====================================================
MAIN SECTION
===================================================== */
.lw-results-section {
width: 100%;
padding: 0;
font-family: "Inter", Arial, sans-serif;
}
.lw-results-container {
background: #f5f7f5;
border-radius: 22px;
padding: 38px 38px 38px;
text-align: center;
box-sizing: border-box;
}
/* =====================================================
HEADER
===================================================== */
.lw-results-eyebrow {
color: #caff00;
font-size: 12px;
font-weight: 800;
letter-spacing: 1.8px;
margin-bottom: 32px;
}
/* =====================================================
RESULT GRID
===================================================== */
.lw-results-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 18px;
text-align: left;
}
/* =====================================================
RESULT CARD
===================================================== */
.lw-result-card {
background: #ffffff;
border: 1px solid #dce4df;
border-radius: 14px;
padding: 22px;
cursor: pointer;
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}
.lw-result-card:hover {
transform: translateY(-5px);
border-color: #b7cbbf;
box-shadow:
0 15px 30px rgba(3, 48, 37, .10);
}
/* =====================================================
RESULT TITLE
===================================================== */
.lw-result-name {
color: #0c2630;
font-size: 15px;
font-weight: 800;
margin-bottom: 5px;
}
.lw-result-date {
color: #75817c;
font-size: 11px;
}
/* =====================================================
NUMBER BALLS
===================================================== */
.lw-result-balls {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin-top: 20px;
}
.lw-result-ball {
width: 36px;
height: 36px;
border-radius: 50%;
background: #edf1ee;
color: #16352c;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
}
/* SPECIAL BALL */
.lw-result-ball.special {
background: #efba14;
color: #ffffff;
}
/* =====================================================
VIEW RESULTS BUTTON
===================================================== */
.lw-view-results {
margin: 30px auto 0;
padding: 14px 22px;
background: #ffffff;
border: 1px solid #aebfb7;
border-radius: 7px;
color: #183d33;
font-size: 13px;
font-weight: 800;
cursor: pointer;
display: flex;
align-items: center;
gap: 15px;
transition: .25s ease;
}
.lw-view-results:hover {
background: #06382c;
border-color: #06382c;
color: #caff00;
transform: translateY(-2px);
}
.lw-view-results span {
font-size: 18px;
}
/* =====================================================
MODAL
===================================================== */
.lw-modal {
position: fixed;
inset: 0;
background:
rgba(3, 22, 18, .75);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
z-index: 999999;
opacity: 0;
visibility: hidden;
transition:
opacity .25s ease,
visibility .25s ease;
}
.lw-modal.active {
opacity: 1;
visibility: visible;
}
/* =====================================================
MODAL BOX
===================================================== */
.lw-modal-box {
width: min(900px, 100%);
max-height: 90vh;
overflow-y: auto;
background: #ffffff;
border-radius: 22px;
padding: 38px;
position: relative;
transform:
translateY(25px)
scale(.98);
transition: .25s ease;
box-shadow:
0 30px 80px rgba(0,0,0,.3);
}
.lw-modal.active .lw-modal-box {
transform:
translateY(0)
scale(1);
}
/* =====================================================
CLOSE BUTTON
===================================================== */
.lw-modal-close {
position: absolute;
right: 20px;
top: 18px;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid #d8e1dc;
background: #ffffff;
color: #18372f;
font-size: 25px;
line-height: 1;
cursor: pointer;
transition: .2s;
}
.lw-modal-close:hover {
background: #06382c;
color: #caff00;
}
/* =====================================================
MODAL HEADER
===================================================== */
.lw-modal-header {
text-align: center;
margin-bottom: 25px;
}
.lw-modal-header .lw-results-eyebrow {
margin-bottom: 8px;
}
.lw-modal-header h2 {
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 38px;
color: #102b35;
margin: 0 0 8px;
}
.lw-modal-header p {
color: #718079;
font-size: 13px;
margin: 0;
}
/* =====================================================
SEARCH
===================================================== */
.lw-search-box {
position: relative;
margin-bottom: 25px;
}
.lw-search-box input {
width: 100%;
height: 48px;
border: 1px solid #d5dfda;
border-radius: 8px;
padding: 0 45px 0 16px;
box-sizing: border-box;
outline: none;
font-size: 13px;
color: #16352c;
}
.lw-search-box input:focus {
border-color: #82b30c;
box-shadow:
0 0 0 3px
rgba(130,179,12,.10);
}
.lw-search-box span {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
color: #718079;
}
/* =====================================================
MODAL RESULT LIST
===================================================== */
.lw-modal-results {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 15px;
}
.lw-modal-card {
border: 1px solid #dce4df;
border-radius: 12px;
padding: 20px;
}
.lw-modal-card-header {
display: flex;
justify-content: space-between;
gap: 15px;
margin-bottom: 15px;
}
.lw-modal-card-name {
font-weight: 800;
color: #102b35;
font-size: 14px;
}
.lw-modal-card-date {
font-size: 10px;
color: #7b8781;
}
/* =====================================================
EMPTY SEARCH
===================================================== */
.lw-no-results {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: #718079;
font-size: 13px;
}
/* =====================================================
TABLET
===================================================== */
@media (max-width: 950px) {
.lw-results-grid {
grid-template-columns:
repeat(2, 1fr);
}
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 650px) {
.lw-results-container {
padding: 30px 18px;
border-radius: 18px;
}
.lw-results-grid {
grid-template-columns: 1fr;
}
.lw-modal-box {
padding: 28px 18px;
}
.lw-modal-results {
grid-template-columns: 1fr;
}
.lw-modal-header h2 {
font-size: 30px;
}
}
/* =====================================================
SMALL PHONE
===================================================== */
@media (max-width: 400px) {
.lw-result-balls {
gap: 5px;
}
.lw-result-ball {
width: 33px;
height: 33px;
}
}
(function () {
/* =================================================
LOTTERY DATA
EDIT YOUR RESULTS HERE
================================================= */
function dynamicDate(daysAgo) {
const date = new Date();
date.setDate(
date.getDate() - daysAgo
);
return new Intl.DateTimeFormat(
"en-US",
{
day: "numeric",
month: "short",
year: "numeric"
}
).format(date);
}
const lotteryResults = [
{
name: "Powerball",
date: dynamicDate(0),
numbers: ["12", "27", "34", "45", "67"],
special: "23"
},
{
name: "Mega Millions",
date: dynamicDate(1),
numbers: ["04", "18", "23", "46", "62"],
special: "15"
},
{
name: "Florida Lotto",
date: dynamicDate(2),
numbers: ["03", "16", "28", "35", "52"],
special: "09"
},
{
name: "New York Lotto",
date: dynamicDate(3),
numbers: ["06", "14", "24", "33", "47"],
special: "11"
},
{
name: "California SuperLotto",
date: dynamicDate(4),
numbers: ["08", "21", "29", "41", "44"],
special: "18"
},
{
name: "Texas Lotto",
date: dynamicDate(5),
numbers: ["05", "17", "26", "38", "49"],
special: "07"
},
{
name: "Georgia Lotto",
date: dynamicDate(6),
numbers: ["02", "13", "25", "31", "48"],
special: "09"
},
{
name: "Ohio Lotto",
date: dynamicDate(7),
numbers: ["11", "19", "27", "39", "46"],
special: "14"
}
];
/* =================================================
ELEMENTS
================================================= */
const resultsGrid =
document.getElementById("lwResultsGrid");
const viewResults =
document.getElementById("lwViewResults");
const modal =
document.getElementById("lwResultsModal");
const modalClose =
document.getElementById("lwModalClose");
const modalResults =
document.getElementById("lwModalResults");
const search =
document.getElementById("lwSearch");
/* =================================================
CREATE BALLS
================================================= */
function createBalls(result) {
let html = "";
result.numbers.forEach(function(number) {
html += `
${number}
`;
});
/* SPECIAL NUMBER */
html += `
${result.special}
`;
return html;
}
/* =================================================
CREATE MAIN CARDS
================================================= */
function createMainCard(result) {
return `
${result.name}
${result.date}
${createBalls(result)}
`;
}
/* =================================================
DISPLAY MAIN RESULTS
================================================= */
function displayMainResults() {
resultsGrid.innerHTML =
lotteryResults
.slice(0, 4)
.map(createMainCard)
.join("");
}
/* =================================================
CREATE MODAL CARD
================================================= */
function createModalCard(result) {
return `
${createBalls(result)}
`;
}
/* =================================================
DISPLAY MODAL RESULTS
================================================= */
function displayModalResults(data) {
if (!data.length) {
modalResults.innerHTML = `
No lottery results found.
`;
return;
}
modalResults.innerHTML =
data
.map(createModalCard)
.join("");
}
/* =================================================
OPEN MODAL
================================================= */
viewResults.addEventListener(
"click",
function() {
displayModalResults(
lotteryResults
);
modal.classList.add("active");
document.body.style.overflow =
"hidden";
search.value = "";
}
);
/* =================================================
CLOSE MODAL
================================================= */
function closeModal() {
modal.classList.remove("active");
document.body.style.overflow =
"";
}
modalClose.addEventListener(
"click",
closeModal
);
/* =================================================
CLICK OUTSIDE MODAL
================================================= */
modal.addEventListener(
"click",
function(event) {
if (
event.target === modal
) {
closeModal();
}
}
);
/* =================================================
ESC KEY
================================================= */
document.addEventListener(
"keydown",
function(event) {
if (
event.key === "Escape" &&
modal.classList.contains("active")
) {
closeModal();
}
}
);
/* =================================================
SEARCH
================================================= */
search.addEventListener(
"input",
function() {
const query =
this.value
.toLowerCase()
.trim();
const filtered =
lotteryResults.filter(
function(result) {
return result.name
.toLowerCase()
.includes(query);
}
);
displayModalResults(filtered);
}
);
/* =================================================
INITIALIZE
================================================= */
displayMainResults();
})();