API tools faq
paste
lemansky

2

lemansky
Nov 16th, 2020
225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.57 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: да се създаде скрипт, чрез който при натискане на бутон "Натисни" елемент кутийка с текст се премества по-надясно с по 10 px посредством увеличаващ се margin-left -->
  10.    
  11.     <!-- задача 2: да се създаде скрипт, чрез който при натискане на бутон с клас rhyme се създава нов <li> елемент от списък breadcrumb, в който има хиперлинк а и съдържанието на текстовата част на линка е текстът от кликнатия елемент -->
  12.  
  13.     <!-- задача 3: да се създаде скрипт, чрез който при натискане бутони 20%, 40% и 80% да се коригира широчината на елемент progress-bar. (може да използвате променлива?.style.width за да управлявате широчината ) -->
  14.  
  15.     <!-- задача 4: да се създаде скрипт, чрез който при натискане на бутон Промени, да се вземе от текстово поле стойността на цвят (не е от значение с дума или код) и да се промени цвета на фона на текстовото поле -->
  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. </head>
  67. <body>
  68.     <!-- задача 1 -->
  69.     <div class="container my-4 border border-dark py-2">
  70.         <div class="row">
  71.           <div class="col-12">
  72.             <ul class="list-group">
  73.               <li class="list-group-item">
  74.                 <div class="d-inline-block border p-2 bg-primary text-white" data-margin="10" id="">кутийка с текст</div>
  75.                 <input type="button" class="btn btn-info float-right" value="Натисни" id="">
  76.               </li>
  77.             </ul>
  78.           </div>
  79.         </div>
  80.       </div>
  81.     <!-- задача 1 -->
  82.  
  83.     <!-- задача 2 -->
  84.     <div class="container border border-dark py-2">
  85.         <div class="row">
  86.             <div class="col-2">
  87.                 <div class="form-group">
  88.                     <input type="button" class="form-control rhyme" value="bread">
  89.                     <input type="button" class="form-control rhyme" value="link"   >
  90.                     <input type="button" class="form-control rhyme" value="home">
  91.                     <input type="button" class="form-control rhyme" value="my profile">
  92.                 </div>
  93.             </div>
  94.         </div>
  95.         <div class="row">
  96.             <div class="col-12">
  97.                 <ul class="breadcrumb">
  98.                     <li class="mx-2"><a href="#"> bread </a></li>
  99.                 </ul>
  100.             </div>
  101.         </div>
  102.     </div>
  103.     <!-- задача 2 -->
  104.  
  105.     <!-- задача 3 -->
  106.     <div class="container my-4 border border-dark py-2">
  107.         <div class="progress" style="height:20px">
  108.           <div class="progress-bar progress-bar-striped"  role="progressbar" style="width: 50%"></div>
  109.         </div>
  110.         <div class="col-12 text-center">
  111.            <a href="#" class="btn btn-success">20%</a>
  112.            <a href="#" class="btn btn-success">40%</a>
  113.            <a href="#" class="btn btn-success">80%</a>
  114.         </div>
  115.     </div>
  116.     <!-- задача 3 -->
  117.  
  118.     <!-- задача 4 -->
  119.     <div class="container border border-dark py-2">
  120.         <div class="form-group">
  121.             <label for="paragraph">Цвят</label>
  122.             <input type="text" class="form-control" id="paragraph">
  123.         </div>
  124.         <div>
  125.             <a href="#" class="btn btn-info" id="change">Промени</a>
  126.         </div>
  127.     </div>
  128.     <!-- задача 4 -->
  129. </body>
  130. </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!