Multi color alphabet

Question

I am trying to practice what i have learned in the web development fundamentals course.

I like to show the world all the letters of the alphabet each one in a different color.

I managed to make the javascript code to show the letters.

But now my javascript code and de CSS are detached. Showing a new letter takes 2 seconds.

Can i write CSS code that changes the color every time the letter is changing ?
Should I make the time-frame exactly synchornize with the change of thei letters so 2x26 = 52 seconds, with 26 color in the time frames.

How can I do this the right way ?
https://code.sololearn.com/W8njFMl33glF/?ref=app

Answer 1

you can use the below code to do this -
Css -
p{
font-size: 60px;
color: red;
}

Js -
window.onload = function(){
var i = 0;
var j = 0;
var p = document.querySelector("#p1");
function change() {
var alpha = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
var color = ["red", "yellow", "blue", "green"];
p.textContent= alpha[i];
p.style.color = color[j];
i = (i + 1) % alpha.length;
j = (j + 1) % color.length;
}
setInterval(change, 1000);
}

Answer 2

Thanks, It works great and does give the synchronization I was looking for.

Is this a good way of doing it. In C# there is the separation of layers, so colors are mostly in the xaml (read: UI) and code is in the code-behind(read cs-file)

Could the same be achieved in CSS ?