Change Text Color in JavaScript

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. We have many videos on front-end development on our YouTube channel. If you are interested in this sector, stay with us by subscribing to our channel.

Video Tutorial:

We hope you have watched the 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. 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.

You May Also Like:

Change Text Color in JavaScript [ Source Code ]:

To create this javascript snippet, first, create an HTML file and a CSS file. You can keep the javascript code in a separate js file and link it with the HTML file. Here we have included the javascript code in the HTML file. After that, copy the code from the code box below and paste it into your files. If the code is not working, you can download the code from the download button below.

ADD HTML:

<!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>

ADD CSS:

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;
  }

We hope the code is working for you. Our Website has source code for many web projects, like CSS animation examples, Responsive website design, Javascript snippets, and much more. To get them, click the Load More button on the bottom of the homepage and keep scrolling down. If you have found our website helpful, please share it with your friends. Thank you very much for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Change Text Color in JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Change Text Color in JavaScript

Video Tutorial:

Change Text Color in JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form