pcos-health-companion

Inspiration

Many women today are living with PCOS, but a lot of them don't know it. They don't recognize the signs, so they never get the right advice or care. Over time this can affect their health in serious ways. Some struggle to get pregnant, and others deal with facial hair, acne, and hair thinning that hurt their confidence and their daily life.

Many women ignore these signs or feel embarrassed to talk about them. With early awareness, a doctor's guidance, and healthy habits, PCOS can be managed much better.

I wanted to build a simple, private tool that helps women notice patterns in their body, learn the basics about PCOS, and take care of their health, without scaring them or pretending to diagnose anything.

What it does

PCOS Health Companion lets users:

• Tick common PCOS-related signs and get a gentle reminder to talk to a doctor
• Log period start dates and see their average cycle length
• Set water and medicine reminders
• Get a general BMI estimate
• Read simple, reliable education about PCOS

The average cycle length is the mean gap between consecutive period start dates:

$$\text{Average cycle} = \frac{1}{n-1}\sum_{i=2}^{n} (d_i - d_{i-1})$$

BMI is calculated as:

$$BMI = \frac{\text{weight (kg)}}{\text{height (m)}^2}$$

Cycles shorter than 21 days or longer than 35 days are flagged as outside the usual range, with a suggestion to talk to a doctor.

The app does not diagnose PCOS. Every result reminds users that only a healthcare professional can do that.

How I built it

I built it with plain HTML, CSS, and JavaScript, with no frameworks.

• Cycle log: period dates are saved with the browser's localStorage, so they stay on the user's device and are never sent to a server.
• Design: a soft pink and purple theme with rounded cards, and an inline SVG illustration in the header.
• Responsive layout: the page adapts to phone screens.
• Reminders: water and medicine reminders use JavaScript timers and browser notifications.
• Privacy: there is no account, no login, and no server, so users' health information stays with them.

Challenges I ran into

• Duplicate code: two copies of the same button handler were overwriting each other, so the safety messages disappeared. I found the duplicates and merged them.
• Reminder bugs: the Stop Medicine button crashed because its timer was never stored. I fixed it by saving the timer in a variable and clearing it correctly.
• Saving data: dates vanished on refresh until I added localStorage. Then I had to block duplicate dates and add a Clear button.
• Reminder limits: browser reminders only work while the page is open, which I learned is a limit of apps without a server.
• Health responsibility: I had to word every message carefully so the app informs and encourages users to see a doctor, without diagnosing or scaring anyone.

What I learned

I learned how to debug my own code step by step, how to save data in the browser, and how to design a health app responsibly, with clear disclaimers and privacy by default. I also learned how important it is to explain health topics in simple, kind language.

What's next

• More reliable reminders on a hosted site
• Symptom and mood tracking over time
• Cycle charts
• Urdu language support

Built With

• css3
• html5
• javascript
• localstorage
• netlify
• svg