New glist roamiiing.js Plugin

"use strict";

window.addEventListener("load", function (){
    let name = "iii"; // Имя
    const TARGET_BOX = document.querySelector("#target"); // Блок, где будет логотип
    let targetDot, k = 0; // Нужные переменные
    name = name.split(""); // Разбиение строки на массив

    name.forEach(el => {
        if(el === "i")TARGET_BOX.innerHTML += `<div class="literal">${el}</div>`; // Вывод div с классом
        else TARGET_BOX.innerHTML += `<div>${el}</div>`; // Вывод обычного div
        console.log(el);
    })

        const TARGET_LIT = document.querySelectorAll(".literal"); // Получение всех div, где есть буква i

        let el = "";

        for(let j = 0; j < TARGET_LIT.length; j++){
            el = TARGET_LIT[j];
            console.log(TARGET_LIT[j].offsetTop + " x " + TARGET_LIT[j].offsetLeft);
            console.log(TARGET_LIT[j].offsetWidth + " x " + TARGET_LIT[j].offsetHeight);
            console.log(TARGET_LIT[j]);
            TARGET_BOX.innerHTML += `<div class='fly-dot' style='top: ${TARGET_LIT[j].offsetTop + 8}px; left: ${TARGET_LIT[j].offsetLeft + 0.8}px'></div>`; // Создаёт точки по количеству букв i со стилями
        }

    document.querySelectorAll(".literal").forEach(el => {
        console.log(el.offsetLeft);
        document.querySelector("#target").innerHTML += `<div class='fly-dot' style='top: ${el.offsetTop + 8}px; left: ${el.offsetLeft + 0.8}px'></div>`;

    });

        console.log(document.querySelectorAll(".literal").forEach(el => {console.log(el.offsetLeft)}));

        /*TARGET_LIT.forEach(el => {
            console.log(el.offsetTop + " x " + el.offsetLeft);
            console.log(el.offsetWidth + " x " + el.offsetHeight);
            TARGET_BOX.innerHTML += `<div class='fly-dot' style='top: ${el.offsetTop + 8}px; left: ${el.offsetLeft + 0.8}px'></div>`; // Создаёт точки по количеству букв i со стилями
        });*/

    // document.querySelectorAll(".literal").forEach(el => {console.log(el.offsetLeft)});
})