Emergency Contact Web App

About

Emergency Contact Web App is a lightweight, mobile‑first tool (HTML, CSS, Vanilla JS) that stores emergency contacts and medical info locally so users can call or show critical details instantly even offline.

Inspiration

I built this because I noticed a simple but urgent problem: when people panic, they often can't find the right contact or medical detail quickly. Phones are full of apps and menus; in an emergency every-second counts. The idea was to create a single, focused interface that:

• surfaces priority contacts with one tap,
• stores medical information that first responders can read immediately,
• works offline and is installable as a PWA,
• and is accessible and easy to use under stress. This project is about reducing friction at the moment it matters most.

What I learned

• Practical localStorage patterns and safe import/merge logic.
• PWA basics (manifest + service worker) and offline UX.
• Accessibility: focus management, keyboard navigation, larger tap targets.

- How small UI details (contrast, instant theme switch) materially improve usability.

How I built it

• Structure: index.html, css/style.css, js/{storage,ui,app}.js, locales/ for translations.
• Features: add/edit/delete contacts, priority contact, one‑tap tel: call, medical info, search/filter, dark mode, export/import JSON with preview modal, PWA install.

- Modular JS keeps logic testable and maintainable.

Challenges (and fixes)

• Dark mode readability: adjusted dark theme variables for higher contrast.
• Theme switching speed: disabled global body transition so theme toggles instantly.
• Import safety: validate structure, generate missing IDs, preview before Merge/Replace.
• Modal accessibility: implemented focus trap and Escape handling.

Built With

• accessibility
• css3
• git
• github
• html5
• javascript
• localstorage
• netlify
• pwa