Medwatch Screen 1

by sk8wt

HTML

<div class="top-bar">
  <div class="nav-list">
    Medwatch
  </div>
</div>

<div class="container">

  <div class="fda">
    The FDA Safety Information and Adverse Event Reporting Program for Prescription and Over-the-Counter Medications.
  </div>

  <div class="detailed-info">
    Find detailed information on thosands of drugs in our database including drug specs, common reactions, recent issue reports and more.
  </div>

  <div class="med-question">
    Question 1 (of 5): What medications, prescription and over-the-counter, are you taking?
  </div>

  <div class="med-description">
    It helps to know them all since some medications interact with each other, but just add as many as you would like.
  </div>

  <div class="drug-container">
    <div class="search-box">
      Enter drug 1:
      <link href='https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.2/autocomplete-lhc.min.css' rel="stylesheet">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://clinicaltables.nlm.nih.gov/autocomplete-lhc-versions/17.0.2/autocomplete-lhc.min.js'></script>
              
      <input type="text" id="rxterms" name="drugs-search" placeholder="Product Name" size=15>

      <input type="text" id="drug_strengths" name="dosage-search" placeholder="Dosage" size=10>
      OR
      <input type="text" name="ndc-search" placeholder="NDC #" size=15>
      <img class="add-drug" src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/plus-circle-512.png" alt="Add New Drug">
    </div>
    <div id="next-search" />
  </div>
</div>

<button class="button" id="next-page">Go to Next Page</button>

CSS

.top-bar,
.nav-list {
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  font-weight: bold;
  font-size: 150%;
  color: #ffffff;
}

.top-bar {
  color: #FFFFFF;
  height: 40px;
  margin-left: 10px;
}

.nav-list {
  list-style-type: none;
  padding: 0;
  display: inline;
  color: #20639B;
}

.container {
  padding: 10px;
}

.fda {
  margin-bottom: 5%;
  font-size: 90%;
}

.detailed-info {
  margin-bottom: 5%;
}

.med-question {
  font-size: 120%;
  font-weight: bold;
}

.med-description {
  margin-bottom: 5%;
}

.drug-container {
  display: grid;
  justify-content: space-evenly;
}

.search-box {
  margin-left: auto;
  margin-right: 0;
  padding: 10px;
  justify-items: center;
}

.add-drug {
  width: 30px;
  height: 30px;
  position: absolute;
}

.button {
  background-color: #e7e7e7;
  color: black;
  border: none;
  padding: 15px 20px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  float: right;
}

JavaScript

new Def.Autocompleter.Search('rxterms',
 'https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?ef=STRENGTHS_AND_FORMS');
Def.Autocompleter.Event.observeListSelections('rxterms', function() {
  var drugField = $('#rxterms')[0];
  var autocomp = drugField.autocomp;
  var strengths =
    autocomp.getSelectedItemData()[0].data['STRENGTHS_AND_FORMS'];
  if (strengths)
    $('#drug_strengths')[0].autocomp.setListAndField(strengths, '');
})

var autoDrug = ""
  $("#next-page").click(function() {
		autoDrug = $("#rxterms").val();
    console.log(autoDrug)
});

              


  var drugNum = 1;
  $(".add-drug").click(function() {
    drugNum += 1;

    var newLine = document.createElement("div");
    newLine.className = "search-box";
    var textNode = document.createTextNode("Enter drug " + drugNum + ": ");
    var drugSearch = document.createElement("INPUT");
    drugSearch.placeholder = "Product Name";
    drugSearch.id = "rxterms";
    drugSearch.size = 15;
    drugSearch.setAttribute("type", "text");

    var dosageSearch = document.createElement("INPUT");
    dosageSearch.placeholder = "Dosage";
    dosageSearch.size = 10;
    dosageSearch.setAttribute("type", "text");

    var textNode2 = document.createTextNode(" OR ");

    var ndcSearch = document.createElement("INPUT");
    ndcSearch.placeholder = "NDC #";
    ndcSearch.size = 15;
    ndcSearch.setAttribute("type", "text");

    newLine.appendChild(textNode)
    newLine.appendChild(drugSearch)
    newLine.appendChild(dosageSearch)
    newLine.appendChild(textNode2)
    newLine.appendChild(ndcSearch)

    document.getElementById("next-search").appendChild(newLine);
  });