meds list 2 table

In this example below you will see how to do a meds list 2 table with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by wwitekk, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wwitekk ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>meds list 2 table</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="days"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/wwitekk/meds-list-2-table-XReKmj */
body {
  font-family: 'Lato', sans-serif;
}

small{font-size: .7em;}

.day {
  margin-top: 20px;
  page-break-inside: avoid;
}

.day__table{
  margin-top: 5px;
  border: 1px solid #333;
}

.day__item {
  display: flex;
  flex-wrap: nowrap;
}

.day__item > * {
  border: 1px solid #333;
  padding: 10px;
  
}

.day__item > *:first-child {
  width: 30%;
}

.day__item > *+* {
  flex-grow: 1;
}

/*Downloaded from https://www.codeseek.co/wwitekk/meds-list-2-table-XReKmj */
const meds = [
  {
    name: "Krem z HC",
    startDate: "2017-04-27",
    endDate: "2017-05-04",
    times: 1,
    notes: "koniec 02-04.05"
  },
  {
    name: "Krople Fenistil",
    startDate: "2017-04-26",
    endDate: "2017-05-31",
    times: 3,
    notes: "x3 krople (kilka tyg.)"
  },
  {
    name: "Krople Dicoflor",
    startDate: "2017-04-26",
    endDate: "2017-05-05",
    times: 1,
    notes: "x5 kropel (koniec 05.05)"
  },
    {
    name: "Krople Dicoflor",
    startDate: "2017-05-06",
    endDate: "2017-08-06",
    times: 1,
    notes: "x3 kropel (koniec 06.08)"
  },
  {
    name: "Krem natłuszczający",
    startDate: "2017-04-27",
    endDate: "2020-04-27",
    times: 4,
    notes: "x3 lub x4 dziennie"
  },
  {
    name: "Krem po kąpieli ",
    startDate: "2017-04-27",
    endDate: "2020-04-27",
    times: 1,
    notes: "na skórę wilgotną"
  },
  {
    name: "Krople Floxal",
    startDate: "2017-05-02",
    endDate: "2017-05-09",
    times: 4,
    notes: "x1 kropla"
  }
];

const startDate = '2017-05-06',
  PRINT_START_DATE = new Date(startDate).valueOf(),
  PRINT_DAYS_NUMBER = 14,
  DAYS_CONTAINER = document.querySelector(".days"),
  DAY_IN_MS = 86400000,
  dates = [...Array(PRINT_DAYS_NUMBER).keys()].map(
    idx => idx * DAY_IN_MS + PRINT_START_DATE
  );

const weekDays = ['niedziela', 'poniedziałek', 'wtorek', 'środa', 'czwartek', 'piątek', 'sobota'];

const formatDates = item =>
  Object.assign(item, {
    startDate: new Date(item.startDate).valueOf(), 
    endDate: new Date(item.endDate).valueOf()
  });

const formatDate = date =>
`${date.getDate()}.${date.getMonth() + 1} (${weekDays[date.getDay()]}) `

const applyMedTemplate = med => 
`<div class="day__item">
  <div>${med.name}<br /><small>${med.notes}</small></div>${Array(med.times).fill("<div></div>").join("")}
 </div>`

/**
*returns html string for day
*/
const createDayItem = forDate => {
  const dayHTML = meds
    .map(formatDates)
    .filter(med => med.startDate <= forDate && med.endDate >= forDate)
    .map(applyMedTemplate)
    .join("");

  return `<div class="day"> 
    <p>${formatDate(new Date(forDate))}</p>
    <div class="day__table"> ${dayHTML} </div>
</div>`;
};
//console.log(dates.map(createDayItem));
DAYS_CONTAINER.innerHTML = dates.map(createDayItem).join("");

Comments