Let’s create a lightweight offline app where users can add medication reminders (pill name + time) and get notified on screen. We will use Using HTML5, CSS3, JavaScript & Bootstrap 5.
Tools We’ll Use
- HTML5 – To build the structure
- CSS3 + Bootstrap 5 – For styling and responsive layout
- JavaScript – For logic, localStorage, and reminder checks
- No frameworks, No backend, works 100% offline
Step 1: Setup Basic HTML Structure
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Medication Reminder</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body class="bg-light">
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-md-6">
<h1 class="text-center mb-4">💊 Medication Reminder App</h1>
<form id="reminderForm" class="card p-4 shadow-sm">
<div class="mb-3">
<label for="pillName" class="form-label">Pill Name</label>
<input type="text" class="form-control" id="pillName" required />
</div>
<div class="mb-3">
<label for="pillTime" class="form-label">Reminder Time</label>
<input type="time" class="form-control" id="pillTime" required />
</div>
<button type="submit" class="btn btn-primary">Add Reminder</button>
</form>
<hr class="my-4" />
<h3>⏰ Your Reminders</h3>
<ul id="reminderList" class="list-group mt-3"></ul>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Code language: HTML, XML (xml)Step 2: Style With a Touch of Custom CSS (Optional)
body {
font-family: "Segoe UI", sans-serif;
}
.pill-due {
background-color: #fff3cd;
}
.pill-alert {
animation: shake 0.3s ease infinite alternate;
}
@keyframes shake {
from {
transform: translateX(-2px);
}
to {
transform: translateX(2px);
}
}
Code language: CSS (css)Step 3: JavaScript Logic (app.js)
// Select elements
const form = document.getElementById("reminderForm");
const pillName = document.getElementById("pillName");
const pillTime = document.getElementById("pillTime");
const reminderList = document.getElementById("reminderList");
// Load from localStorage
let reminders = JSON.parse(localStorage.getItem("reminders")) || [];
// Display saved reminders on page load
renderReminders();
// Handle form submit
form.addEventListener("submit", (e) => {
e.preventDefault();
const reminder = {
id: Date.now(),
name: pillName.value,
time: pillTime.value,
triggered: false,
};
reminders.push(reminder);
localStorage.setItem("reminders", JSON.stringify(reminders));
renderReminders();
form.reset();
});
// Render list
function renderReminders() {
reminderList.innerHTML = "";
reminders.forEach((reminder) => {
const li = document.createElement("li");
li.className =
"list-group-item d-flex justify-content-between align-items-center";
li.innerHTML = `
<span><strong>${reminder.name}</strong> - ${reminder.time}</span>
<button class="btn btn-sm btn-danger" onclick="deleteReminder(${reminder.id})">Delete</button>
`;
reminderList.appendChild(li);
});
}
// Delete
function deleteReminder(id) {
reminders = reminders.filter((r) => r.id !== id);
localStorage.setItem("reminders", JSON.stringify(reminders));
renderReminders();
}
// Check every minute for due reminders
setInterval(() => {
const now = new Date();
const currentTime = `${String(now.getHours()).padStart(2, "0")}:${String(
now.getMinutes()
).padStart(2, "0")}`;
reminders.forEach((r) => {
if (r.time === currentTime && !r.triggered) {
alert(`Time to take: ${r.name} 💊`);
r.triggered = true;
localStorage.setItem("reminders", JSON.stringify(reminders));
}
});
}, 60000);
Code language: JavaScript (javascript)Extra Tips
- 🧪 Use
Notification APIfor desktop/browser alerts - 📳 Make it installable as a PWA
- 🔁 Add recurring reminders with checkboxes
- 💾 Export reminders as JSON
Try This Variation
Add a dropdown to categorize pills (Morning, Afternoon, Evening), and display pills grouped by time slot.
Which feature should we add next? Comment below and let’s build it together!
JavaScript: From Zero to Hero
Master modern JavaScript with hands-on projects, ES6+ features, and practical applications for real-world development.
Discover more from Prime Inspire
Subscribe to get the latest posts sent to your email.
