Упражнение 2 Банков Решения на примери от 02.11.2021

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            // task1();
            // task2();
            // task3();
            // task4();
            task5();
        });

        const task1 = () => {
            let printText = document.getElementsByTagName('p');
            console.log(printText[0].innerHTML);
            printText[0].style['background'] = 'orange';
        }

        const task2 = () => {
            let div = document.getElementsByTagName('div');
            console.log(div[0].innerText);
            console.log(div[1].innerText);
        }

        const task3 = () => {
            let item = document.getElementById('list');
            console.log(item);
        }

        const task4 = () => {
            let link = document.getElementsByClassName('link');
            console.log(link[0].innerText);
            link[0].innerText = 'Changed';
            link[0].innerHTML = 'Changed + image <img src="http://placehold.it/150x150"/>';
            // link[0].innerText = '<img src="http://placehold.it/150x150"/>';
        }

        const task5 = () => {
            let items = document.getElementsByTagName('li');
            console.log(items[0].innerText);
            for(let i = 0; i < items.length; i++){
                if(items[i].innerText == 'Item'){
                    items[i].innerHTML = '<a href="#"> Varna </a>';
                    items[i].style.fontSize = 10+i*5+'px';
                }
            }
        }
    </script>
</head>
<body>
    <a href="" class="link"> Кликни тук <span> ЗА НАГРАДА </span> </a>

    <ul id="list">
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
        <li>
            <a href="#">Item</a>
        </li>
    </ul>
    <p>
        Lorem, ipsum dolor sit amet, consectetur adipisicing elit. Labore doloremque omnis voluptatem ex. Nostrum, eligendi qui? Deserunt, perferendis temporibus aperiam aliquid eligendi corrupti, recusandae. Minima porro ea temporibus repellendus voluptatem!
    </p>
    <div>
        Студент специалност МУТ
    </div>
    <div>
        ИУ - Варна
    </div>
</body>
</html>