API tools faq
paste
Advertisement
lemansky

Untitled

lemansky
Jan 17th, 2025
91
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.61 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.0">
  6.     <title>Document</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  8.     <script>
  9.         document.addEventListener('DOMContentLoaded', (e) => {
  10.             let data = [
  11.               {
  12.                 "companyName":"Tech Innovators",
  13.                 "jobPosition":"Front-End Developer",
  14.                 "companyCity":"San Francisco",
  15.                 "companyLogo":"https://ps.w.org/lightgallerywp/assets/icon-256x256.png?rev=2659780",
  16.                 "technologies":["HTML","CSS","JavaScript"],
  17.                 "labels":["Promoted","Internship"],
  18.                 "date":"2d",
  19.                 "hours":"Full Time"
  20.               },
  21.             {"companyName":"NextGen Solutions","jobPosition":"Full-Stack Developer","companyCity":"New York","companyLogo":"https://ps.w.org/insta-type-gallery/assets/icon-256x256.png?rev=2143642","technologies":["HTML","CSS","JavaScript","Node.js","MongoDB"],"labels":["Remote"],"date":"3d","hours":"Flexible"},{"companyName":"Digital Enterprises","jobPosition":"UI/UX Designer","companyCity":"Los Angeles","companyLogo":"https://ps.w.org/new-photo-gallery/assets/icon-256x256.png?rev=1954544","technologies":["HTML","CSS","JavaScript","Photoshop","Illustrator"],"labels":["NEW!"],"date":"14d","hours":"Part Time"},{"companyName":"CloudWorks","jobPosition":"Back-End Developer","companyCity":"Chicago","companyLogo":"https://ps.w.org/gallery-videos/assets/icon-128x128.png?rev=2857063","technologies":["Python","Django","MySQL"],"labels":["Popular"],"date":"1m","hours":"Full Time"},{"companyName":"Code Wizards","jobPosition":"Software Engineer","companyCity":"Seattle","companyLogo":"https://ps.w.org/phraseanet-client/assets/icon-256x256.png?rev=2686624","technologies":["JavaScript","React","Node.js"],"labels":["Popular"],"date":"1m","hours":"Full Time"},{"companyName":"Data Specialists","jobPosition":"Data Scientist","companyCity":"Boston","companyLogo":"https://ps.w.org/logo-carousel-free/assets/icon-128x128.gif?rev=3154448", "technologies":["Python","R","SQL","Tableau"],"labels":["Internship"],"date":"2m","hours":"Part Time"},{"companyName":"Mobile Experts","jobPosition":"Mobile Developer","companyCity":"Austin","companyLogo":"https://ps.w.org/logo-showcase-ultimate/assets/icon-256x256.png?rev=2875105","technologies":["Java","Swift","Objective-C","Android SDK","iOS SDK"],"labels":[],"date":"2m","hours":"Flexible"},{"companyName":"Big Data Solutions","jobPosition":"Big Data Engineer","companyCity":"San Diego","companyLogo":"https://ps.w.org/foogallery-migrate/assets/icon-256x256.png?rev=2856451","technologies":["Hadoop","Spark","Java","Scala"],"labels":["Promoted","Internship"],"date":"3m","hours":"Part time"},{"companyName":"E-Commerce Innovations","jobPosition":"E-Commerce Developer","companyCity":"San Jose","companyLogo":"https://ps.w.org/elementor/assets/icon-128x128.gif?rev=3111597","technologies":["Magento","PHP","MySQL"],"labels":["NEW!"],"date":"3m","hours":"Flexible"},{"companyName":"Cloud Mavens","jobPosition":"Cloud Engineer","companyCity": "San Jose", "companyLogo":"https://ps.w.org/gallery-images-ape/assets/icon-128x128.png?rev=1468073","technologies":[".NET","C#","Azure","AWS"],"labels":["Remote"],"date":"3m","hours":"Full Time"}];
  22.  
  23.             const fillData = (data) => {
  24.               let original = document.querySelector('.list-group-item');
  25.               Array.from(original.parentNode.children).slice(1).forEach(child => child.remove()); // съкратен запис, премахваме всички без първия
  26.               for (let i = 0; i < data.length; i++) {
  27.                
  28.                let clone = original.cloneNode(true);
  29.  
  30.                original.parentNode.append(clone);
  31.  
  32.                clone.querySelector('img').src = data[i].companyLogo;
  33.                clone.querySelector('.company-name').innerText = data[i].companyName;
  34.                clone.querySelector('.company-offering').innerText = data[i].jobPosition;
  35.                clone.querySelectorAll('.text-muted')[0].innerText = data[i].date;
  36.                clone.querySelectorAll('.text-muted')[1].innerText = data[i].hours;
  37.                clone.querySelectorAll('.text-muted')[2].innerText = data[i].companyCity;
  38.                let techno = clone.querySelectorAll('.bg-cyan');
  39.                let single = techno[0].cloneNode(true);  
  40.                let parentElement = techno[0].parentNode;
  41.                parentElement.innerHTML = '';
  42.                for(let j = 0; j < data[i].technologies.length; j++){
  43.                  let c = single.cloneNode(true);
  44.                  c.innerText = data[i].technologies[j];
  45.                  parentElement.append(c);
  46.                  c.classList.add('d-inline-block', 'm-1');
  47.                }
  48.              }
  49.            }
  50.            fillData(data);
  51.  
  52.            let filtered = [];
  53.            let filters = document.querySelectorAll('.form-check-input');
  54.              filters.forEach(item => {
  55.                 item.addEventListener('change', (e) => {
  56.                   let technology = e.target.id;
  57.                   if(e.target.checked){
  58.                    
  59.                     filtered = [...filtered, ...data.filter(item => item.technologies.includes(technology))];
  60.  
  61.                     // премахваme дублираните
  62.                     filtered = Array.from(filtered.reduce((map, obj) => map.set(obj.companyName, obj), new Map()).values());
  63.                     console.log(filtered);
  64.                     fillData(filtered);
  65.                   } else {
  66.                     // ако махнем отметка, добавените обяви се премахват от масива на филтрираните
  67.                     filtered = filtered.filter(item => !item.technologies.includes(technology));
  68.                     fillData(filtered);
  69.                   }
  70.               });
  71.           });
  72.         });
  73.     </script>  
  74.     <style>
  75.         #main{
  76.             background-position:top;
  77.             background:url('https://deepcloud.eu/6400.jpg');
  78.             background-color: white;
  79.             background-repeat: repeat-x;
  80.         }
  81.  
  82.         .border-start-3{
  83.             border:0px;
  84.             border-left: 6px solid;
  85.             border-top-left-radius: 6px;
  86.             border-bottom-left-radius: 6px;
  87.             box-shadow: rgb(167 218 209 / 59%) 0px 6px 18px 0px;
  88.         }
  89.  
  90.         .company-logo{
  91.             border:solid 2px black;
  92.             border-radius:32px;
  93.         }
  94.         .text-cyan{
  95.             color:#13d4c1;
  96.         }
  97.         .bg-cyan{
  98.             background: rgb(167 218 209 / 59%);
  99.         }
  100.  
  101.         .border-cyan{
  102.             border:solid 2px #13d4c1;
  103.             box-shadow: rgb(167 218 209 / 59%) 0px 6px 18px 0px;
  104.         }
  105.     </style>
  106. </head>
  107. <body>
  108.     <div class="container-fluid" id="main">
  109.         <div class="row p-4">
  110.             <div class="col text-center m-2">
  111.                 <div class="d-block display-1">Job Listing App</div>
  112.                 <div class="h2">presented by the 39 МУТ gang</div>
  113.             </div>
  114.         </div>
  115.     </div>
  116.     <div class="container">
  117.         <div class="row">
  118.             <div class="col-9 job-item">
  119.                 <ul class="list-group">
  120.                     <li class="list-group-item border-success border-start-3 p-4 my-3 ">
  121.                         <div class="row align-items-center">
  122.                             <div class="col-auto">
  123.                                 <img src="https://ps.w.org/wp-easy-gallery/assets/icon-256x256.png?rev=1906112" alt="" class="company-logo img-fluid" width="64" title="Photo Magic">
  124.                             </div>
  125.                             <div class="col">
  126.                                 <div class="d-block">
  127.                                     <span class="company-name text-cyan h5">Photo Magic</span>
  128.                                     <span class="badge rounded-pill text-bg-secondary mx-2">Promoted</span>
  129.                                     <span class="badge rounded-pill text-bg-dark mx-2">NEW!</span>
  130.                                 </div>
  131.                                 <h3 class="company-offering">Senior Frontend Developer</h3>
  132.                                 <div class="row">
  133.                                     <span class="col text-muted">1d ago</span> &#9900;
  134.                                     <span class="col text-muted">Full Time</span> &#9900;
  135.                                     <span class="col text-muted">Varna</span>
  136.                                 </div>
  137.                             </div>
  138.                             <div class="col ">
  139.                                 <a class="bg-cyan text-dark px-3 py-2 rounded text-decoration-none" href="#!">HTML</a>
  140.                                 <a class="bg-cyan text-dark px-3 py-2 rounded text-decoration-none" href="#!">CSS</a>
  141.                                 <a class="bg-cyan text-dark px-3 py-2 rounded text-decoration-none" href="#!">JavaScript</a>
  142.                             </div>          
  143.                         </div>
  144.                     </li>
  145.                 </ul>
  146.                
  147.             </div>
  148.             <div class="col-3">
  149.                 <div class="border-cyan p-3 my-3">
  150.                 <strong>Filter</strong>
  151.                 <span class="d-block display-6">Technology</span>
  152.                 <div class="form-check">
  153.                   <input class="form-check-input" type="checkbox" value="" id="HTML">
  154.                   <label class="form-check-label" for="HTML">
  155.                     HTML
  156.                   </label>
  157.                 </div>
  158.                 <div class="form-check">
  159.                   <input class="form-check-input" type="checkbox" value="" id="CSS">
  160.                   <label class="form-check-label" for="CSS">
  161.                     CSS
  162.                   </label>
  163.                 </div>
  164.                 <div class="form-check">
  165.                   <input class="form-check-input" type="checkbox" value="" id="JavaScript">
  166.                   <label class="form-check-label" for="JavaScript">
  167.                     JavaScript
  168.                   </label>
  169.                 </div>
  170.                 <div class="form-check">
  171.                   <input class="form-check-input" type="checkbox" value="" id="Python">
  172.                   <label class="form-check-label" for="Python">
  173.                     Python
  174.                   </label>
  175.                 </div>
  176.                 <div class="form-check">
  177.                   <input class="form-check-input" type="checkbox" value="" id="Ruby">
  178.                   <label class="form-check-label" for="Ruby">
  179.                     Ruby
  180.                   </label>
  181.                 </div>
  182.                 <div class="form-check">
  183.                   <input class="form-check-input" type="checkbox" value="" id="PHP">
  184.                   <label class="form-check-label" for="PHP">
  185.                     PHP
  186.                   </label>
  187.                 </div>
  188.                 <div class="form-check">
  189.                   <input class="form-check-input" type="checkbox" value="" id=".NET">
  190.                   <label class="form-check-label" for=".NET">
  191.                     .NET
  192.                   </label>
  193.                 </div>
  194.                 <div class="form-check">
  195.                   <input class="form-check-input" type="checkbox" value="" id="Node.js">
  196.                   <label class="form-check-label" for="Node.js">
  197.                     Node.js
  198.                   </label>
  199.                 </div>
  200.                 <div class="form-check">
  201.                   <input class="form-check-input" type="checkbox" value="" id="Java">
  202.                   <label class="form-check-label" for="Java">
  203.                     Java
  204.                   </label>
  205.                 </div>
  206.  
  207.                 <span class="d-block display-6">Hours</span>
  208.                 <div class="form-check">
  209.                   <input class="form-check-input" type="checkbox" value="" id="FullTime">
  210.                   <label class="form-check-label" for="FullTime">
  211.                     Full Time
  212.                   </label>
  213.                 </div>
  214.                 <div class="form-check">
  215.                   <input class="form-check-input" type="checkbox" value="" id="Flexible">
  216.                   <label class="form-check-label" for="FullTime">
  217.                     Flexible
  218.                   </label>
  219.                 </div>
  220.                 </div>
  221.             </div>
  222.         </div>
  223.     </div>
  224. </body>
  225. </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!