Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- задача 1: да се създаде скрипт, чрез който при натискане бутони за плодове или зеленчуци, съответната стойност от бутона се пренася в текстовото поле, като лявото текстово поле може да съдържа само плодове, а дясното само зеленчуци. При повторно натискане на бутон, предишната стойност се заменя с новата, взета от съответния бутон.-->

    <!-- задача 2: да се създаде скрипт, чрез който при натискане върху секция, тя се премества на първо място в списък с клас table-of-contents. Скриптът трябва да работи за всички елементи и да е възможно няколкократното пренареждане на един и същи елемент.-->

    <!-- задача 3: да се създаде скрипт, чрез който при натискане на бутон "Провери" се генерира prompt кутия и след въвеждане на число се проверява дали числото  без значение дали се чете от ляво на дясно или от дясно на ляво е едно и също. пример 132231), отговорът да се запише в конзолата с да или не.-->

    <!-- задача 4: да се създаде скрипт, чрез който при натискане върху изображение img с клас border се добавя стил border-radius:5px. При повторно натискане се добавят още 5px и така до без край (при 150x150 размери след 75px border-radius изображението прилича на окръжност).-->

    <script>
        document.addEventListener("DOMContentLoaded", function(){
            clean(document.body);

            task1();
            task2();
            task3();
            task4();

        });

        const task1 = () => {

        }

        const task2 = () => {

        }

        const task3 = () => {

        }

        const task4 = () => {

        }

        const clean = (node) =>
        {
          for(var n = 0; n < node.childNodes.length; n ++)
          {
            var child = node.childNodes[n];
            if
            (
              child.nodeType === 8
              ||
              (child.nodeType === 3 && !/\S/.test(child.nodeValue))
            )
            {
              node.removeChild(child);
              n --;
            }
            else if(child.nodeType === 1)
            {
              clean(child);
            }
          }
        }
    </script>

</head>
<body>
    <!-- задача 1 -->
    <div class="container my-4">
        <div class="row">
            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                <input type="text" id="fruit" class="form-control ">
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                <input type="text" id="vegetable" class="form-control ">
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                <a href="#" class="btn btn-primary food-btn" data-food="fruit">Ябълка</a>
                <a href="#" class="btn btn-primary food-btn" data-food="fruit">Портокал</a>
                <a href="#" class="btn btn-primary food-btn" data-food="fruit">Манго</a>
        </div>
        <div class="form-group col-lg-6 col-md-6 col-sm-6">
                <a href="#" class="btn btn-primary food-btn" data-food="vegetable">Домат</a>
                <a href="#" class="btn btn-primary food-btn" data-food="vegetable">Репичка</a>
                <a href="#" class="btn btn-primary food-btn" data-food="vegetable">Картоф</a>
            </div>
            </div>
        </div>
    </div>
    <!-- задача 1 -->

    <!-- задача 2 -->
    <div class="container" id="ladder">
        <ul class="list-group table-of-contents">
              <a class="list-group-item" href="#navbar">Navbar</a>
              <a class="list-group-item alert-info" href="#buttons">Buttons</a>
              <a class="list-group-item" href="#typography">Typography</a>
              <a class="list-group-item" href="#tables">Tables</a>
              <a class="list-group-item alert-danger" href="#forms">Forms</a>
              <a class="list-group-item alert-success" href="#navs">Navs</a>
              <a class="list-group-item" href="#indicators">Indicators</a>
              <a class="list-group-item alert-warning" href="#progress-bars">Progress bars</a>
              <a class="list-group-item" href="#containers">Containers</a>
              <a class="list-group-item" href="#dialogs">Dialogs</a>
        </ul>
    </div>
    <!-- задача 2 -->

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

    <div class="container my-4">
        <div class="row">
            <div class="col-2">
                <input type="button" class="btn btn-danger" value="Провери">
            </div>
        </div>
    </div>
    <!-- задача 3 -->

    <!-- задача 4 -->
    <div class="container my-4">
        <div class="row">
            <div class="col">
                <img src="https://placehold.it/150x150" alt="" class="border border-success">
            </div>
        </div>
    </div>
    <!-- задача 4 -->

</body>
</html>