API tools faq
paste
Advertisement
deyanivanov966

Упражнение 3 Варна Решения на допълнителен вариант

deyanivanov966
Jan 11th, 2022
931
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.   <style>
  9.     .table td{
  10.       border:none;
  11.     }
  12.   </style>
  13.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  15.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  16.  
  17. </head>
  18. <body>
  19.     <!-- задача 1 -->
  20.   <div class="container mt-3" >
  21.     <table class="table table-bordered">
  22.       <tr>
  23.         <td>11</td>
  24.         <td>12</td>
  25.         <td>13</td>
  26.       </tr>
  27.       <tr>
  28.         <td>5</td>
  29.         <td>25</td>
  30.         <td>10</td>
  31.       </tr>
  32.       <tr>
  33.         <td>8</td>
  34.         <td>7</td>
  35.         <td>6</td>
  36.       </tr>
  37.     </table>
  38.     <button type="button" class="btn-primary"> Оцвети</button>
  39.  
  40.  
  41.   </div>
  42.  
  43.  
  44.     <!-- задача 2 -->
  45.   <div class="container mt-5">
  46.      <div class="form-group">
  47.         <label for="paragraph">Страница</label>
  48.         <input type="text" class="form-control" id="address">
  49.  
  50.     </div>
  51.  
  52.       <ul class="pagination mt-2">
  53.  
  54.         <li class="page-item ">
  55.           <a class="page-link bg-info" href="#">1</a>
  56.         </li>
  57.         <li class="page-item">
  58.           <a class="page-link bg-info" href="#">2</a>
  59.         </li>
  60.         <li class="page-item">
  61.           <a class="page-link bg-info" href="#">3</a>
  62.         </li>
  63.         <li class="page-item">
  64.           <a class="page-link bg-info" href="#">4</a>
  65.         </li>
  66.         <li class="page-item">
  67.           <a class="page-link bg-info" href="#">5</a>
  68.         </li>
  69.  
  70.       </ul>
  71.   </div>
  72.  
  73.     <!-- задача 3 -->
  74.   <div class="container mt-5" id="image-list">
  75.     <img src="http://placehold.it/100" alt="" class="img-thumbnail" id="original">
  76.  
  77.  
  78.   </div>
  79.  
  80.     <script>
  81.         document.addEventListener("DOMContentLoaded", function(){
  82.             clean(document.body);
  83.  
  84.       task1();
  85.  
  86.       task2();
  87.  
  88.       task3();
  89.         });
  90.  
  91.     const task1 = () => {
  92.       let btn = document.querySelectorAll('.btn-primary')[0];
  93.       btn.addEventListener('click', (e) => {
  94.           let t = document.querySelectorAll('.table')[0];
  95.           t.classList.remove('table-bordered');
  96.           t.style.color = 'red';
  97.       });
  98.     }
  99.  
  100.     const task2 = () => {
  101.       let links = document.querySelectorAll('.page-link');
  102.       links.forEach(item => {
  103.         item.addEventListener('click', (e) => {
  104.           let pole = document.querySelectorAll('#address')[0];
  105.           pole.value = pole.value + e.target.innerText;
  106.         });
  107.       });
  108.  
  109.     }
  110.  
  111.     const task3 = () => {
  112.       let img = document.querySelectorAll('#original')[0];
  113.       img.addEventListener('click', (e) => {
  114.         let newItem = document.createElement('img');
  115.         newItem.classList.add('img-thumbnail');
  116.         let broi = document.querySelectorAll('img').length;
  117.         newItem.src = 'http://placehold.it/' + (100 + broi*10);
  118.         document.querySelectorAll('#image-list')[0].appendChild(newItem);
  119.  
  120.  
  121.       });
  122.     }
  123.  
  124.         function clean(node)
  125.         {
  126.           for(var n = 0; n < node.childNodes.length; n ++)
  127.           {
  128.             var child = node.childNodes[n];
  129.             if
  130.             (
  131.               child.nodeType === 8
  132.               ||
  133.               (child.nodeType === 3 && !/\S/.test(child.nodeValue))
  134.             )
  135.             {
  136.               node.removeChild(child);
  137.               n --;
  138.             }
  139.             else if(child.nodeType === 1)
  140.             {
  141.               clean(child);
  142.             }
  143.           }
  144.         }
  145.     </script>
  146. </body>
  147. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!