JSFiddle - React, Tailwind, and code Playground

by Andreu

HTML

<html>
    <head>
        <title>Magic table</title>
    </head>
    <body>
        <div id="root">

        </div>   
        <p>Hello,world!</p>
    </body>
</html>

CSS

.data__item,
        .data__item_header{
            padding: 0px 10px;
        }
        .data__row,
        .data__row_header{
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

JavaScript

console.log('Hello, world!');
const tables = [
    {start_day: 'Fri July 10', dataDays: [ {day : 399}, {day: 519}, {day: ''}, {day: ''}, {day: 1222}]},
    {start_day: 'Fri July 11', dataDays: [ {day : 399}, {day: 519}, {day: ''}, {day: ''}, {day: 1222}]},
    {start_day: 'Fri July 12', dataDays: [ {day : 399}, {day: 519}, {day: ''}, {day: ''}, {day: 1222}]},
    {start_day: 'Fri July 13', dataDays: [ {day : ''}, {day: 519}, {day: ''}, {day: '333'}, {day: 1222}]},
    {start_day: 'Fri July 14', dataDays: [ {day : 399}, {day: 519}, {day: ''}, {day: ''}, {day: 1222}]},
    {start_day: 'Fri July 15', dataDays: [ {day : 399}, {day: 519}, {day: ''}, {day: ''}, {day: 1222}]}
  ];
  let countDays = tables.length ;
  let table = '<div> <p>Hello, world !!</p> </div>';
  let htmlback = document.getElementById('root');
  
  var obj = {a:1, b:2, c:3};
  let newTable ='<div class="data"> ' ;
      newTable +='<div class="data__row_header"> ';
      newTable += '<span class="data__item_header">day 4</span> <span class="data__item_header">day 5</span><span class="data__item_header">day 6</span><span class="data__item_header">day 7</span><span class="data__item_header">day 8</span>';
      newTable += '</div>';
  for (let i= 1; i < tables.length; i++ ) {
    // console.log(tables[i]['dataDays']);
    let table = tables[i]['dataDays'];
    let row = '<div class="data__row">';
    for (var prop in table) {
        console.log(table[prop]);
        let tibleitem = table[prop]['day'];
        // console.log(tibleitem);
        if(tibleitem == 0){
            row += '<span class="data__item"> empty </span>';
        }else{
            row += '<span class="data__item">'+table[prop]['day']+'</span>';
        }

      }
      row += '</div>';
    //   console.log(row);
      newTable = newTable + row ; 
  }
  newTable += '</div>';
  console.log(newTable);




  htmlback.innerHTML = newTable;
  console.log(tables[0]['dataDays']);
//   console.log(Object.keys(tables[1]).length);