Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<!-- задача 1: да се създаде скрипт, чрез който при натискане върху бутон Промени се сменя изображение 
            https://placehold.co/150x150 на http://placehold.co/?x?, където ? e стойността въведена в текстовото поле 
            Размер. Изберете наименования на id-тата на текстовата кутия, изображението и бутонът -->

		<!-- задача 2: създайте скрипт, чрез който при натискане на бутон Оцвети се премахва клас table-bordered от таблица 
            и се променя цвета на текста в таблицата на червен -->

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

	<script>
		document.addEventListener('DOMContentLoaded', () => {
			// clean(document.body);

            const task1 = () => {
                let btn = document.querySelector('#button1a');
                btn.addEventListener('click', (e) => {
                    let input = document.querySelector('#input1a');
                    if(parseInt(input.value)){
                        document.querySelector('#img1a').src = 'https://placehold.co/'+input.value+'x'+input.value;
                    }
                });
            }

            task1();

            const task2 = () => {
                let btn = document.querySelector('.btn-dark');
                btn.addEventListener('click', (e) => {
                    let table = document.querySelector('.table-bordered');
                    table.classList.remove('table-bordered');
                    let td = document.querySelectorAll('td');
                    td.forEach(i => {
                        i.style.color = 'red';
                        i.style.border = 'none';
                    });

                });
            }

            task2();

            const task3 = () => {
                let links = document.querySelectorAll('.page-link');
                links.forEach(item => {
                    item.addEventListener('click', (e) => {
                        let input = document.querySelector('#address');
                        let value = parseInt(input.value) ? parseInt(input.value) + parseInt(e.target.innerText) : parseInt(e.target.innerText);
                        input.value = value;
                    });
                });
            }

            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>

	</style>
</head>
<body class="py-4">
	<!-- задача 1 -->
	<div class="container" class="my-4 ">
		<form class="form-inline">
			<div class="form-group">
				<label for="size" class="col-lg-2 form-label">Размер</label>
				<div class="col-lg-10">
					<input type="text" class="form-control" id="input1a" placeholder="размер">
				</div>
			</div>
			<div class="form-group">
				<label for="size" class="col-lg-2 control-label"> </label>
				<div class="col-lg-10 col-lg-offset-2">
					<button type="button" class="btn btn-primary" id="button1a">Промени</button>
				</div>
			</div>
		</form>
        <div class="my-4">
            <img src="http://placehold.co/150x150" id="img1a"/>
        </div>
	</div>
	<!-- задача 1 -->

	<!-- задача 2 -->
	<div class="container mt-3" >
    <table class="table table-bordered" id="table2a">
      <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
      </tr>
      <tr>
        <td>5</td>
        <td>25</td>
        <td>10</td>
      </tr>
      <tr>
        <td>8</td>
        <td>7</td>
        <td>6</td>
      </tr>
    </table>
    <button type="button" class="btn btn-dark" id="button2a">Оцвети</button>
  </div>
	<!-- задача 2 -->

	<!-- задача 3 -->
  <div class="container mt-5">
    <div class="form-group">
        <label for="paragraph">Страница</label>
        <input type="text" class="form-control" id="address">
    </div>
      <ul class="pagination mt-2">
        <li class="page-item">
          <a class="page-link bg-info text-white" href="#">1</a>
        </li>
        <li class="page-item">
          <a class="page-link bg-info text-white" href="#">2</a>
        </li>
        <li class="page-item">
          <a class="page-link bg-info text-white" href="#">3</a>
        </li>
        <li class="page-item">
          <a class="page-link bg-info text-white" href="#">4</a>
        </li>
        <li class="page-item">
          <a class="page-link bg-info text-white" href="#">5</a>
        </li>
      </ul>
  </div>
	<!-- задача 3 -->
</body>
</html>
Editor is loading...