Skip to content

Commit

Permalink
added the "medicine use" page
Browse files Browse the repository at this point in the history
  • Loading branch information
@samarsajad
samarsajad committed Jun 10, 2024
1 parent a7857d8 commit da5ec51
Show file tree
Hide file tree
Showing 4 changed files with 335 additions and 1 deletion.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -476,7 +476,7 @@ <h4 class="title"><a href="">Body temperature</a></h4>
<div class="col-md-6 col-lg-3 d-flex align-items-stretch mb-5 mb-lg-0">
<div class="icon-box" data-aos="fade-up" data-aos-delay="200">
<div class="icon4"><i class="fas fa-hand-holding-medical"></i></div>
<h4 class="title"><a href="">Medicine use</a></h4>
<h4 class="title"><a href="medicine.html">Medicine use</a></h4>
<p class="description">Know what to use when to use and how to use.
</p>
</div>
Expand Down
154 changes: 154 additions & 0 deletions medicine.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
145 changes: 145 additions & 0 deletions medicine.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Medicine Information Finder</title>
<link rel="stylesheet" href="medicine.css">
</head>
<body>
<header class="header_container">
<div class="img">
<img id="rd-logo" style="width: 90px; height: auto;" src="/images/rd.png">
</div>

</div>
<nav class="nav_menu">

<ul class="nav_link">
<li><a href="index.html">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="Html-Files/news.html">News</a></li>
<li><a href="Html-Files/news.html">Service</a></li>
<li><a href="login.html">Sign in/Sign-up</a></li>
<li><a href="#patient-portal">patient Portal</a></li>
<li><a href="#doctors">Doctor</a></li>
<li><a href="Html-Files/contact.html">Contact us</a></li>

</ul>
</nav>
</div>
</header>


<main>
<h1 style="font-size: 65px; color:white; display: flex; align-items: center;">
Know Your&nbsp;<span style="color: #55a5ea;">Meds</span>
<img class="sec-img" src="images/rd.png" alt="" style="margin-left: 10px; height: 7em;">
</h1>


<form id="medicine-form">
<label for="medicine-name"></label>
<input type="text" placeholder="Enter Medicine Name" id="medicine-name" name="medicine-name" required>
<button type="submit">Search</button>
</form>
<section id="medicine-info">
<!-- Medicine information will be displayed here -->
</section>
</main>
<footer>
<div class="footer-wrapper">
<div class="footer-columns">
<div class="other-columns">
<section>
<h4>Quick Links</h4><br>
<ul class="links">
<li><a href="./index.html">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="./Html-Files/contact.html">Contact Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#doctors">Doctors</a></li>
<li><a href="./faq.html">FAQ</a></li>
</ul>
</section>
<section>
<h4>Explore</h4><br>
<ul class="links">
<li><a href="#">Appointment</a></li>
<li><a href="#">Patient Portal</a></li>
<li><a href="#">Login account</a></li>
<li><a href="#">Helplines</a></li>
<li><a href="#">Location</a></li>
</ul>
</section>
<section>
<h4>Legal</h4><br>
<ul class="links">
<li><a href="#">Customer Agreement</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">GDPR</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</section>
<section class="footer-col">
<h4>RAPIDOC Newsletter</h4><br>
<p>Subscribe to our newsletter for a weekly dose</p>
<p> of news, updates, helpful tips, and</p>
<p> exclusive offers.</p>


</section>

</div>
<div class = "news-letter">
<form action="#">
<input type="text" placeholder="Your email" required>
<button type="submit" class="subscribe-button">SUBSCRIBE</button>
</form>
</div>



</div>
</div>
</div>
<div class="footer-bottom">
<div class="footer-bottom-wrapper">
<small>© <span id="year"></span><span> RapiDoc</span>&nbsp;| All Rights
Reserved Made with ❤️ by RapiDoc</small>
<style>
.social-wrapper a div i {
color: #afb6c7;
}
.social-wrapper a div i:hover {
color: #fff;
}
</style>
<div class="social-wrapper">
<div class="social-links">
<div style="margin-left: 100px;font-family: sans-serif;"><i>Follow&nbsp;Us&nbsp;:&nbsp;</i></div>
<a href="https://www.facebook.com/" target="_blank"><div><i class="fa-brands fa-facebook-f"></i></div></a>
<a href="https://www.twitter.com" target="_blank"><div><i class="fa-brands fa-twitter"></i></div></a>
<a href="https://www.linkedin.com" target="_blank"><div><i class="fa-brands fa-linkedin"></i></div></a>
<a href="https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-" target="_blank"><div><i class="fa-brands fa-github"></i></div></a>
<a href="+91 1234567890" title="+91 1234567890" target="_blank"><div><i class="fa-solid fa-phone"></i></div></a>
<a href="[email protected]" target="_blank"><div><i class="fa-solid fa-envelope"></i></div></a>
</div>
</div>
</div>
</div>
</footer>

<div id="back-to-top-container">
<div class="circle">
<svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z" />
</svg>
</div>
</div>
<script src="medicine.js"></script>
</body>
</html>
35 changes: 35 additions & 0 deletions medicine.js
View file
Original file line number Diff line number Diff line change
@@ -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 = '<p>There was an error fetching the medicine information. Please try again later.</p>';
}
}

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 = `
<h2>${medicineInfo.openfda.brand_name ? medicineInfo.openfda.brand_name[0] : 'No brand name available'}</h2>
<p><strong>Purpose:</strong> ${medicineInfo.purpose ? medicineInfo.purpose.join(', ') : 'No purpose information available'}</p>
<p><strong>Warnings:</strong> ${medicineInfo.warnings ? medicineInfo.warnings.join('<br>') : 'No warnings available'}</p>
<p><strong>Directions:</strong> ${medicineInfo.directions ? medicineInfo.directions.join('<br>') : 'No directions available'}</p>
`;
} else {
medicineInfoSection.innerHTML = '<p>No information found for the specified medicine.</p>';
}
}


0 comments on commit da5ec51

Please sign in to comment.