Challenge
I'm currently working on a function that processes a list of strings by printing each one on a new line, with CSS animations that gradually display the string over a few seconds. However, I'm struggling to make sure that the next string's animation only starts once the previous one has finished entirely. Below is a snippet of my code - hope it helps clarify my issue.
Desired Outcome
My goal is for the newComputerMessage(messages) function to display each string from the array on a new line only after the previous one has been fully displayed.
let userInputs = [];
const textBox = document.querySelector(".textBox");
const userInput = document.querySelector(".userInput");
const letters = /^[A-Za-z]+$/;
let user = {
name: "",
timeInterval: -1,
halt: false,
quit: false
};
function captureUserInput() {
let text = userInput.value;
userInput.value = "";
return text;
}
function nameEntered() {
enteredName = captureUserInput();
if (!enteredName.match(letters)) {
newComputerMessage(">>Please only use Letters");
} else {
user.name = enteredName;
newComputerMessage([">>Hello there " + user.name, ">>Second message"]);
}
}
function newComputerMessage(messages) {
for (let index = 0; index < messages.length; index++) {
const newPElement = document.createElement("p");
newPElement.innerHTML = messages[index];
newPElement.setAttribute("class", "computerText");
textBox.appendChild(newPElement);
}
}.textBox {
width: max-content;
}
.computerText {
color: black;
font-family: monospace;
overflow: hidden;
border-right: 0.15em solid orange;
white-space: nowrap;
margin: 0 auto 0 0;
letter-spacing: 0.15em;
animation: typing 3.5s steps(30, end), blink-caret 0.5s step-end infinite;
width: max-content;
}
/* The typing effect */
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from,
to {
border-color: transparent;
}
50% {
border-color: orange;
}
}<body>
<div class="displayScreen">
<div class="textBox">
<p class="computerText">>>Hello, please enter your name below</p>
</div>
</div>
<div class="appInput">
<input class='userInput' type="text" name="fname"><br>
<input onclick="nameEntered()" class="button" type="submit" value="Submit">
</div>
</div>
</body>