Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            margin:12px 16px;
            color:white;
        }
        .nav{
            padding:10px;
        }
        .page{
            background-color: cadetblue;
            width: 420px;
        }

        .page-2 {
            background:royalblue;
            width: 600px;
        }
        ul{
            display: flex;
            flex-direction: row;
            /*list-style-type: none;*/
            vertical-align: top;
            margin:10px 0px;
            padding:0px;
        }
        ul>li{
            width:25%;
            margin:0 8px;
        }
        .nav a{
            text-decoration: none;
            color: crimson;
            display: inline-block;
            border: 5px solid black;
            background-color: cornsilk;
            padding: 5px;
        }
        a:hover {
            background-color: crimson;
            color: cornsilk;
        }
        .columns{
           display: flex;
           flex-direction: row;
        }
        .lcol, .rcol{
            background-color: whitesmoke;
            padding: 10px;
            margin:0 8px;
            width: 50%;
        }

        .title{
            margin: 12px 0px 12px 0px;
            text-align: center;
        }

        .profile{
            background-color: whitesmoke;
            padding: 10px 90px 10px 10px;
            display: inline-block;
            margin: 20px 10px 20px 12px;
        }
        .p{
            padding-bottom:12px;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', (e) => {

            let task1 = document.querySelectorAll('a');
            task1.forEach(item => {
                console.log(item.innerText);
                // console.log(item.href);
                // item.href = "https://www.google.bg";
            });

            let task2 = document.querySelectorAll('.title');
            task2.forEach(item => {
                console.log(item.innerText);
            });

            let task3 = document.querySelectorAll('p');
            task3.forEach((item, index) => {
                // let param = item.innerText;
                // item.innerText = "НОВ ПАРАГРАФ " + (index+1);
                item.innerText = `НОВ ПАРАГРАФ ${index+1}`;
            });

            let task4 = document.querySelectorAll('img');
            task4.forEach(item => {
                console.log(item.src);
            });

            // let task5 = document.querySelectorAll('img');
            // task5.forEach(item => {
            //  item.src = 'http://placehold.it/20x80';
            // });

            let task6 = document.querySelectorAll('.columns > div');
            task6.forEach(item => {
                console.log(item.className);

            });

            let task7 = document.querySelectorAll('.columns > div');
            task7.forEach(item => {
                item.style.background = "magenta";
                item.style['background'] = "darkgreen";

                item.style.fontSize = "18px";
                item.style['font-size'] = "18px";

            });

            document.querySelectorAll('ul')[0].style.listStyleType = 'none';
            document.querySelectorAll('ul')[0].style['list-style-type'] = 'none';
   //       function edit() {
            // [...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.box')
            //     .style.background= 'red';
            // }

            let task8 = document.querySelectorAll('.page')[0];
            task8.className = 'page-2';

            // let task8a = document.querySelectorAll('.page');
            // task8a.forEach(item => {
            //  item.className = 'page-2';
            // });

            let task9 = document.querySelectorAll('img');
            task9.forEach(item => {
                item.style.border = 'solid 2px red';
            });

            let task10 = document.querySelectorAll('img');
            task10.forEach(item => {
                item.addEventListener('mouseenter', (e) => {
                    e.target.style.border = 'solid 15px black';
                });
            });

            let task11 = document.querySelectorAll('a');
            task11.forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    document.body.style.background = 'coral';
                });
            });

            let taskp = document.querySelectorAll('p');
            taskp.forEach((item, index) => {
                if(index == 3) {
                     item.style['font-weight'] = 'bold';
                }
                // item.style['font-weight'] = index == 3 ? 'bold' : '';
            });

            // for(let i = 0; i < taskp.length; i++){
            //     if(i == 3) {
            //         taskp[i].style['font-weight'] = 'bold';
            //     }
            // }

            // let taskp1 = document.querySelectorAll('p')[0];

            // [...document.querySelectorAll('p')].filter((item, index) => index == 1 ? item.style.fontSize = '20px': '');

            const task12 = () => {
                let colors = ['red', 'coral', 'firebrick', 'gold', 'yellow', 'green', 'lightseagreen', 'darkblue', 'blue', 'pink', 'indigo', 'purple', 'gray', 'magenta'];
                let rnd = Math.floor(Math.random()*14);
                return colors[rnd];
            }

            let task13 = document.querySelectorAll('img');
            task13.forEach(item => {
                item.addEventListener('mouseenter', (e) => {
                    e.target.style.border = 'solid 15px ' + task12();
                });
            });

            let task13a = document.querySelectorAll('a');
            task13a.forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    document.body.style.background = task12();
                });
            });

            // const partyBackground = () => {
            //     document.body.style.background = task12();
            // }

            // setInterval(partyBackground, 1000);

            // setInterval(() => {
            //      document.body.style.background = task12();
            //  }, 500);

             const task12B = () => {
                let colors = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
                let rnd = '#';
                for (let i = 0; i < 6; i++) {
                   rnd += colors[Math.floor(Math.random()*16)];
                }
               return rnd;
            }

            // setInterval(() => {
            //     document.body.style.background = task12B();
            // }, 1500);

            let task14 = document.querySelectorAll('p');
            task14.forEach((item, index) => {
                if(index == 0 || index == 3) {
                    item.style.display = 'none';
                }
            });

            // for (let i = 0; i < task14.length; i++) {
            //     // if(i == 0 || i == 3){
            //     //     task14[i].display.style = 'none';
            //     // }

            //     task14[i].display.style = i == 0 || i == 3 ? 'none' : 'block';

            // }

            let task15 = document.querySelectorAll('*');
            task15.forEach(item => {
                item.addEventListener('mouseenter', () => {
                    item.classList.add('text-color');
                });

                item.addEventListener('mouseleave', () => {
                    item.classList.remove('text-color');
                });
            });
        });

    </script>

    <style>
        .text-color{
            color: indigo;
        }
    </style>


</head>
<body>
    <div class="page">
        <div class="nav">
            <ul>
                <li><a href="https://ue-varna.bg">Some random link name</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
                <li><a href="#">Link 5</a></li>
            </ul>
        </div>
        <div class="columns">
            <div class="lcol ">
                <div class="title">This is left column</div>
                <div><img class="img" src="http://placehold.it/150x150" alt="Snimka"></div>
            </div>
            <div class="rcol ">
                <div class="title">This is right column</div>
                <div><img class="img" src="http://placehold.it/150x150" alt="Kartinka"></div>
            </div>
        </div>
        <div class="p">
            <div class="profile">
                Вашето име, специаност, факултетен номер
            </div>
            <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
            <p>Lorem ipsum, dolor sit amet, consectetur adipisicing elit. Minima aut error corporis magnam perferendis ratione, quibusdam vel rerum soluta, vero maiores accusantium optio, minus numquam sequi iusto repudiandae incidunt, ad! </p>
        </div>
    </div>

</body>
</html>