Seeking assistance in how to approach making pop up reminders delayed by time

@littledaggers

Have a Reminder model with a field "validated"

In your blade show all your reminders not validated with the relevant filter (user, ...)

Use your a Validate button face each reminder to validate this reminder.

You use a modal for the message.

Something like this

Html

<section id="info-modal" class="modal is-hidden">
		<div class="info-modal-content">
			<h3 id="info-header"></h3>
			<div >
				<button id="info-ok-btn" onclick="closeInfo()" class="btn">Ok</button>
			</div>
		</div>
	</section>

CSS

.modal {
	z-index: 10;
	position: absolute;
	top:0;
	left:-5px;
	width: 100%;
	height: 100%;
	overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.info-modal-content {
	background-color: rgb(194, 201, 221);
	margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%; 
}

JS

function showInfo(infoText) {
    let infoHeader = document.querySelector('#info-header');
    let sound = document.querySelector('#attention-sound');
    let modal = document.querySelector('#info-modal');
    sound.play();
    infoHeader.innerHTML = infoText;
    show(modal);
}

function closeInfo() {
    hide(document.querySelector('#info-modal'));
}