String Challenge w createElement('P')

Udemy complete JavaScript Jonas S

by trentHarlem

HTML

<h1>
  String Methods Practice
</h1>

<blockquote class='wrap'>
  '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30'
</blockquote>
<div>
  Format this input data string into something easier to read...
</div>
<blockquote>
  🔴 Delayed Departure from FAO to TXL (11h25)<br>
  Arrival from BRU to FAO (11h45)<br>
  🔴 Delayed Arrival from HEL to FAO (12h05)<br>
  Departure from FAO to LIS (12h30)<br>
</blockquote>

<div>
  innerHTML output here...
</div>

<blockquote id='result'>
</blockquote>

CSS

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');


body {
  background-color: #444;
  font: 400 1.1em system-ui;
  color: whitesmoke;
}

.wrap {
  word-wrap: break-word;
}

#result {
  text-align: right;
  background-color: #222;
  border: 1px solid whitesmoke;
  border-radius: 10px;
  padding-right: 8px;
  font-family: 'Share Tech Mono', monospace;
}

.delayed {
  color: yellow;
}

JavaScript

// data input
const flights =
  '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30';
const result = document.getElementById('result')
const apCode = str => str.slice(0, 3).toUpperCase();

for (const flight of flights.split('+')) {
  let [type, from, to, time] = flight.split(';');
  // creat paragraphs
  let p = document.createElement('P');
  p.className = `${type.slice(1,8).toLowerCase()}`;
  result.append(p);
// create output string
  type = type.replaceAll('_', ' ').trim()
  if (type.includes('Delayed')) {
    type = `🛑  ` + type
  }
  time = time.replace(':', 'h')
  const output = `${type} ${apCode(from)} ${apCode(to)} (${time})`.padStart(38);
  console.log(output);
  // add output tp paragr
  p.innerHTML = (output)
  // p.innerHTML = (`${output}`)
}







/*  
 let pList = document.querySelectorAll('P')
 
 let sep
 let i = 0;
 const line = flights.split('+');
 for (const l of line) {
 console.log(line);
 let output = '';
 sep = l.split(';');
 //console.log(sep[0]);
  let p = document.createElement('P');
  p.className = `${sep[0].slice(1,8).toLowerCase()}`;
  result.append(p)
  //console.log((`${sep[0].slice(1,8).toLowerCase()}`))
 for (const [i, elem] of sep.entries()) {
 
 
   let dir = sep[0].replaceAll('_', ' ').trim()
   if (dir.includes('Delayed')) {
     dir = `🛑  ` + dir
   }
   const ap1 = sep[1].slice(0, 3).toUpperCase()
   const ap2 = sep[2].slice(0, 3).toUpperCase()
   const time = sep[3].replace(':', 'h')
   
  
   output = `${dir} from ${ap1} to ${ap2} (${time})  <br>`;
   //output = `${dir} from ${ap1} to ${ap2} (${time})`;
 }
 //p.innerHTML=(`${output} <br>`);
 // No CHange testing the linebreak in and out of loop 
 
 
 //if(output.includes('Delayed')) p.classList.add('delayed')
 
 result.innerHTML+=(output);
 //result.innerHTML+=(`${output} <br>`);
 }
  //.    p.classList.add('delayed')
 ...