Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Station Bidding</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- @media only screen and (min-width: 600px) {
- body {
- margin-right: 200px;
- margin-left: 200px;
- margin-top: 20px;
- }
- }
- .boxes {
- padding: 20px;
- margin: 10px;
- border-style: solid;
- border-color: black;
- min-height: 150px;
- }
- .button {
- background-color: #04AA6D;
- /* Green */
- border: none;
- color: white;
- padding: 15px 32px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- margin: 4px 2px;
- cursor: pointer;
- width: 100%;
- }
- .button-blue {
- background-color: #008CBA;
- }
- .button-red {
- background-color: #f44336;
- }
- .button-gray {
- background-color: #e7e7e7;
- color: black;
- }
- .button-black {
- background-color: #555555;
- }
- </style>
- </head>
- <body>
- <label>Station List</label>
- <div id="list" class="boxes"></div>
- <label>Station Selection Order</label>
- <div id="bids" class="boxes"></div>
- <div id="output" class="boxes"></div>
- <button class="button button-blue" id="submit" onclick="submit()">Submit</button>
- </body>
- <script>
- let stations = [
- "Station 20",
- "Station 21",
- "Station 22",
- "Station 23",
- "Station 24",
- "Station 25",
- "Station 60",
- "Station 61",
- "Station 63",
- "Station 70",
- "Station 71",
- "Station 72",
- "Station 73",
- "Station 74",
- "Station 75"
- ];
- let submit_btn = document.querySelector("#submit");
- let list = document.querySelector("#list");
- let bids = document.querySelector("#bids");
- let output = document.querySelector("#output");
- output.style.display = 'none';
- list.addEventListener("click", move);
- bids.addEventListener("click", move);
- loadStations();
- function move() {
- const isButton = event.target.nodeName === 'BUTTON';
- if (!isButton) {
- return;
- }
- let button = event.target;
- let pid = button.parentElement.id
- if (pid == "bids") {
- list.appendChild(button);
- } else {
- bids.appendChild(button);
- }
- }
- function loadStations() {
- list.innerHTML = "";
- for (station of stations) {
- list.innerHTML += `<button class="button button-blue">${station}</button>`;
- }
- }
- function submit() {
- output.style.display = 'block';
- list.style.display = 'none';
- bids.style.display = 'none';
- submit_btn.style.display = 'none';
- let i = 0;
- for (child of bids.children) {
- let station = child.innerText;
- if (station == undefined) {continue};
- i++;
- output.innerHTML += `${i}: ${station}<br>`;
- }
- }
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement