4

<!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: да се създаде скрипт, чрез който при натискане бутони "Изпълни" се взима числова стойност от едноредово поле и се изтрива съдържанието на клетка, чиито пореден номер отговаря на въведената стойност. Напр. въвежда се 7 и се изтрива съдържанието на клетка ZZ, въвежда се 16 и се изтрива съдържание на клетка [[[-->

    <!-- задача 2: да се създаде скрипт, чрез който при натискане бутони "Добави" се прочита въведеното в текстово поле и се добавя като елемент <option> от списък <select> -->

    <!-- задача 3:  да се създаде скрипт, чрез който при натискане на бутоните "увеличи отляво или отдясно" се увеличава рамка с по 2px; рамката по подразбиране започва от 2px solid green и при всяко натискане нараства с по 2px. -->

    <!-- задача 4: да се създаде скрипт, чрез който при натискане върху div.rounded-circle се взима цвят на фон от data-help атрибут и се задава като фон на всички останали елементи. Скрипът трябва да работи с всеки от елементи и без ограничение в броя опити . -->

    <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 border border-dark py-2">
        <table class="table table-hover col-xs-2 col-sm-2 col-lg-2 col-md-2 table-bordered" id="">
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
            </tr>
            <tr>
                <td>XX</td>
                <td>YY</td>
                <td>ZZ</td>
                <td>VV</td>
            </tr>
            <tr>
                <td>+</td>
                <td>-</td>
                <td>*</td>
                <td>/</td>
            </tr>
            <tr>
                <td><<<</td>
                <td>{{{</td>
                <td>(((</td>
                <td>[[[</td>
            </tr>
        </table>
        <div class="form-group">
            <input type="text" class="form-control" id="">
        </div>
        <input type="button" class="btn btn-info" id="" value="Изпълни"/>
    </div>
    <!-- задача 1 -->

    <!-- задача 2 -->
    <div class="container border border-dark py-2">
        <div class="row">
            <div class="col-12">
                <div class="form-inline">
                    <div class="form-group">
                        <label for="year">Година</label>
                        <input type="text" class="mx-2 form-control" id="">
                        <select name="select" id="select" class="mx-2 form-control">
                            <option>1990</option>
                            <option>произволни данни</option>

                        </select>
                    </div>
                    <div class="form-group">
                        <input type="button" class="mx-2 btn btn-info" value="Добави" id="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- задача 2 -->

    <!-- задача 3 -->
    <div class="container my-4 border border-dark py-2">
      <div class="row">
        <div class="col-5 mb-3" id="b">
          <div class=" card-header text-center">
            Look, I'm in a large well!
          </div>
          <ul class="col-12 card-body">
            <li class="float-left btn btn-default previous" data-store="1"><a href="#b" class="left">&larr; Увеличи отляво</a></li>
            <li class="float-right btn btn-default next " data-store="1"><a href="#b" class="right">Увеличи отдясно &rarr;</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- задача 3 -->

    <!-- задача 4 -->
    <div class="container border border-dark py-2">
        <div class="row text-center">
            <div class="offset-2 col-2 rounded-circle p-5 display-4 d-inline-block bg-danger" data-help="bg-danger">
              D
            </div>
            <div class="col-2 rounded-circle  p-5 display-4 d-inline-block bg-info" data-help="bg-info">
              I
            </div>
            <div class=" col-2 rounded-circle  p-5 display-4 d-inline-block bg-warning" data-help="bg-warning">
              W
            </div>
            <div class=" col-2 rounded-circle  p-5 display-4 d-inline-block bg-success" data-help="bg-success">
              S
            </div>
        </div>
    </div>
    <!-- задача 4 -->

</body>
</html>