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: да се създаде скрипт, чрез който при натискане на бутон Swap премества div.card от структура div.border-success в структура div.border-danger. При повторно натискане на бутона div.card се връща в оригиналния си контейнер.-->

    <!-- задача 2: да се създаде скрипт, чрез който при натискане на бутон с id="color" се оцветява фонът на клетките в таблица, според това какво пише в съответната клетка, т.е. клетките black трябва да получат черен фон, клетките yellow трябва да станат с фон жълт, red с червен цвят, green със зелен. -->

    <!-- задача 3: да се създаде скрипт, чрез който при натискане на бутон "Изтрий" се прочита символ от клавиатурата и се изтрива span-а, съдържащ този елемент, напр. въвежда се Е и се изтрива 5-тия спан. Ако няма такъв елемент, то той се добавя. -->

    <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-6">
                <div class="border border-success p-3 my-2">
                    <div class="card border-0">
                        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Eos enim quisquam praesentium totam quas consequatur, ex, quo, obcaecati fugit architecto id autem eius perferendis tenetur? Et nobis natus illo labore!
                    </div>
                </div>
                <div class="border border-danger p-3 my-2">

                </div>
            </div>
            <div class="col-6 align-self-center">
                <div class="form-group">
                    <input type="button" class="form-control btn btn-primary" value="Swap" id="">
                </div>
            </div>
        </div>
    </div>
    <!-- задача 1 -->

    <!-- задача 2 -->
    <div class="container my-4 border border-dark py-2">
        <table class="col-2 text-info table table-hover table-bordered" id="table1">
            <tr>
                <td>black</td>
                <td>yellow</td>
                <td>green</td>
                <td>red</td>
            </tr>
            <tr>
                <td>green</td>
                <td>yellow</td>
                <td>black</td>
                <td>red</td>
            </tr>
            <tr>
                <td>red</td>
                <td>green</td>
                <td>yellow</td>
                <td>black</td>
            </tr>
        </table>
        <input type="button" class="btn btn-info" id="color" value="color" data-background="inactive"/>
    </div>
    <!-- задача 2 -->

    <!-- задача 3 -->
    <div class="container border border-dark py-2">
        <div class="row">
          <div class="col-12">
            <div class="alert alert-secondary">
              <span class="d-inline-block border p-2 mx-2">A</span>
              <span class="d-inline-block border p-2 mx-2">B</span>
              <span class="d-inline-block border p-2 mx-2">C</span>
              <span class="d-inline-block border p-2 mx-2">D</span>
              <span class="d-inline-block border p-2 mx-2">E</span>
              <span class="d-inline-block border p-2 mx-2">F</span>
            </div>
            <div class="alert alert-success">
              <input type="text" class="form-control" id="delete">
            </div>
            <input type="button" class="btn btn-primary" value="Изтрий" id="">
          </div>
        </div>
    </div>
    <!-- задача 3 -->
</body>
</html>