Advertisement
metalx1000

Fire Station Bidding

Aug 13th, 2024
236
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.92 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <title>Station Bidding</title>
  6.   <meta charset="utf-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <style>
  9.     @media only screen and (min-width: 600px) {
  10.       body {
  11.         margin-right: 200px;
  12.         margin-left: 200px;
  13.         margin-top: 20px;
  14.       }
  15.     }
  16.  
  17.     .boxes {
  18.       padding: 20px;
  19.       margin: 10px;
  20.       border-style: solid;
  21.       border-color: black;
  22.       min-height: 150px;
  23.  
  24.     }
  25.  
  26.     .button {
  27.       background-color: #04AA6D;
  28.       /* Green */
  29.       border: none;
  30.       color: white;
  31.       padding: 15px 32px;
  32.       text-align: center;
  33.       text-decoration: none;
  34.       display: inline-block;
  35.       font-size: 16px;
  36.       margin: 4px 2px;
  37.       cursor: pointer;
  38.       width: 100%;
  39.     }
  40.  
  41.     .button-blue {
  42.       background-color: #008CBA;
  43.     }
  44.  
  45.     .button-red {
  46.       background-color: #f44336;
  47.     }
  48.  
  49.     .button-gray {
  50.       background-color: #e7e7e7;
  51.       color: black;
  52.     }
  53.  
  54.     .button-black {
  55.       background-color: #555555;
  56.     }
  57.   </style>
  58. </head>
  59.  
  60. <body>
  61.   <label>Station List</label>
  62.   <div id="list" class="boxes"></div>
  63.  
  64.   <label>Station Selection Order</label>
  65.   <div id="bids" class="boxes"></div>
  66.   <div id="output" class="boxes"></div>
  67.  
  68.   <button class="button button-blue" id="submit" onclick="submit()">Submit</button>
  69.  
  70. </body>
  71. <script>
  72.   let stations = [
  73.     "Station 20",
  74.     "Station 21",
  75.     "Station 22",
  76.     "Station 23",
  77.     "Station 24",
  78.     "Station 25",
  79.     "Station 60",
  80.     "Station 61",
  81.     "Station 63",
  82.     "Station 70",
  83.     "Station 71",
  84.     "Station 72",
  85.     "Station 73",
  86.     "Station 74",
  87.     "Station 75"
  88.   ];
  89.  
  90.   let submit_btn = document.querySelector("#submit");
  91.   let list = document.querySelector("#list");
  92.   let bids = document.querySelector("#bids");
  93.   let output = document.querySelector("#output");
  94.   output.style.display = 'none';
  95.  
  96.   list.addEventListener("click", move);
  97.   bids.addEventListener("click", move);
  98.  
  99.   loadStations();
  100.  
  101.   function move() {
  102.     const isButton = event.target.nodeName === 'BUTTON';
  103.     if (!isButton) {
  104.       return;
  105.     }
  106.     let button = event.target;
  107.     let pid = button.parentElement.id
  108.  
  109.     if (pid == "bids") {
  110.       list.appendChild(button);
  111.     } else {
  112.       bids.appendChild(button);
  113.     }
  114.   }
  115.  
  116.   function loadStations() {
  117.     list.innerHTML = "";
  118.     for (station of stations) {
  119.       list.innerHTML += `<button class="button button-blue">${station}</button>`;
  120.     }
  121.   }
  122.  
  123.   function submit() {
  124.     output.style.display = 'block';
  125.     list.style.display = 'none';
  126.     bids.style.display = 'none';
  127.     submit_btn.style.display = 'none';
  128.  
  129.     let i = 0;
  130.     for (child of bids.children) {
  131.       let station = child.innerText;
  132.       if (station == undefined) {continue};
  133.       i++;
  134.       output.innerHTML += `${i}: ${station}<br>`;
  135.     }
  136.  
  137.   }
  138.  
  139. </script>
  140.  
  141. </html>
  142.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement