как работают скрипты и для чего
'use strict';

document.addEventListener('DOMContentLoaded', () => {
    const getCssVariable = (variableName) => getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();


    // Пример 1: getElementsByTagName
    const btnEx1 = document.getElementById('but_ex1');
    if (btnEx1) {
        let paragraphsStyledEx1 = false;
        const defaultParagraphColorEx1 = getCssVariable('--secondary-text'); 
        const activeParagraphColorEx1 = getCssVariable('--danger-color');

        btnEx1.addEventListener('click', () => {
            // Получаем коллекцию КАЖДЫЙ РАЗ при клике
            const paragraphsEx1 = document.getElementById('example1').getElementsByTagName('p');
            const newColor = paragraphsStyledEx1 ? defaultParagraphColorEx1 : activeParagraphColorEx1;
            const newButtonText = paragraphsStyledEx1 ? 'Сделать красным' : 'Сбросить цвет';

            for (let i = 0; i < paragraphsEx1.length; i++) {
                paragraphsEx1[i].style.color = newColor;
            }
            btnEx1.value = newButtonText;
            paragraphsStyledEx1 = !paragraphsStyledEx1;
        });
    }

    // Пример 2: getElementsByClassName
    const btnEx2 = document.getElementById('but_ex2');
    if (btnEx2) {
        let isPinkStyledEx2 = false; 
        const pinkBgColorEx2 = getCssVariable('--pink-bg');
        const turquoiseBgColorEx2 = getCssVariable('--turquoise-bg');
        const textColorOnColoredBgEx2 = getCssVariable('--text-on-colored-bg');

        btnEx2.addEventListener('click', () => {
            const elementsWww = document.getElementById('example2').getElementsByClassName('www');
            const newBgColor = isPinkStyledEx2 ? turquoiseBgColorEx2 : pinkBgColorEx2;
            const newButtonText = isPinkStyledEx2 ? 'Залить розовым' : 'Залить бирюзовым';

            for (let i = 0; i < elementsWww.length; i++) {
                elementsWww[i].style.backgroundColor = newBgColor;
                elementsWww[i].style.color = textColorOnColoredBgEx2; // Для читаемости
            }
            btnEx2.value = newButtonText;
            isPinkStyledEx2 = !isPinkStyledEx2;
        });
    }

    // Пример 3: innerHTML (alert)
    const btnEx3 = document.getElementById('but_ex3');
    const pEx3 = document.getElementById('test_ex3');
    if (btnEx3 && pEx3) {
        btnEx3.addEventListener('click', () => {
            alert(`Содержимое абзаца (innerHTML):\n${pEx3.innerHTML}\n\nСодержимое абзаца (textContent):\n${pEx3.textContent}`);
        });
    }

    // Пример 4: innerHTML (replace)
    const btnEx4 = document.getElementById('but_ex4');
    const pEx4 = document.getElementById('test_ex4');
    if (btnEx4 && pEx4) {
        const originalTextEx4 = pEx4.innerHTML; // Сохраняем исходный текст
        let isReplacedEx4 = false;

        btnEx4.addEventListener('click', () => {
            if (isReplacedEx4) {
                pEx4.innerHTML = originalTextEx4;
                btnEx4.value = "Заменить на !!!";
            } else {
                pEx4.innerHTML = '!!!';
                btnEx4.value = "Вернуть текст";
            }
            isReplacedEx4 = !isReplacedEx4;
        });
    }

    // Пример 5: innerHTML (add/wrap)
    const btnEx5 = document.getElementById('but_ex5');

    const pEx5Container = document.getElementById('test_ex5')?.parentNode;

    if (btnEx5 && pEx5Container) {
        let originalOuterHTMLEx5 = document.getElementById('test_ex5')?.outerHTML; 
        let isTransformedEx5 = false;
        const transformedElementIdEx5 = 'test_ex5_transformed_h1';

        btnEx5.addEventListener('click', () => {
            const currentPEx5 = document.getElementById('test_ex5');
            const currentH1Ex5 = document.getElementById(transformedElementIdEx5);

            if (isTransformedEx5) { 
                if (currentH1Ex5 && originalOuterHTMLEx5) {
                    currentH1Ex5.outerHTML = originalOuterHTMLEx5;
                }
                btnEx5.value = "Обернуть в H1 и добавить !!!";
            } else { 
                if (currentPEx5) {

                    if (!originalOuterHTMLEx5) originalOuterHTMLEx5 = currentPEx5.outerHTML;
                    const originalText = currentPEx5.textContent || ""; 
                    currentPEx5.outerHTML = `<h1 id="${transformedElementIdEx5}">${originalText.trim()}!!!</h1>`;
                } else if (originalOuterHTMLEx5) {
                   
                    const textFromOriginal = originalOuterHTMLEx5.match(/>(.*?)</) ? (originalOuterHTMLEx5.match(/>(.*?)</)[1] || "Текст") : "Текст";
                     
                    if (currentH1Ex5) currentH1Ex5.remove();
                    pEx5Container.insertAdjacentHTML('afterbegin', `<h1 id="${transformedElementIdEx5}">${textFromOriginal.trim()}!!!</h1>`);
                }
                btnEx5.value = "Вернуть в P";
            }
            isTransformedEx5 = !isTransformedEx5;
        });
    }


    // Пример 6: innerHTML (replace all 'p' in container)
    const btnEx6 = document.getElementById('but_ex6');
    const containerEx6 = document.getElementById('content_ex6');
    if (btnEx6 && containerEx6) {
        let originalParagraphsContentEx6 = [];
        let isReplacedEx6 = false;

        btnEx6.addEventListener('click', () => {
            const paragraphsEx6 = containerEx6.getElementsByTagName('p'); // Получаем "живую" коллекцию

            if (isReplacedEx6) {
                for (let i = 0; i < paragraphsEx6.length; i++) {
                    if (originalParagraphsContentEx6[i] !== undefined) {
                        paragraphsEx6[i].innerHTML = originalParagraphsContentEx6[i];
                    }
                }
                btnEx6.value = "Заменить все P";
                originalParagraphsContentEx6 = [];
            } else {
                originalParagraphsContentEx6 = []; 
                
                Array.from(paragraphsEx6).forEach(p => {
                    originalParagraphsContentEx6.push(p.innerHTML);
                    p.innerHTML = '<strong>Заменено!</strong>'; 
                });
                btnEx6.value = "Вернуть исходные P";
            }
            isReplacedEx6 = !isReplacedEx6;
        });
    }

    // Пример 7: Событие change
    const inputEx7 = document.getElementById('rez_ex7');
    const listEx7 = document.getElementById('list_ex7');
    const statusEx7 = document.getElementById('status_ex7'); // Элемент для вывода статуса
    if (inputEx7 && listEx7 && statusEx7) {
        let lastHighlightedLiEx7 = null;
        const listItemsEx7 = listEx7.getElementsByTagName('li');

        inputEx7.addEventListener('change', () => {
            const value = inputEx7.value.trim();
            const index = parseInt(value, 10) - 1;
            statusEx7.textContent = ''; // Очищаем предыдущий статус

            // Снимаем выделение с предыдущего элемента
            if (lastHighlightedLiEx7) {
                lastHighlightedLiEx7.classList.remove('highlighted');
                lastHighlightedLiEx7 = null;
            }

            if (value === "") { // Если поле пустое, ничего не делаем (или сбрасываем)
                return;
            }

            if (!isNaN(index) && index >= 0 && index < listItemsEx7.length) {
                listItemsEx7[index].classList.add('highlighted');
                lastHighlightedLiEx7 = listItemsEx7[index];
                statusEx7.textContent = `Элемент ${index + 1} выделен.`;
                statusEx7.style.color = getCssVariable('--success-color');
            } else {
                statusEx7.textContent = 'Неверный номер!';
                statusEx7.style.color = getCssVariable('--danger-color');
                // inputEx7.value = ''; // Опционально: очищать поле при ошибке
            }
        });
    }


    //  Лабораторная работа №8 - Вариант 12

    //  Задание 1: Подчеркивание H2 
    const btnV12_1 = document.getElementById('v12_b1');
    if (btnV12_1) {
        let headingsUnderlinedV12 = false;
        btnV12_1.addEventListener('click', () => {
            // Ищем H2 внутри первого .task в секции #variant12
            const headersV12 = document.querySelectorAll('#variant12 .task:nth-of-type(1) .content h2');
            if (headersV12.length > 0) {
                headingsUnderlinedV12 = !headingsUnderlinedV12;
                headersV12.forEach(h2 => {
                    h2.classList.toggle('underlined', headingsUnderlinedV12);
                });
                btnV12_1.textContent = headingsUnderlinedV12 ? 'Убрать подчеркивание' : 'Сделать подчеркивание';
            } else {
                console.error("V12 Task 1: Заголовки H2 не найдены в указанном контейнере.");
            }
        });
    } else {
        console.error("V12 Task 1: Кнопка (v12_b1) не найдена!");
    }


    //  Задание 2: Жирный шрифт и картинка для class="r" 
const btnV12_2 = document.getElementById('v12_b2');
// const elementsRV12 = document.querySelectorAll('#variant12 .task:nth-of-type(2) .content .r'); // Можно получать внутри обработчика
const imageUrlV12 = 'coffee_4.gif'; // Ваша переменная с именем GIF-файла
let rElementsStyledV12 = false; // Переименовал для ясности (было stateV12_2)

if (btnV12_2) { // Проверяем только кнопку, элементы .r будем искать при клике
    btnV12_2.addEventListener('click', () => {
        const elementsRV12 = document.querySelectorAll('#variant12 .task:nth-of-type(2) .content .r'); // Находим элементы при каждом клике
        
        if (elementsRV12.length === 0) {
            console.error("V12 Task 2: Элементы с классом 'r' не найдены при клике.");
            return; // Если нет элементов, выходим
        }

        rElementsStyledV12 = !rElementsStyledV12; // Инвертируем состояние

        elementsRV12.forEach(el => {
            el.classList.toggle('bold', rElementsStyledV12);


            if (rElementsStyledV12) {

                if (!el.querySelector('img.added-image')) { // Проверяем по классу, чтобы не добавить дубликат
                    const img = document.createElement('img');
                    img.src = imageUrlV12;
                    img.alt = 'coffee'; 
                    img.classList.add('added-image'); 
                
                    el.appendChild(img);
                }
            } else {
                // Удаляем картинку, если она есть
                const existingImg = el.querySelector('img.added-image');
                if (existingImg) {
                    existingImg.remove();
                }
            }
        });

        btnV12_2.textContent = rElementsStyledV12 ? 'Убрать жирность и картинку' : 'Сделать жирным и добавить картинку';
    });
} else {
    console.error("V12 Task 2: Кнопка (v12_b2) не найдена!");
}


    //Задание 3 Видимость абзацев по чекбоксам
    const task3Container = document.querySelector('#variant12 .task:nth-of-type(3) .content');
    if (task3Container) {
        const checkboxesV12 = task3Container.querySelectorAll('input[type="checkbox"]');

        const toggleParagraphVisibilityV12 = (checkbox) => {
            const parentDiv = checkbox.closest('div');
            if (!parentDiv) return;
            const correspondingParagraph = parentDiv.querySelector('p.v12_p');

            if (correspondingParagraph) {
                correspondingParagraph.classList.toggle('hidden', !checkbox.checked);
            } else {
                console.warn("V12 Task 3: Не найден абзац для чекбокса:", checkbox.id);
            }
        };

        if (checkboxesV12.length > 0) {
            checkboxesV12.forEach(checkbox => {
                // начальное состояние видимост
                toggleParagraphVisibilityV12(checkbox);

                checkbox.addEventListener('change', () => {
                    toggleParagraphVisibilityV12(checkbox);
                });
            });
        } else {
            console.error("V12 Task 3: Чекбоксы не найдены!");
        }
    } else {
        console.error("V12 Task 3: Контейнер для задания 3 не найден!");
    }
});