I'm currently working on creating a hacker-like editor(check it on GitHub here)with a welcome message. The idea is that when the space bar is pressed, the welcome message should disappear, and the code editor should appear.
However, I'm facing an issue with the welcome message not disappearing properly. When I press the space bar, instead of the welcome message disappearing and the code editor being displayed, it seems like the welcome message is just being repeated. Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>Hacker Code Editor</title>
<style>
body {
background-color: black;
color: lime;
font-family: "Courier New", monospace;
margin: 0;
padding: 0;
overflow: hidden;
}
#code-area {
width: 100%;
height: 100vh;
display: none;
}
#code-input {
outline: none;
border: none;
background-color: black;
color: lime;
font-family: "Courier New", monospace;
font-size: 16px;
width: 100%;
height: 100%;
}
#code-input:focus {
outline: none;
}
#welcome-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 16px;
}
#continue-message {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #888;
font-size: 14px;
opacity: 0;
}
</style>
<script>
const welcomeText = "Welcome to the Hacker Terminal.";
const nextText = "Here you enter your HTML/CSS/JS code in this hacker-like editor! You can then preview the output in a new tab.";
const typingDelay = 50; // Delay between typing each character
const revealDelay = 3000; // Delay before revealing continue message
let welcomeMessageElement;
let continueMessageElement;
let codeAreaElement;
function typeWelcomeMessage() {
welcomeMessageElement = document.getElementById("welcome-message");
continueMessageElement = document.getElementById("continue-message");
codeAreaElement = document.getElementById("code-area");
welcomeMessageElement.style.display = "block";
welcomeMessageElement.innerHTML = ""; // Clear existing text
typeText(welcomeText, welcomeMessageElement, 0, function() {
typeNextText(nextText, welcomeMessageElement, function() {
setTimeout(revealContinueMessage, revealDelay);
});
});
}
function typeNextText(text, element, callback) {
element.innerHTML += "<br><br>"; // Add line breaks
typeText(text, element, 0, callback);
}
function revealContinueMessage() {
continueMessageElement.style.opacity = 1;
}
function handleKeyDown(event) {
if (event.code === "Space") {
event.preventDefault();
if (welcomeMessageElement.style.display === "block") {
welcomeMessageElement.style.display = "none";
continueMessageElement.style.display = "none";
codeAreaElement.style.display = "block";
codeAreaElement.focus();
}
}
}
function typeText(text, element, index, callback) {
if (index < text.length) {
setTimeout(function() {
element.innerHTML += text.charAt(index);
index++;
typeText(text, element, index, callback);
}, typingDelay);
} else {
callback();
}
}
window.addEventListener("load", function() {
typeWelcomeMessage();
});
</script>
</head>
<body>
<div id="welcome-message"></div>
<div id="code-area">
<pre id="code-input" contenteditable="true" placeholder="Type your HTML/CSS/JS code here..." spellcheck="false" onkeydown="handleKeyDown(event)"></pre>
</div>
<div id="continue-message">Press the space bar to continue...</div>
</body>
</html>
The issue I'm facing is that when I press the space bar, the welcome message doesn't disappear as intended, and the code editor is not displayed. Instead, it seems like the welcome message is displayed again.
I have already implemented the necessary JavaScript code to handle the space bar key press event and hide the welcome message while displaying the code editor. However, it's not working as expected.
I would greatly appreciate any insights or suggestions on how to fix this issue and properly hide the welcome message while showing the code editor when the space bar is pressed. Thank you in advance!