0

Multi color alphabet

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

22nd Mar 2022, 2:55 PM
sneeze
sneeze - avatar
2 odpowiedzi
0
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); }
22nd Mar 2022, 3:44 PM
Shaurya Kushwaha
0
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 ?
24th Mar 2022, 8:25 PM
sneeze
sneeze - avatar