From da5ec5109e16a1d43597fc28b7395b8a51b1e326 Mon Sep 17 00:00:00 2001 From: samarsajad <142666229+samarsajad@users.noreply.github.com> Date: Mon, 10 Jun 2024 23:42:03 +0530 Subject: [PATCH] added the "medicine use" page --- index.html | 2 +- medicine.css | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++ medicine.html | 145 +++++++++++++++++++++++++++++++++++++++++++++++ medicine.js | 35 ++++++++++++ 4 files changed, 335 insertions(+), 1 deletion(-) create mode 100644 medicine.css create mode 100644 medicine.html create mode 100644 medicine.js diff --git a/index.html b/index.html index f4800566..5d1eee14 100644 --- a/index.html +++ b/index.html @@ -476,7 +476,7 @@

Body temperature

-

Medicine use

+

Medicine use

Know what to use when to use and how to use.

diff --git a/medicine.css b/medicine.css new file mode 100644 index 00000000..d911436e --- /dev/null +++ b/medicine.css @@ -0,0 +1,154 @@ +/* @import url('http://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); */ + +body +{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins',sans-serif; + background-color: rgb(0, 0, 0); + /* min-height: 10vh; */ +} + + + + +.nav_link { + list-style: none; + } + + .nav_link li { + padding: 5px 20px; + display: inline-block; + color: white; + } + + .nav_link li a { + transition: all 0.3s ease 0s; + color: white; + text-decoration: none; + } + + .nav_link li a:hover { + color: #55a5ea; + text-decoration: underline 2.5px rgb(3, 3, 94); + } + + .header_container { + + background-color: #59bcbf51; + opacity: 0.9; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 60px; + margin: auto; + } +.header_container{ + padding: 10px; +} + +main { + padding: 1rem; +} + + +form { + margin-bottom: 1rem; +} + +label { + display: block; + margin-bottom: 0.5rem; +} + +input { + padding: 0.5rem; + margin-bottom: 1rem; + width: 100%; + max-width: 300px; + box-sizing: border-box; + border-radius: 1rem; + margin-left: 500px; +} + +button { + background-color: #55a5ea; + color: white; + padding: 0.5rem; + margin-bottom: 1rem; + width: 50%; + max-width: 60px; + box-sizing: border-box; + border-radius: 1rem; +} + +button:hover { + background-color: #3fbcc051; +} + +#medicine-info { + background-color: #4bb6b7; + padding: 1rem; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} +#medicine-info:hover{ + + background-color: #55a5ea; +} +.footer-wrapper{ + background-color: rgb(11, 17, 72); + padding: 10px 0; +} +.footer-columns { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + +} +.other-columns { + display: flex; + justify-content: space-between; + width: 100%; + max-width: 1200px; + flex-wrap: wrap; +} +.news-letter { + margin-left:500px +} +.subscribe-button { + background-color: #55a5ea; + color: white; + padding: 0.5rem; + margin-bottom: 1rem; + width: 50%; + max-width: 100px; + box-sizing: border-box; + border-radius: 1rem; + margin-left:500px + +} + +.subscribe-button:hover { + background-color: #3fbcc051; +} +.footer-bottom { + background-color: #222; + padding: 20px 0; +} + +.footer-bottom-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.footer-bottom small { + color: #afb6c7; +} diff --git a/medicine.html b/medicine.html new file mode 100644 index 00000000..6363c6f5 --- /dev/null +++ b/medicine.html @@ -0,0 +1,145 @@ + + + + + + Medicine Information Finder + + + +
+
+ +
+ +
+ + + + + +
+

+ Know Your Meds + +

+ + +
+ + + +
+
+ +
+
+ + +
+
+ + + +
+
+ + + diff --git a/medicine.js b/medicine.js new file mode 100644 index 00000000..51ea6617 --- /dev/null +++ b/medicine.js @@ -0,0 +1,35 @@ +document.getElementById('medicine-form').addEventListener('submit', function(event) { + event.preventDefault(); + const medicineName = document.getElementById('medicine-name').value; + fetchMedicineInformation(medicineName); +}); + +async function fetchMedicineInformation(medicineName) { + try { + const response = await fetch(`https://api.fda.gov/drug/label.json?search=openfda.brand_name:${medicineName}`); + const data = await response.json(); + displayMedicineInformation(data); + } catch (error) { + console.error('Error fetching medicine information:', error); + document.getElementById('medicine-info').innerHTML = '

There was an error fetching the medicine information. Please try again later.

'; + } +} + +function displayMedicineInformation(data) { + const medicineInfoSection = document.getElementById('medicine-info'); + medicineInfoSection.innerHTML = ''; + + if (data.results && data.results.length > 0) { + const medicineInfo = data.results[0]; + medicineInfoSection.innerHTML = ` +

${medicineInfo.openfda.brand_name ? medicineInfo.openfda.brand_name[0] : 'No brand name available'}

+

Purpose: ${medicineInfo.purpose ? medicineInfo.purpose.join(', ') : 'No purpose information available'}

+

Warnings: ${medicineInfo.warnings ? medicineInfo.warnings.join('
') : 'No warnings available'}

+

Directions: ${medicineInfo.directions ? medicineInfo.directions.join('
') : 'No directions available'}

+ `; + } else { + medicineInfoSection.innerHTML = '

No information found for the specified medicine.

'; + } +} + +