I've recently delved into the world of web development and could use some guidance. I am facing a challenge where I have two texts in the HTML (p tag) on the same line, with one linked to JS using an "ID" and the other to CSS using a "Class" along with keyframes. Additionally, I am struggling to add a static text that displays after the animated text.
My goal is - To have the first text animate by default, and upon triggering JS actions, such as clicking a button, the second text should display a static text on the same line alongside the first text.
Here is my code:
JavaScript
CSS
HTML
let secondText = document.getElementById("second-text");
let a = 1;
let b = 5;
let c = a + b;
let result = "";
function startAction() {
if (c <= 12) {
result = "December";
} else {
result = "Not-Exists";
}
secondText.textContent = result;
console.log(result);
}#second-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
}
.first-text {
margin: 30px;
font-size: 20px;
font-weight: 700;
animation: typing 10s steps(19) infinite;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #111;
width: 19ch;
}
@keyframes typing {
0% {
width: 0ch;
}
50% {
width: 19ch;
}
100% {
width: 0ch;
}
}<p class="first-text" id="second-text">Welcome To My Page</p>
<button onclick="startAction()">Action</button>I would appreciate any insight on what might be causing issues in my code.