JavaScript is a powerful programming language that can create dynamic websites, mobile apps, browser games, server applications, etc. Due to the versatility of this programming language, this language has become the most used programming language in the world. A lot of beautiful snippets can be created with JavaScript. One of these snippets is to change the color of the text every second. Today we will create this snippet with javascript, HTML, and CSS. But first of all, please watch the video tutorial below. This will help you to understand the code after collecting it.
Video Tutorial:
In this example, we have taken a p tag whose id is content. The text 'Text Color Change' has been taken into it. The text has been styled so that it is easy to notice.
You May Also Like:
- Bootstrap 5 Landing Page Website
- Bootstrap 5 Testimonials with Flip Animation
- Login and Signup Form Switch Animation
In the javascript part, we have created an array of our favorite colors or the colors we want to use for this snippet. After that, we define a function called changeColor. This function will randomly select a color from the array and set the text color of our p tag element with the id "content". Lastly, we used the setInterval method to call the changeColor function every 1000 milliseconds or 1 second. In this process, the text color will change continuously after every second. We have taken twenty colors for this project but you can take as many colors as you want. You can use JavaScript to make this project more dynamic.
Source Code:
<!DOCTYPE html>
<!-- divinectorweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Color change in every second</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="content"><span>text color</span> <br /> change</p>
<script>
var colors = ["tomato", "brown", "chartreuse", "chocolate", "cyan", "crimson", "salmon", "green", "gray", "turquoise", "violet", "pink", "fuchsia", "gold", "indigo", "khaki", "lavender", "coral", "deepskyblue", "maroon"];
var index = 0;
function changeColor() {
var randomIndex = Math.floor(Math.random() * colors.length);
var color = colors[randomIndex];
document.getElementById("content").style.color = color;
}
setInterval(function() {
changeColor();
}, 1000);
</script>
</body>
</html>
body{
background: #000;
display: flex;
justify-content:center;
align-items:center;
height: 100vh;
font-family: 'Bebas Neue', cursive;
}
#content {
font-size: 180px;
font-weight: bold;
letter-spacing: 5px;
text-align: center;
line-height: 0.8;
}
#content span{
font-size: 115px;
}
Top comments (0)