Skip to content

Instantly share code, notes, and snippets.

@dreamyguy

dreamyguy/ucrainize-a.js

Last active March 8, 2022 23:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dreamyguy/b40865d8f2d46fc39fc537667a1842cf to your computer and use it in GitHub Desktop.
Save dreamyguy/b40865d8f2d46fc39fc537667a1842cf to your computer and use it in GitHub Desktop.
Download ZIP
Ucrainize text
Raw
ucrainize-a.js
import "./ucrainize-c.css";
const colorizeText = ({ tagName, colorValues }) => {
const els = document.getElementsByTagName(tagName);
for (let el of els) {
const elText = el.innerHTML;
const elChars = elText.split("");
let newText = "";
let colorNumber = 0;
elChars.map(char => {
newText += `<span style="color: ${colorValues[colorNumber]}">${char}</span>`;
colorNumber++;
if (colorNumber === colorValues.length) {
colorNumber = 0;
}
return null;
});
el.innerHTML = newText;
}
};
colorizeText({
tagName: "p",
colorValues: ["#0158b5", "#f5ce02"]
});
Raw
ucrainize-b.html
<!DOCTYPE html>
<html>
<head>
<title>Ucrainize text</title>
<meta charset="UTF-8" />
</head>
<body>
<p>
Look, just because I don't be givin' no man a foot massage don't make it
right for Marsellus to throw Antwone into a glass motherfuckin' house,
fuckin' up the way the nigger talks. Motherfucker do that shit to me, he
better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm
sayin'?
</p>
<a href="https://codesandbox.io/s/ucrainize-gx9pe1">See full code in action</a>
<script src="ucrainize-a.js"></script>
</body>
</html>
Raw
ucrainize-c.css
body {
font-family: sans-serif;
background-color: #222;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment