API tools faq
paste
lemansky

3

lemansky
Nov 16th, 2020 (edited)
227
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.33 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.        
  9.         <!-- задача 1: да се създаде скрипт, чрез който при натискане на бутон Swap премества div.card от структура div.border-success в структура div.border-danger. При повторно натискане на бутона div.card се връща в оригиналния си контейнер.-->
  10.  
  11.         <!-- задача 2: да се създаде скрипт, чрез който при натискане върху изображение с id="original" се създава ново изображение с широчина и големина от 10 пиксела по-големи от предишното. Така например, второто изображение трябва да е с нов адрес http://placehold.co/110x110, третото http://placehold.co/120x120 -->
  12.  
  13.         <!-- задача 3: да се създаде скрипт, чрез който при натискане на бутон с id="color" се оцветява фонът на клетките в таблица, според това какво пише в съответната клетка, т.е. клетките black трябва да получат черен фон, клетките yellow трябва да станат с фон жълт, red с червен цвят, green със зелен. -->
  14.  
  15.         <!-- задача 4: да се създаде скрипт, чрез който при натискане на бутон "Изтрий" се прочита символ от клавиатурата и се изтрива span-а, съдържащ този елемент, напр. въвежда се Е и се изтрива 5-тия спан. Ако няма такъв елемент, то той се добавя. -->
  16.  
  17.     <script>
  18.         document.addEventListener("DOMContentLoaded", function(){
  19.             clean(document.body);
  20.  
  21.             task1();
  22.             task2();
  23.             task3();
  24.             task4();
  25.  
  26.         });
  27.  
  28.         const task1 = () => {
  29.  
  30.         }
  31.            
  32.         const task2 = () => {
  33.  
  34.         }
  35.  
  36.         const task3 = () => {
  37.  
  38.         }
  39.  
  40.         const task4 = () => {
  41.  
  42.         }
  43.  
  44.         const clean = (node) =>
  45.         {
  46.           for(var n = 0; n < node.childNodes.length; n ++)
  47.          {
  48.            var child = node.childNodes[n];
  49.            if
  50.            (
  51.              child.nodeType === 8
  52.              ||
  53.              (child.nodeType === 3 && !/\S/.test(child.nodeValue))
  54.            )
  55.            {
  56.              node.removeChild(child);
  57.              n --;
  58.            }
  59.            else if(child.nodeType === 1)
  60.            {
  61.              clean(child);
  62.            }
  63.          }
  64.        }
  65.     </script>
  66.    
  67. </head>
  68. <body>
  69.     <!-- задача 1 -->
  70.     <div class="container my-4 border border-dark py-2">
  71.         <div class="row">
  72.             <div class="col-6">
  73.                 <div class="border border-success p-3 my-2">
  74.                     <div class="card border-0">
  75.                         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!
  76.                     </div>
  77.                 </div>
  78.                 <div class="border border-danger p-3 my-2">
  79.                    
  80.                 </div>
  81.             </div>
  82.             <div class="col-6 align-self-center">
  83.                 <div class="form-group">
  84.                     <input type="button" class="form-control btn btn-primary" value="Swap" id="">
  85.                 </div>
  86.             </div>
  87.         </div>
  88.     </div>
  89.     <!-- задача 1 -->
  90.  
  91.     <!-- задача 2 -->
  92.     <div class="container border border-dark py-2" id="image-list">
  93.         <img src="http://placehold.co/100x100" alt="" class="img-thumbnail" id="original">
  94.     </div>
  95.     <!-- задача 2 -->
  96.  
  97.     <!-- задача 3 -->
  98.     <div class="container my-4 border border-dark py-2">
  99.         <table class="col-2 text-info table table-hover table-bordered" id="table1">
  100.             <tr>
  101.                 <td>black</td>
  102.                 <td>yellow</td>
  103.                 <td>green</td>
  104.                 <td>red</td>
  105.             </tr>
  106.             <tr>
  107.                 <td>green</td>
  108.                 <td>yellow</td>
  109.                 <td>black</td>
  110.                 <td>red</td>
  111.             </tr>
  112.             <tr>
  113.                 <td>red</td>
  114.                 <td>green</td>
  115.                 <td>yellow</td>
  116.                 <td>black</td>
  117.             </tr>
  118.         </table>
  119.         <input type="button" class="btn btn-info" id="color" value="color" data-background="inactive"/>
  120.     </div>
  121.     <!-- задача 3 -->
  122.  
  123.     <!-- задача 4 -->
  124.     <div class="container border border-dark py-2">
  125.         <div class="row">
  126.           <div class="col-12">
  127.             <div class="alert alert-secondary">
  128.               <span class="d-inline-block border p-2 mx-2">A</span>
  129.               <span class="d-inline-block border p-2 mx-2">B</span>
  130.               <span class="d-inline-block border p-2 mx-2">C</span>
  131.               <span class="d-inline-block border p-2 mx-2">D</span>
  132.               <span class="d-inline-block border p-2 mx-2">E</span>
  133.               <span class="d-inline-block border p-2 mx-2">F</span>
  134.             </div>
  135.             <div class="alert alert-success">
  136.               <input type="text" class="form-control" id="delete">
  137.             </div>
  138.             <input type="button" class="btn btn-primary" value="Изтрий" id="">
  139.           </div>
  140.         </div>
  141.     </div>
  142.     <!-- задача 4 -->
  143. </body>
  144. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!