For my middle school science fair project, I am working on creating an online light bulb that features a hidden surprise, or an "easter egg," that triggers an alert when activated by a specific key press. Below is the current code I have developed:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Online Light Bulb</title>
<link href = "style.css" rel = "stylesheet">
</head>
<body>
<button id = "light-switch">Turn on Light</button>
<p id = "lightStatus">Light is off</p>
<p id = "easterEgg"></p>
</body>
<script src="script.js"></script>
</html>
JS
let swt = document.querySelector("#light-switch");
let sta = document.querySelector("#lightStatus");
let egg = document.querySelector("#easterEgg");
let html = document.querySelector("html");
swt.addEventListener("click", updateSwt);
function updateSwt() {
if(swt.textContent === "Turn on Light"){
swt.textContent = "Turn off Light";
swt.style.backgroundColor = "Yellow";
console.log("on");
sta.textContent = "Light is on";
}
else{
swt.textContent = "Turn on Light";
swt.style.backgroundColor = "Black";
console.log("off");
sta.textContent = "Light is off";
}
}
swt.addEventListener("click",updateConsole);
function updateConsole() {
if(swt.click === true) {
console.log("")
}
else{
console.log("swtClick")
}
}
Attempt to trigger the Easter Egg
swt.addEventListener("keydown", updateEgg);
function updateEgg() {
if(html.keydown === true){
console.log("easter egg found")
alert("You found the easter egg!!!");
}
else{
console.log("")
}