JSFiddle - React, Tailwind, and code Playground

by Kushan Randima

HTML

<head>
<link rel="stylesheet" href="mystyle.css">
</head>

<h1><span style="text-decoration: underline;">Medication Management System</span></h1>
<h2>&nbsp;</h2>
<h2>List of Medications:</h2>

<table style="height: 18px; width: 58.8937%; border-collapse: collapse;" border="0" id="medicationList">
    <thead>
        <tr>
            <th>medication id</th>
            <th>medication name</th>
            <th>medication dose</th>
            <th>medication repeats</th>            
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<p>&nbsp;</p>
<h2>Add Medication:</h2>
<form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
    <label for="mname">Enter medication id:</label>
    <input type="number" name="medicationId" id="medicationId">
    <br /><br />
    <label for="mname">Enter medication name:</label>
    <input type="text" name="medicationName" id="medicationName">
    <br /><br />
    <label for="mdose">Enter medication dose:</label>
    <input type="number" name="medicationDose" id="medicationDose">
    <br /><br />
    <label for="mdose">Enter medication repeats:</label>
    <input type="number" name="medicationRepeat" id="medicationRepeat">
    <br /><br />
    <input type="submit" value="Add Medication" />
</form>
<p><br /><br /></p>
<h2>Delete Medication:</h2>
<label for="mname">Enter the medication name you want to delete: </label>
<input id="medicationNameForDelete" name="mid" type="text" />
<br /><br />
<input type="button" id="medicationDelete" value="Delete Medication" onclick="onDelete()" />

<p>&nbsp;</p>

CSS

p {
  font-family: Lato;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}



input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=number], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

input[type=button] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=button]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

TypeScript

interface MedicationInfor {
    medicationId: number;
    medicationName: string;
    medicationDose: number;
}

let MedicationList: Array<MedicationInfor> = [];


function drawTable() {
    var table = (document.getElementById("medicationList") as HTMLTableElement).getElementsByTagName('tbody')[0];
    table.innerHTML = "";
    let i = 0;
    MedicationList.forEach(medicationInfor => {
        let newRow = table.insertRow(i);
        let cell1 = newRow.insertCell(0);
        cell1.innerHTML = medicationInfor.medicationId.toString();
        let cell2 = newRow.insertCell(1);
        cell2.innerHTML = medicationInfor.medicationName;
        let cell3 = newRow.insertCell(2);
        cell3.innerHTML = medicationInfor.medicationDose.toString();
        i = i + 1;
    });
}


function onFormSubmit() {
     var formData = readFormData();
    insertNewRecord(formData);
}

function readFormData(): MedicationInfor {
    let medicationId = parseInt((document.getElementById("medicationId") as HTMLInputElement).value);
    let medicationName = (document.getElementById("medicationName") as HTMLInputElement).value;
    let medicationDose = parseInt((document.getElementById("medicationDose") as HTMLInputElement).value);
    let medicationRepeat = parseInt((document.getElementById("medicationRepeat") as HTMLInputElement).value);
    return { medicationId: medicationId, medicationName: medicationName, medicationDose: medicationDose };
}

function insertNewRecord(data: MedicationInfor) {
    MedicationList.push(data);
    drawTable();
}

function onDelete() {
    let medicationName = (document.getElementById("medicationNameForDelete") as HTMLInputElement).value;
    MedicationList =  MedicationList.filter(m=> m.medicationName !=  medicationName);
    drawTable();
}