I have a function that detects the users keyboard, and when the user writes the combination of 4 2 0 on his keyboard, I'm trying to have a popup-modal open up.
<script type="text/javascript" src="main.js"></script>
<script language="javascript">
easteregg();
</script>
<div id="myModal" class="modaljs">
<div class="modal-contentjs">
<span class="close">×</span>
<p>You made it!</p>
</div>
</div>
function easteregg() {
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
let sequence = '';
window.addEventListener('keyup', function(event) {
sequence = `${sequence}${event.key}`.substr(-3);
if (sequence === '420')
this.modal("show");
})
};
I understand that the
this.modal("show");
is wrong, but I dont know what to put in there.
You can use Bootstrap and Vanilla.js to do it.
Bootstrap 5 no longer needs jQuery as a dependency since JavaScript can provide the same functionality.
e. g.
const _tmp = [];
const _modal = document.getElementById('exampleModal');
const openModal = () => {
_modal.style.display = 'block';
_modal.classList.add('show');
}
window.addEventListener('keyup', (e) => {
const charCode = (e.which) ? e.which : e.keyCode;
_tmp.push(String.fromCharCode(charCode));
if (_tmp.length > 3) _tmp.shift();
if (_tmp.join('') === '420') openModal();
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="nofollow" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
You made it!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>