Embedded Files
Code
Code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.hi{
background-color:white;
}
.bye{background-color:blue;display:flex;justify-content:center;
align-items:center;}
body{background-color:blue}
input {
border-radius: 4px;
border: 2px solid black;
background-color:#75e8ff
}
button{
border-radius: 10px;
background-color:#75ffa5
}
button:hover{
background-color:#53934d;}
button:active{
background-color:#41763d;
}
h1{
color:white
}
</style>
</head>
<body>
<center><h1>
Look at the cool animation
</h1>
</center>
<div class="bye">
<input id="a">
<button onclick="handleClick()">
Start cool typing
</button>
</div>
<p id="b" style="background-color:#ffda75;height:200px;border-radius:5px;">
</p>
<script>
function handleClick() {
let hi = document.getElementById("a").value;
let bye = hi.split("");
let i = 0;
document.getElementById("b").innerHTML = ""
document.getElementById("a").value = ""
function typeCharacter() {
if (i < bye.length) {
document.getElementById("b").style.border = "1px solid black"
document.getElementById("b").style.color = "blue"
document.getElementById("b").innerHTML += bye[i];
i++;
setTimeout(typeCharacter, 200);
}
}
typeCharacter();
}
</script>
</body>
</html>
Page updated
Report abuse