Szkola

Tablice array

// Nasza główna tablica (array) przechowująca dane bloczków
let blockArray = ["0", "1", "2", "3", "4"];
let counter = 5; // Licznik do nazywania nowych bloków

// Funkcja renderująca tablicę na ekranie
function render() {
    const container = document.getElementById('container');
    container.innerHTML = ''; // Czyścimy kontener przed ponownym rysowaniem

blockArray.forEach((item, index) => {
        const div = document.createElement('div');
        div.className = 'block';
        
        // Tworzymy napis i przycisk w jednej linii
        div.innerHTML = `
            <span>${item}</span>
            <button class="delete-btn" onclick="removeBlock(${index})">usun</button>
        `;
        
        container.appendChild(div);
    });
}

// Dodawanie na początek tablicy
function addToFront() {
    blockArray.unshift(`${counter++}`);
    render();
}

// Dodawanie na koniec tablicy
function addToEnd() {
    blockArray.push(`${counter++}`);
    render();
}

// Dodawanie w środku tablicy
function addToMiddle() {
    const middleIndex = Math.floor(blockArray.length / 2);
    blockArray.splice(middleIndex, 0, `${counter++}`);
    render();
}

// Odwracanie kolejności w tablicy
function reverseArray() {
    blockArray.reverse();
    render();
}

// Usuwanie konkretnego elementu z tablicy
function removeBlock(index) {
    blockArray.splice(index, 1);
    render();
}

// Pierwsze wywołanie, żeby pokazać początkowe bloki
render();