• 

  The Profile Page

• 

  The Medical Records Section

• 

  The Emergency Passport

• 

  The BMI Calculator

Inspiration

HealthVault was inspired by the need for a simple, secure, and easily accessible way to store essential medical information. People often struggle to keep track of health records, and during emergencies, even small delays can create big risks. This motivated the idea of building a lightweight digital health manager that keeps everything in one place.

What it does

HealthVault helps users manage their personal health information through an intuitive interface. It includes:

A BMI calculator

Profile section with image upload

Medical records area

Emergency passport with blood group, allergies, medications, and emergency contacts

The BMI feature uses the formula:

BMI

Weight (kg) ( Height (m) ) 2 BMI= (Height (m)) 2 Weight (kg) ​

How we built it

HealthVault is built using HTML, CSS, and JavaScript. JavaScript controls section switching, calculates BMI, previews uploaded images, and handles temporary data saving. CSS was used to create a clean, responsive UI with a loader animation to give an app-like experience.

Challenges we ran into

Some challenges included making the navigation smooth without a backend, handling live image previews using the FileReader API, ensuring responsive layouts, and managing user data using only frontend logic.

Accomplishments that we're proud of

We built a clean, functional health management tool entirely on the frontend. The emergency passport works smoothly, the BMI calculator is accurate, and the UI feels modern and polished—all without any frameworks.

What we learned

We learned how to structure a single-page interface, handle file uploads in JavaScript, improve UI/UX design, write modular scripts, and use LaTeX in documentation. Most importantly, we learned to design with user needs in mind, especially in a sensitive domain like healthcare.

What's next for HealthVault

Future updates may include backend integration, secure authentication, cloud storage, health reminders, charts for tracking health trends, and improved emergency features. We also plan to add AI-based suggestions later to enhance user health insights.

Built With

• css3
• html5
• javascript
• localstorage
• vscode