Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

    <!-- задача 1:  да се създаде скрипт, при който чрез натискане на десен бутон на мишката върху някой параграф, той получава червен цвят за фон -->
    <!-- задача 2:  да се създаде скрипт, при който чрез използване на скролера на мишката се определя произволна на цвят рамка с дебелина от 3px-->
    <!-- задача 3:  да се създаде скрипт, при който чрез въвеждане на текст в едноредово поле се отчита натискането на клавиш и се търси съвпадение в списък от елементи. При открито съответствие се оцветява само частта от въведеното. -->
    <!-- задача 4: да се създаде скрипт, чрез който при смяна на стойност от падащ списък се сменя и цвета на бутон, на база на избраната опция. Стойностите в опциите атрибут value са имена на класове, който ако се добавят към бутона се сменя неговия фон. Внимавайте, тъй като след добавяне на нов клас, е необходимо предния да бъде премахнат, за да не се поставят всички в даден момент и да спре промяната на фона на бутона -->
    <!-- задача 5: да се създаде скрипт, чрез който при натискане върху бутон се сменя изображение http://placehold.co/150x150 на http://placehold.co/?x?, където ? e стойността въведена в текстовото поле Размер. Изберете наименования на id-тата на текстовата кутия, изображението и бутонът-->
    <script>
        document.addEventListener("DOMContentLoaded", () => {

        });

    </script>
</head>
<body>
    <!-- задача 1 -->
    <div class="container my-4">
        <p>lorem item 1</p>
        <p>lorem item 2</p>
        <p>lorem item 3</p>
        <p>lorem item 4</p>
        <p>lorem item 5</p>
        <p>lorem item 6</p>
        <p>lorem item 7</p>
        <p>lorem item 8</p>
        <p>lorem item 9</p>
        <p>lorem item 10</p>
    </div>
    <!-- задача 1 -->

    <!-- задача 2 -->
    <div class="container my-4">
        <img src="http://placehold.co/250x250" alt="">
    </div>
    <!-- задача 2 -->

    <!-- задача 3 -->

    <div class="container my-4">
        <input type="text" class="form-control">
        <ul class="list-group">
            <li class="list-group-item"> Lorem ipsum</li>
            <li class="list-group-item"> dolor sit</li>
            <li class="list-group-item"> amet consectetur</li>
            <li class="list-group-item"> adipisicing elit</li>
            <li class="list-group-item"> Facere nemo</li>
            <li class="list-group-item"> possimus in totam</li>
            <li class="list-group-item"> eos harum rem</li>
            <li class="list-group-item"> aliquam, eum recusandae quod</li>
            <li class="list-group-item"> odit! Necessitatibus quibusdam</li>
            <li class="list-group-item"> illum voluptatem nihil</li>
        </ul>
    </div>
    <!-- задача 3 -->
    <!-- задача 4 -->
    <div class="container my-4" >
        <form class="form-horizontal">

            <div class="form-group">
                <label for="size" class="col-lg-2 control-label">Размер</label>
                <div class="col-6">
                    <input type="text" class="form-control" id="" placeholder="размер">
                </div>
            </div>
            <div class="form-group">
                <label for="size" class="col-lg-2 control-label"> </label>
                <div class="col-6 col-lg-offset-2">
                    <button type="button" class="btn btn-primary" id="">Промени</button>
                </div>
            </div>
            <div>
                <img src="http://placehold.co/150x150" id=""/>
            </div>

        </form>
    </div>
    <!-- задача 4 -->

    <!-- задача 5 -->

    <div class="container my-4">
        <div class="col-lg-6 col-md-6">
            <div class="card bg-default ">
                <div class="card-body" id="">
                    <div class="card-title">Panel Heading</div>
                        <div class="card-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <input type="button" class="texts btn btn-primary " value="Голям" id="" >
            </div>
        </div>

    </div>
    <!-- задача 5 -->

</body>
</html>