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: да се създаде скрипт, чрез който при натискане на бутон "Натисни" елемент кутийка с текст се премества по-надясно с по 10 px посредством увеличаващ се margin-left -->

    <!-- задача 2: да се създаде скрипт, чрез който при натискане на бутон с клас rhyme се създава нов <li> елемент от списък breadcrumb, в който има хиперлинк а и съдържанието на текстовата част на линка е текстът от кликнатия елемент -->

    <!-- задача 3: да се създаде скрипт, чрез който при натискане на бутон Промени, да се вземе от текстово поле стойността на цвят (не е от значение с дума или код) и да се промени цвета на фона на текстовото поле -->

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

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

        });

        const task1 = () => {

        }

        const task2 = () => {

        }

        const task3 = () => {

        }

        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 border border-dark py-2">
        <div class="row">
          <div class="col-12">
            <ul class="list-group">
              <li class="list-group-item">
                <div class="d-inline-block border p-2 bg-primary text-white" data-margin="10" id="">кутийка с текст</div>
                <input type="button" class="btn btn-info float-right" value="Натисни" id="">
              </li>
            </ul>
          </div>
        </div>
      </div>
    <!-- задача 1 -->

    <!-- задача 2 -->
    <div class="container border border-dark py-2">
        <div class="row">
            <div class="col-2">
                <div class="form-group">
                    <input type="button" class="form-control rhyme" value="bread">
                    <input type="button" class="form-control rhyme" value="link"   >
                    <input type="button" class="form-control rhyme" value="home">
                    <input type="button" class="form-control rhyme" value="my profile">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <ul class="breadcrumb">
                    <li class="mx-2"><a href="#"> bread </a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- задача 2 -->

    <!-- задача 3 -->
    <div class="container border border-dark py-2">
        <div class="form-group">
            <label for="paragraph">Цвят</label>
            <input type="text" class="form-control" id="paragraph">
        </div>
        <div>
            <a href="#" class="btn btn-info" id="change">Промени</a>
        </div>
    </div>
    <!-- задача 3 -->
</body>
</html>