abot230/drop-sheet.markdown

## drop-sheet.markdown

      
    Raw
  

              drop-sheet.markdown
            
          
    Drop Sheet

A Pen by Adam on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Eye Drop List Generator</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Eye Drop List Generator</h1>

  <div class="button-columns">
    <div>
      <h3>Glaucoma Drops</h3>
      <button class="med-btn">Latanoprost (Xalatan)</button>
      <button class="med-btn">Bimaptoprost (Lumigan)</button>
      <button class="med-btn">Dorzolamide-timolol (Cosopt)</button>
      <button class="med-btn">Brimonidine-timolol (Combigan)</button>
      <button class="med-btn">Rocklatan</button>
      <button class="med-btn">Rhopressa</button>
      <button class="med-btn">Brimonidine</button>
      <button class="med-btn">Dorzolamide</button>
    </div>
    <div>
      <h3>Post Op Drops</h3>
      <button class="med-btn">Prednisolone</button>
      <button class="med-btn">OMNI (Yellow drops)</button>
      <button class="med-btn">Ofloxacin</button>
      <button class="med-btn">Moxifloxacin</button>
      <button class="med-btn">Bromfenac</button>
      <button class="med-btn">Ketorolac</button>
    </div>
    <div>
      <h3>Dry Eye Drops</h3>
      <button class="med-btn">Artificial tear</button>
      <button class="med-btn">Artificial tear ointment</button>
      <button class="med-btn">Restasis</button>
      <button class="med-btn">Ziidra</button>
      <button class="med-btn">Cequa</button>
      <button class="med-btn">Meibo</button>
      <button class="med-btn">Vevye</button>
    </div>
  </div>

 <div class="selectors">
  <div class="selector-group">
    <label>Eye:</label>
    <div class="selector-buttons">
      <button class="eye-btn" data-eye="Right">Right</button>
      <button class="eye-btn" data-eye="Left">Left</button>
      <button class="eye-btn" data-eye="Both">Both</button>
    </div>
  </div>

  <div class="selector-group">
    <label>Frequency:</label>
    <div class="selector-buttons">
      <button class="freq-btn">Once a day</button>
      <button class="freq-btn">Twice a day</button>
      <button class="freq-btn">Three times a day</button>
      <button class="freq-btn">Four times a day</button>
    </div>
  </div>
</div>

    <button id="add-btn">Add to List</button>
  </div>

  <div class="print-section">
    <table id="drop-list">
      <thead>
        <tr>
          <th>Drop Name</th>
          <th>Right Eye</th>
          <th>Left Eye</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <button onclick="window.print()">Print</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

## script.js
let selectedMed = "";
let selectedEye = "";
let selectedFreq = "";

// Reset highlights
function resetSelection(group) {
  group.forEach(btn => btn.classList.remove("selected"));
}

// Medication buttons
const medBtns = document.querySelectorAll(".med-btn");
medBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    resetSelection(medBtns);
    btn.classList.add("selected");
    selectedMed = btn.textContent;
  });
});

// Eye buttons
const eyeBtns = document.querySelectorAll(".eye-btn");
eyeBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    resetSelection(eyeBtns);
    btn.classList.add("selected");
    selectedEye = btn.dataset.eye;
  });
});

// Frequency buttons
const freqBtns = document.querySelectorAll(".freq-btn");
freqBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    resetSelection(freqBtns);
    btn.classList.add("selected");
    selectedFreq = btn.textContent;
  });
});

document.getElementById("add-btn").addEventListener("click", () => {
  if (!selectedMed || !selectedEye || !selectedFreq) {
    alert("Please select a drop, eye, and frequency.");
    return;
  }

  const tbody = document.querySelector("#drop-list tbody");
  const tr = document.createElement("tr");

  const tdName = document.createElement("td");
  tdName.contentEditable = true;
  tdName.textContent = selectedMed;

  const tdRight = document.createElement("td");
  tdRight.contentEditable = true;
  tdRight.textContent = (selectedEye === "Right" || selectedEye === "Both") ? selectedFreq : "";

  const tdLeft = document.createElement("td");
  tdLeft.contentEditable = true;
  tdLeft.textContent = (selectedEye === "Left" || selectedEye === "Both") ? selectedFreq : "";

  tr.appendChild(tdName);
  tr.appendChild(tdRight);
  tr.appendChild(tdLeft);

  tbody.appendChild(tr);

  // Clear selections
  selectedMed = "";
  selectedEye = "";
  selectedFreq = "";
  resetSelection(medBtns);
  resetSelection(eyeBtns);
  resetSelection(freqBtns);
});

## style.css
body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

.button-columns {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.button-columns div {
  flex: 1;
  margin: 0 10px;
}

h3 {
  text-align: center;
}

.med-btn,
.eye-btn,
.freq-btn {
  display: block;
  margin: 5px auto;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}

.selected {
  background-color: #007BFF;
  color: white;
  border: 2px solid #0056b3;
}

.selectors {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.selector-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.selector-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 5px;
}

#print-section {
  margin-top: 20px;
}

#print-section table {
  width: 100%;
  border-collapse: collapse;
  font-size: 24px;
  text-align: center;
}

#print-section th,
#print-section td {
  border: 2px solid black;
  padding: 10px;
}

@media print {
  body {
    zoom: 100%;
  }

  .button-columns,
  .selectors,
  button,
  h3 {
    display: none !important;
  }

  #drop-list {
    font-size: 25px;
  }

  #drop-list th,
  #drop-list td {
    border: 2px solid black;
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Eye Drop List Generator</title>
	<link rel="stylesheet" href="styles.css" />
	</head>
	<body>
	<h1>Eye Drop List Generator</h1>

	<div class="button-columns">
	<div>
	<h3>Glaucoma Drops</h3>
	<button class="med-btn">Latanoprost (Xalatan)</button>
	<button class="med-btn">Bimaptoprost (Lumigan)</button>
	<button class="med-btn">Dorzolamide-timolol (Cosopt)</button>
	<button class="med-btn">Brimonidine-timolol (Combigan)</button>
	<button class="med-btn">Rocklatan</button>
	<button class="med-btn">Rhopressa</button>
	<button class="med-btn">Brimonidine</button>
	<button class="med-btn">Dorzolamide</button>
	</div>
	<div>
	<h3>Post Op Drops</h3>
	<button class="med-btn">Prednisolone</button>
	<button class="med-btn">OMNI (Yellow drops)</button>
	<button class="med-btn">Ofloxacin</button>
	<button class="med-btn">Moxifloxacin</button>
	<button class="med-btn">Bromfenac</button>
	<button class="med-btn">Ketorolac</button>
	</div>
	<div>
	<h3>Dry Eye Drops</h3>
	<button class="med-btn">Artificial tear</button>
	<button class="med-btn">Artificial tear ointment</button>
	<button class="med-btn">Restasis</button>
	<button class="med-btn">Ziidra</button>
	<button class="med-btn">Cequa</button>
	<button class="med-btn">Meibo</button>
	<button class="med-btn">Vevye</button>
	</div>
	</div>

	<div class="selectors">
	<div class="selector-group">
	<label>Eye:</label>
	<div class="selector-buttons">
	<button class="eye-btn" data-eye="Right">Right</button>
	<button class="eye-btn" data-eye="Left">Left</button>
	<button class="eye-btn" data-eye="Both">Both</button>
	</div>
	</div>

	<div class="selector-group">
	<label>Frequency:</label>
	<div class="selector-buttons">
	<button class="freq-btn">Once a day</button>
	<button class="freq-btn">Twice a day</button>
	<button class="freq-btn">Three times a day</button>
	<button class="freq-btn">Four times a day</button>
	</div>
	</div>
	</div>

	<button id="add-btn">Add to List</button>
	</div>

	<div class="print-section">
	<table id="drop-list">
	<thead>
	<tr>
	<th>Drop Name</th>
	<th>Right Eye</th>
	<th>Left Eye</th>
	</tr>
	</thead>
	<tbody></tbody>
	</table>
	<button onclick="window.print()">Print</button>
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	let selectedMed = "";
	let selectedEye = "";
	let selectedFreq = "";

	// Reset highlights
	function resetSelection(group) {
	group.forEach(btn => btn.classList.remove("selected"));
	}

	// Medication buttons
	const medBtns = document.querySelectorAll(".med-btn");
	medBtns.forEach(btn => {
	btn.addEventListener("click", () => {
	resetSelection(medBtns);
	btn.classList.add("selected");
	selectedMed = btn.textContent;
	});
	});

	// Eye buttons
	const eyeBtns = document.querySelectorAll(".eye-btn");
	eyeBtns.forEach(btn => {
	btn.addEventListener("click", () => {
	resetSelection(eyeBtns);
	btn.classList.add("selected");
	selectedEye = btn.dataset.eye;
	});
	});

	// Frequency buttons
	const freqBtns = document.querySelectorAll(".freq-btn");
	freqBtns.forEach(btn => {
	btn.addEventListener("click", () => {
	resetSelection(freqBtns);
	btn.classList.add("selected");
	selectedFreq = btn.textContent;
	});
	});

	document.getElementById("add-btn").addEventListener("click", () => {
	if (!selectedMed \|\| !selectedEye \|\| !selectedFreq) {
	alert("Please select a drop, eye, and frequency.");
	return;
	}

	const tbody = document.querySelector("#drop-list tbody");
	const tr = document.createElement("tr");

	const tdName = document.createElement("td");
	tdName.contentEditable = true;
	tdName.textContent = selectedMed;

	const tdRight = document.createElement("td");
	tdRight.contentEditable = true;
	tdRight.textContent = (selectedEye === "Right" \|\| selectedEye === "Both") ? selectedFreq : "";

	const tdLeft = document.createElement("td");
	tdLeft.contentEditable = true;
	tdLeft.textContent = (selectedEye === "Left" \|\| selectedEye === "Both") ? selectedFreq : "";

	tr.appendChild(tdName);
	tr.appendChild(tdRight);
	tr.appendChild(tdLeft);

	tbody.appendChild(tr);

	// Clear selections
	selectedMed = "";
	selectedEye = "";
	selectedFreq = "";
	resetSelection(medBtns);
	resetSelection(eyeBtns);
	resetSelection(freqBtns);
	});
	body {
	font-family: Arial, sans-serif;
	padding: 20px;
	}

	.button-columns {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	}

	.button-columns div {
	flex: 1;
	margin: 0 10px;
	}

	h3 {
	text-align: center;
	}

	.med-btn,
	.eye-btn,
	.freq-btn {
	display: block;
	margin: 5px auto;
	padding: 5px 10px;
	font-size: 14px;
	cursor: pointer;
	}

	.selected {
	background-color: #007BFF;
	color: white;
	border: 2px solid #0056b3;
	}

	.selectors {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	}
	.selector-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 20px;
	}
	.selector-buttons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 5px;
	}

	#print-section {
	margin-top: 20px;
	}

	#print-section table {
	width: 100%;
	border-collapse: collapse;
	font-size: 24px;
	text-align: center;
	}

	#print-section th,
	#print-section td {
	border: 2px solid black;
	padding: 10px;
	}

	@media print {
	body {
	zoom: 100%;
	}

	.button-columns,
	.selectors,
	button,
	h3 {
	display: none !important;
	}

	#drop-list {
	font-size: 25px;
	}

	#drop-list th,
	#drop-list td {
	border: 2px solid black;
	}
	}