Using the prompt function, I am gathering input and storing it in variable "a". Here is the code snippet:
<script type="text/javascript" language="Javascript">
var a=prompt("Please Enter Your Name 👇👇👇👇👇");
</script>
After storing the text in "a", I aim to display it along with some additional text like "blah blah blah" in a single line with a typewriter effect using CSS.
html {
min-height: 100%;
overflow: hidden;
}
body {
display: flex;
background-repeat: no-repeat;
/* background-attachment: fixed; */
background-image: radial-gradient(black, white);
}
/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
color: #fff;
font-family: monospace;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typewriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* 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>
<script type="text/javascript" language="Javascript">
var a = prompt("Please Enter Your Name 👇👇👇👇👇");
</script>
<div class="typewriter">
<h1>
<script>
document.write(a)
</script>blah blah
</h1>
</div>
</body>When running this code, only the "blah blah blah" animation appears instead of the actual text stored in "a".