Drug Reaction Test MedWatch

by sk8wt

HTML

<div class="container">
  <img src="https://www.fda.gov/ucm/groups/fdagov-public/documents/image/ucm519149.png" alt="FDA Logo"></div>
<div id="nav-bar">
  Home | Report Reaction | Search Drugs | Support
</div>
<br>
<div id="intro">
  <h3>
  Find detailed information on thousands of drugs in our database including drug specs, common reactions, recent issue reports and more.
  </h3> 
</div>
<div id="search-select">
  Enter Product To Search
  <input id="inputTextId" type="text" name="parts-search" placeholder="Zestril" size=30>
  <br>
  <br>
  
<br>
<br>
<button id="buttonID" class="button button5"> View drug & reaction information for this product only</button>

<table id="dataTable"></table>

CSS

#nav-bar {
   border: orange;
  background-color: inherit;
  color: #007CBA;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  
}

#search-select {
  display: inline;
  text-align: right;
  float: right;
}
#search-select-quantity {
  display: inline;
  text-align: right;
  float: right;
}

#search {
  display: inline;
  text-align: right;
  float: right ;
}

.button {
  background-color: #808080;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}

JavaScript

$("#buttonID").on("click", function() {
 var input = document.getElementById("inputTextId").value;
   //

console.log("input value:", input);

searchURL(input); 
    
});


function searchURL(inputVal) {

  let searchString = "https://clinicaltables.nlm.nih.gov/api/rxterms/v3/search?terms="+inputVal;
  fetch(searchString)
    .then(function(result){
      console.log('data2');
    	return result.json();
    })//response type
    .then(function(data){ 
    	console.log('data');
      if (data.results)
      	console.log(data)
      	printToScreen(data.results);
    })
}

function printToScreen(data){
console.log('returned data');
let max = data.length > 15 ? 15 : data.length;
let table = $('#dataTable');
	for (var index = 0; index < max; index++){
  	let obj = data[index];
  	let tr = $('<tr>');
    tr.append($('<td class="label">').text("Reaction"));
    tr.append($('<td>').text(obj.term));
    tr.append($('<td class="label">').text("Count"));
    tr.append($('<td>').text(obj.count));
    table.append(tr);
  }
}