Fehax

import React, { useEffect, useState } from "react";
import { useAppDispatch, useAppSelector } from "../hooks/hooks";
import "./styles/Tester.scss";
import { keyboardHandler, startTyping } from "../store/typer.slice";

const Tester: React.FC = () => {
  const accuracy = useAppSelector((state) => state.typer.accuracy);
  const text = useAppSelector(({ typer: { text } }) => Array.from(text));
  const time = useAppSelector((state) => state.typer.time);
  const words = useAppSelector((s) => s.typer.words);
  const completeWords = useAppSelector((s) => s.typer.completeWords);
  const key = useAppSelector((state) => state.typer.key);
  const characters = useAppSelector((state) => state.typer.countCharacters);
  const inputText = useAppSelector((s) => s.typer.inputText);
  const dispatch = useAppDispatch();

  const [printedText, setPrintedText] = useState(""); // Новое состояние для хранения текста с обернутыми символами

  useEffect(() => {
    const keyHandler = (event: KeyboardEvent) => {
      dispatch(keyboardHandler(event.key));
    };
    dispatch(startTyping());
    document.addEventListener("keydown", keyHandler);
    return () => {
      document.removeEventListener("keydown", keyHandler);
    };
  }, []);

  const inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    let newPrintedText = "";
    for (let i = 0; i < text.length; i++) {
      if (i < value.length) {
        // Проверка на наличие символа в введенном тексте
        if (text[i] === value[i]) {
          newPrintedText += `<span class="highlight">${text[i]}</span>`; // Обернуть символ в <span> с классом highlight
        } else {
          newPrintedText += text[i]; // Добавить символ без обертки
        }
      } else {
        newPrintedText += text[i]; // Добавить символ без обертки
      }
    }
    setPrintedText(newPrintedText);
  };

  return (
    <div className="testWrapper">
      <div>
        <p
          className="textForTest"
          dangerouslySetInnerHTML={{ __html: printedText }} // Используйте dangerouslySetInnerHTML для отображения HTML-разметки
        />
        <input
          value={inputText}
          onChange={inputOnChange}
          type="text"
          placeholder="text"
        />
        <p>Last character: {key}</p>
        <div className="typeStatistics">
          <span className="statisticsItem">Accuracy: {accuracy}%</span>
          <span className="statisticsItem">
            Characters per minute: {characters}
          </span>
          <span className="statisticsItem">Time: {time} s.</span>
        </div>
      </div>
      <div className="controls">
        <button>Start</button>
        <button>Restart</button>
      </div>
    </div>
  );
};

export default Tester;

.highlight {
  background-color: yellow;
}

<div class="block">
  <div class="block__element block__element_red">Этот див должен быть красным</div>
  <div class="block__element block__element_green">а этот зелёным</div>
  <div class="block__element block__element_blue">этот синим</div>
</div>

// если будут более сложные модификаторы
<div class="block">
  <div class="block__element block__element_color block__element_color_red">Этот див должен быть красным</div>
  <div class="block__element block__element_color block__element_color_green">а этот зелёным</div>
  <div class="block__element block__element_color block__element_color_blue">этот синим</div>
</div>

.block {
  &__element {
    &_color {
      &_red {
        color: red;
      }
    }
  }
}

<div class="wrapper">
<header class="header">...</header>
<div class="header-image">...</div>
...
</div>

def sum_of_three_shift(mylist):
    result=[]
    value=0
    k=0
    t=0
    while(t< len(mylist)-3):
        for i in range(t,len(mylist)):
            value+=mylist[i]
            k+=1
            if k==3:
                result.append(value/3)
                value=0
                k=0
                t=t+1
                break
        
    return result

mylist = list(range(1, 26))  # Делаем массив с элементами от 1 до 25
m = []  # Делаем пустой массив куда будем заносить результаты

for n in range(23):
    sum_ = mylist[n] + mylist[n + 1] + mylist[n + 2]  # Сумма 3 подряд идущих элементов от n
    m.append(sum_ / 3)  # Добавление результата

print(m)