0

So when you are using HTML,CSS, and JAVASCRIPT to make a website; how must you use css to make every letter a different color?

How can I make the word "paragraph" have a different color for EACH LETTER so that it creates a rainbow? For example the letter 'p' is red, the letter 'a' is orange, the letter 'r' is yellow, and so on making the colors of the rainbow 🌈...

3rd Jul 2020, 9:43 PM
Ammaar
Ammaar - avatar
3 Réponses
+ 9
This is possible using javascript Step 1 - loop through every character of the string you want to print with rainbow colors Step 2 - for each iteration of the loop you have to use condition statements either if else or switch case, but I'd prefer switch case if each character has its own unique color. Step 3 - when inside the conditional statement that matches your character, you have to create a new span element using this syntax let element = document.createElement("span"); Step 4 - insert the character into element element.innerText = <character value here from loop> Step 5 - add style to the element based on the character element.style.color = <color of your choice depending on the character> Step 6 - insert the element into its parent, your can choose any parent element, I'm using body as example here document.body.appendChild(element) Step 7 - iterate over the next character now also you need to keep in mind of how you handle characters like space, periods etc
3rd Jul 2020, 10:32 PM
Bhavya
Bhavya - avatar
+ 4
Ammaar there is a quick easy way to do this verses assigning each letter to a specific color using css ... https://code.sololearn.com/WDE95CfZ63J7/?ref=app
3rd Jul 2020, 10:15 PM
BroFar
BroFar - avatar
+ 1
Bhavya thank you so much for giving me these steps! it helped me a lot I was so confused omg! 😁
4th Jul 2020, 12:18 AM
Ammaar
Ammaar - avatar