├── README.md
├── app.js
├── index.html
└── styles.css


/README.md:
--------------------------------------------------------------------------------
1 | # flight-widget-vanilla-javascript
2 | A Flight widget made in vanilla JavaScript just for fun!
3 | 


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
  1 | const tableBody = document.getElementById('table-body')
  2 | 
  3 | let flights = [
  4 |   {
  5 |     time: "08:11",
  6 |     destination: "OMAN",
  7 |     flight: "OX 203",
  8 |     gate: "A 01",
  9 |     remarks: "ON TIME"
 10 |    },
 11 |   {
 12 |     time: "12:39",
 13 |     destination: "LONDON",
 14 |     flight: "CL 320",
 15 |     gate: "C 31",
 16 |     remarks: "CANCELLED"
 17 |    },
 18 |   {
 19 |     time: "13:21",
 20 |     destination: "DUBAI",
 21 |     flight: "DXB 201",
 22 |     gate: "A 19",
 23 |     remarks: "CANCELLED"
 24 |   },
 25 |   {
 26 |     time: "14:01",
 27 |     destination: "FRANKFURT",
 28 |     flight: "FR 402",
 29 |     gate: "B 02",
 30 |     remarks: "ON TIME"
 31 |   },
 32 |   {
 33 |     time: "15:22",
 34 |     destination: "TOKYO",
 35 |     flight: "TK 211",
 36 |     gate: "A 32",
 37 |     remarks: "DELAYED"
 38 |   }
 39 | ]
 40 | 
 41 | const destinations = ["TOKYO", "FRANKFURT", "DUBAI", "LONDON", "OMAN", "BEIRUT"]
 42 | const remarks = ["ON TIME", "DELAYED", "CANCELLED"]
 43 | let hour = 15
 44 | 
 45 | function populateTable() {
 46 |   for (const flight of flights) {
 47 |     const tableRow = document.createElement("tr")
 48 |     const tableIcon = document.createElement("td")
 49 |     tableIcon.textContent = "✈"
 50 |     tableRow.append(tableIcon)
 51 | 
 52 |     for (const flightDetail in flight) {
 53 |       const tableCell = document.createElement("td")
 54 |       const word = Array.from(flight[flightDetail])
 55 | 
 56 |       for (const [index, letter] of word.entries()) {
 57 |         const letterElement = document.createElement("div")
 58 |         setTimeout(() => {
 59 |           letterElement.classList.add('flip')
 60 |           letterElement.textContent = letter
 61 |           tableCell.append(letterElement)
 62 |         }, 100 * index)
 63 | 
 64 | 
 65 |       }
 66 |       tableRow.append(tableCell)
 67 |     }
 68 |     tableBody.append(tableRow)
 69 |   }
 70 | }
 71 | populateTable() 
 72 | 
 73 | 
 74 | 
 75 | function generateRandomLetter() {
 76 |   const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
 77 |   return alphabet.charAt(Math.floor(Math.random() * alphabet.length))
 78 | }
 79 | 
 80 | function generateRandomNumber(maxNumber) {
 81 |   const numbers = "0123456789"
 82 |   if (maxNumber) {
 83 |     const newNumbers = numbers.slice(0, maxNumber)
 84 |     return newNumbers.charAt(Math.floor(Math.random() * newNumbers.length))
 85 |   } else {
 86 |     return numbers.charAt(Math.floor(Math.random() * numbers.length))
 87 |   }
 88 | }
 89 | 
 90 | function generateTime() {
 91 |   let displayHour = hour
 92 |   if (hour < 24) {
 93 |     hour++
 94 |   }
 95 |   if (hour >= 24) {
 96 |     hour = 1
 97 |     displayHour = hour
 98 |   }
 99 |   if (hour < 10) {
100 |     displayHour = "0" + hour
101 |   }
102 |   return displayHour +  ":" + generateRandomNumber(5) + generateRandomNumber()
103 | }
104 | 
105 | function shuffleUp() {
106 |   flights.shift()
107 |   flights.push({
108 |     time: generateTime(),
109 |     destination: destinations[Math.floor(Math.random() * destinations.length)],
110 |     flight: generateRandomLetter() + generateRandomLetter() + " " + generateRandomNumber() + generateRandomNumber() + generateRandomNumber(),
111 |     gate: generateRandomLetter() + " " + generateRandomLetter() + generateRandomLetter(),
112 |     remarks: remarks[Math.floor(Math.random() * remarks.length)]
113 |   })
114 |   tableBody.textContent = ""
115 |   populateTable()
116 | }
117 | 
118 | 
119 | setInterval(shuffleUp, 5000)
120 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 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 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Flight Widget</title>
 8 |     <link rel="stylesheet" href="styles.css">
 9 |   </head>
10 |   <body>
11 | 
12 |     <div class="departures">
13 |       <header>DEPARTURES</header>
14 |       <table>
15 |         <thead>
16 |         <tr>
17 |           <th></th>
18 |           <th id="time">TIME</th>
19 |           <th id="destination">DESTINATION</th>
20 |           <th id="flight">FLIGHT</th>
21 |           <th id="gate">GATE</th>
22 |           <th id="remarks">REMARKS</th>
23 |         </tr>
24 |       </thead>
25 |       <tbody id="table-body"></tbody>
26 |       </table>
27 |     </div>
28 | 
29 | 
30 | 	<script src="app.js"></script>
31 |   </body>
32 | </html>


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');
 2 | 
 3 | * {
 4 |   font-family: 'Ubuntu Condensed', sans-serif;
 5 |   color: rgb(240, 240, 240);
 6 |   font-size: 35px;
 7 | }
 8 | 
 9 | body {
10 |   display: flex;
11 |   justify-content: center;
12 |   height: 100vh;
13 |   align-items: center;
14 |   background-color: rgb(251, 199, 127);
15 | }
16 | 
17 | header {
18 |   padding: 10px;
19 | }
20 | 
21 | .departures {
22 |   background-color: rgb(6, 6, 6);
23 |   border-radius: 10px;
24 |   padding: 10px;
25 |   box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
26 | }
27 | 
28 | .departures table {
29 |   background-color: rgb(46, 46, 46);
30 |   text-align: left;
31 | }
32 | 
33 | .departures table td {
34 |   height: 50px;
35 | }
36 | 
37 | .departures table div {
38 |   border: solid 4px rgb(26, 26, 26);
39 |   background-color: black;
40 |   min-width: 20px;
41 |   height: 40px;
42 |   float:left;
43 | }
44 | 
45 | #time {
46 |   width: 160px; 
47 | }
48 | 
49 | #destination {
50 |   width: 260px;
51 | }
52 | 
53 | #flight {
54 |   width: 205px;
55 | }
56 | 
57 | #gate {
58 |   width: 135px;
59 | }
60 | 
61 | #remarks {
62 |   width: 260px;
63 | }
64 | 
65 | .flip {
66 |   animation: 0.5s linear flipping;
67 | }
68 | 
69 | @keyframes flipping {
70 |   0% {
71 |       transform: rotateX(0deg);
72 |   }
73 |   50% {
74 |       transform: rotateX(90deg);
75 |   }
76 |   100% {
77 |       transform: rotateX(0deg);
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------