My program generates a .txt file, the file now contains a set of characters (up to 16 thousand), I want to organize the output of this file on the html page, but that each character has its own style (color, background) (case-insensitive). Ie if I have the word "Code" in the file, then on the output I would like to see:

K - red letter, black background

o - green letter, black background

d - blue letter, white background

What web tools would you solve this problem? exactly css and html, and how to load and beat the file?

Subsequently, this file, I think, will give me a set of numbers that I would like to turn into symbols and paint (this is already from the side of the page). I would also like to be able to replace the symbol itself with a specific picture (o-red green square, k-red square).

    1 answer 1

    Js. An example of sorting letters and creating an item, placing it in a queue, and then drawing it using requestAnimationFrame

    stackI - number
    as soon as the stack array is populated with the number of stackI elements, stackI is called and then the queue is filled.

     { let genEl = (_color, _border) => { let el = document.createElement('span') el.style.color = _color el.style.border = _border return el } let dictHTML = { zero: genEl('#ffc256', ''), 'А': genEl('red', 'solid 1px black'), 'Б': genEl('green', 'solid 1px black'), 'В': genEl('blue', 'solid 1px white'), } let str = `АБВ Моя программа генерирует .txt файл, файл сейчас содержит набор символов(до 16 тысяч), я хочу организовать вывод этого файла на html страницу, но чтобы каждый символ имел собственный стиль( цвет, фон )(без учета регистра). Тоесть если у меня лежит в файле слово "Код", то на выводе я хотел бы видеть: Моя программа генерирует .txt файл, файл сейчас содержит набор символов(до 16 тысяч), я хочу организовать вывод этого файла на html страницу, АБВ ` let stack = [] let stackI = 300 let render = () => { console.log(`stack.length: ${stack.length}`) stack.forEach(_el => { document.body.appendChild(_el) }) stack = [] c.next() } console.log(`str.length: ${str.length}`); function* C() { for (var i = 0; i < str.length; i++) { let letter = String(str[i]) let el = null; if (!(el = dictHTML[letter.toUpperCase()])) { el = dictHTML['zero'] } el = el.cloneNode() el.innerHTML = letter stack.push(el) if (i % stackI == 0) yield requestAnimationFrame(render) } requestAnimationFrame(render) } let c = C() requestAnimationFrame(render) }

    • although it does not matter here, something I have doubts about the correctness of my use requestAnimationFrame - qwabra