qjooo

mail@pastecode.io avatar
unknown
html
2 years ago
5.9 kB
1
Indexable
Never
    <!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 btn1a = document.querySelector('#button1a')
            btn1a.addEventListener('click', (e) => {
                let inp = document.querySelector('#input1a');
                if(parseInt(inp.value)){
                    document.querySelector('#img1a').src = 'https://placehold.co/' + inp.value + 'x' + inp.value;
                }
            });


            }
            const task2 = () =>{

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

                });

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

            }

            task1();
            task2();
            taks3();
            

		});
		
		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>
			<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">
      <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">Оцвети</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>