API tools faq
paste
Advertisement
deyanivanov966

Упражнение 6 Банков Решения на задачи за упражнение (3)

deyanivanov966
Jan 13th, 2022
1,071
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 10.07 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.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  7.     <script>
  8.         document.addEventListener('DOMContentLoaded', () => {
  9.             let data = [
  10.                 {
  11.                     "id": 1,
  12.                     "name": "Иван Иванов",
  13.                     "description": "Харесвам работата си и продължавам да се обучавам!",
  14.                     "email": "pereinar@optonline.net",
  15.                     "phone": "12345344",
  16.                     "title": "Мениджър",
  17.                     "details": [
  18.                             {
  19.                                 "background" : "#7eb2ff",
  20.                                 "text": "white",
  21.                                 "links": "black"
  22.                             }
  23.                         ]
  24.                     },
  25.                 {"id": 2, "name": "Мария Петрова", "description": "Да създавам дизайни за уеб приложения ми доставя необходимата доза забавление на работното място", "email": "juliano@aol.com", "phone": "368938736", "title": "Програмист", "details": [{"background" : "#12cc3f","text": "white","links": "#99ff00"}]},
  26.                 {"id": 3, "name": "Стефан Колев", "description": "Интересът ми към високите технологии винаги е бил движеща сила за иновации във всяка една сфера от живота ми", "email": "jipsen@outlook.com", "phone": "866893", "title": "Финансов директор", "details": [{"background" : "#e9e9e9","text": "black","links": "#a1a1a1"}]},
  27.                 {"id": 4, "name": "Петя Илиева", "description": "Усъвършенствам своите познания като помагам на младите си колеги!", "email": "rasca@msn.com", "phone": "10237129", "title": "Бодигард", "details": [{"background" : "#2f0c01","text": "white","links": "red"}]},
  28.                 {"id": 5, "name": "Деница Филева", "description": "Личното ми мнение е, творчеството в интернет среда е ценен актив.", "email": "mahbub@att.net", "phone": "0739483", "title": "Офис сътрудник", "details": [{"background" : "#77e9e9","text": "#112211","links": "#099011"}]}];
  29.  
  30.  
  31.                 for (let i = 0; i < 5; i++) {
  32.                     document.querySelectorAll('.card')[i].style.background = data[i].details[0].background;
  33.  
  34.                     [...document.querySelectorAll('.card')[i].
  35.                             querySelectorAll('.list-group-item')].map(
  36.                                                     item => item.style.background = data[i].details[0].background);
  37.  
  38.                     [...document.querySelectorAll('.card')[i].
  39.                             querySelectorAll('a')].map(
  40.                                                     item => item.style.color = data[i].details[0].links);
  41.  
  42.                     document.querySelectorAll('.card')[i].style.color = data[i].details[0].text;
  43.  
  44.                     [...document.querySelectorAll('.card')[i].
  45.                             querySelectorAll('.list-group-item')].map(
  46.                                                     item => item.style.color = data[i].details[0].text);
  47.  
  48.                     document.querySelectorAll('.card')[i].
  49.                             querySelectorAll('.card-title')[0].innerText = data[i].name;
  50.  
  51.                     document.querySelectorAll('.card')[i].
  52.                             querySelectorAll('.card-text')[0].innerText = data[i].description;
  53.  
  54.                     document.querySelectorAll('.card')[i].
  55.                             querySelectorAll('.list-group-item')[0].innerText = data[i].email;     
  56.                     document.querySelectorAll('.card')[i].
  57.                             querySelectorAll('.list-group-item')[1].innerText = data[i].phone;         
  58.                     document.querySelectorAll('.card')[i].
  59.                             querySelectorAll('.list-group-item')[2].innerText = data[i].title;     
  60.  
  61.                     document.querySelectorAll('.card')[i].
  62.                             querySelectorAll('.card-link')[0].addEventListener('click', (e) => {
  63.  
  64.                             if(e.target.innerText != 'Save'){
  65.                                 e.target.innerText = 'Save';
  66.                                 document.querySelectorAll('.card')[i].
  67.                                     querySelectorAll('.list-group-item')[0].innerHTML = '<input type="text" value="' + data[i].email + '">';       
  68.                                 document.querySelectorAll('.card')[i].
  69.                                     querySelectorAll('.list-group-item')[1].innerHTML = '<input type="text" value="' + data[i].phone  + '">';      
  70.                                 document.querySelectorAll('.card')[i].
  71.                                     querySelectorAll('.list-group-item')[2].innerHTML = '<input type="text" value="' + data[i].title  + '">';  
  72.                                 e.target.nextElementSibling.classList.remove('d-none');
  73.                                 } else {
  74.                                     e.target.innerText = 'Edit';
  75.                                     data[i].email = e.target.parentNode.previousElementSibling.querySelectorAll('[type=text]')[0].value;
  76.                                     data[i].phone = e.target.parentNode.previousElementSibling.querySelectorAll('[type=text]')[1].value;
  77.                                     data[i].title = e.target.parentNode.previousElementSibling.querySelectorAll('[type=text]')[2].value;
  78.                                     e.target.nextElementSibling.classList.add('d-none');
  79.                                     e.target.parentNode.previousElementSibling.
  80.                                             querySelectorAll('.list-group-item')[0].innerText = data[i].email;     
  81.                                     e.target.parentNode.previousElementSibling.
  82.                                             querySelectorAll('.list-group-item')[1].innerText = data[i].phone;         
  83.                                     e.target.parentNode.previousElementSibling.
  84.                                             querySelectorAll('.list-group-item')[2].innerText = data[i].title;     
  85.                                 }  
  86.                                 console.log(data); 
  87.                         });
  88.  
  89.                     document.querySelectorAll('.card')[i].
  90.                             querySelectorAll('.card-link')[1].addEventListener('click', (e) => {
  91.                                 e.target.classList.add('d-none');
  92.                                     e.target.parentNode.previousElementSibling.
  93.                                             querySelectorAll('.list-group-item')[0].innerText = data[i].email;     
  94.                                     e.target.parentNode.previousElementSibling.
  95.                                             querySelectorAll('.list-group-item')[1].innerText = data[i].phone;         
  96.                                     e.target.parentNode.previousElementSibling.
  97.                                             querySelectorAll('.list-group-item')[2].innerText = data[i].title;
  98.                             }) 
  99.  
  100.                 }
  101.  
  102.         });
  103.     </script>
  104. </head>
  105. <body>
  106.     <div class="container my-3">
  107.         <div class="row">
  108.             <div class="col-4 my-2">
  109.                 <div class="card">
  110.                     <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
  111.                     <div class="card-body">
  112.                         <h5 class="card-title">Card title</h5>
  113.                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  114.                     </div>
  115.                     <ul class="list-group list-group-flush">
  116.                         <li class="list-group-item">Cras justo odio</li>
  117.                         <li class="list-group-item">Dapibus ac facilisis in</li>
  118.                         <li class="list-group-item">Vestibulum at eros</li>
  119.                     </ul>
  120.                     <div class="card-body">
  121.                         <a href="#" class="card-link">Edit</a>
  122.                         <a href="#" class="d-none card-link">Cancel</a>
  123.                     </div>
  124.                 </div>
  125.             </div>
  126.             <div class="col-4 my-2">
  127.                 <div class="card">
  128.                     <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
  129.                     <div class="card-body">
  130.                         <h5 class="card-title">Card title</h5>
  131.                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  132.                     </div>
  133.                     <ul class="list-group list-group-flush">
  134.                         <li class="list-group-item">Cras justo odio</li>
  135.                         <li class="list-group-item">Dapibus ac facilisis in</li>
  136.                         <li class="list-group-item">Vestibulum at eros</li>
  137.                     </ul>
  138.                     <div class="card-body">
  139.                         <a href="#" class="card-link">Edit</a>
  140.                         <a href="#" class="d-none card-link">Cancel</a>
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.             <div class="col-4 my-2">
  145.                 <div class="card">
  146.                     <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
  147.                     <div class="card-body">
  148.                         <h5 class="card-title">Card title</h5>
  149.                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  150.                     </div>
  151.                     <ul class="list-group list-group-flush">
  152.                         <li class="list-group-item">Cras justo odio</li>
  153.                         <li class="list-group-item">Dapibus ac facilisis in</li>
  154.                         <li class="list-group-item">Vestibulum at eros</li>
  155.                     </ul>
  156.                     <div class="card-body">
  157.                         <a href="#" class="card-link">Edit</a>
  158.                         <a href="#" class="d-none card-link">Cancel</a>
  159.                     </div>
  160.                 </div>
  161.             </div>
  162.             <div class="col-4 my-2">
  163.                 <div class="card">
  164.                     <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
  165.                     <div class="card-body">
  166.                         <h5 class="card-title">Card title</h5>
  167.                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  168.                     </div>
  169.                     <ul class="list-group list-group-flush">
  170.                         <li class="list-group-item">Cras justo odio</li>
  171.                         <li class="list-group-item">Dapibus ac facilisis in</li>
  172.                         <li class="list-group-item">Vestibulum at eros</li>
  173.                     </ul>
  174.                     <div class="card-body">
  175.                         <a href="#" class="card-link">Edit</a>
  176.                         <a href="#" class="d-none card-link">Cancel</a>
  177.                     </div>
  178.                 </div>
  179.             </div>
  180.             <div class="col-4 my-2">
  181.                 <div class="card">
  182.                     <img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
  183.                     <div class="card-body">
  184.                         <h5 class="card-title">Card title</h5>
  185.                         <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  186.                     </div>
  187.                     <ul class="list-group list-group-flush">
  188.                         <li class="list-group-item">Cras justo odio</li>
  189.                         <li class="list-group-item">Dapibus ac facilisis in</li>
  190.                         <li class="list-group-item">Vestibulum at eros</li>
  191.                     </ul>
  192.                     <div class="card-body">
  193.                         <a href="#" class="card-link">Edit</a>
  194.                         <a href="#" class="d-none card-link">Cancel</a>
  195.                     </div>
  196.                 </div>
  197.             </div>
  198.         </div>
  199.     </div>             
  200.  
  201. </body>
  202. </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!