WaveDefense

WaveDefense is your flood survival guide covering essential safety measures to protect yourself and your family, plus Google Maps integration to find and navigate safe routes in real time.

Comment

WaveDefense 🌊 — Flood Safety Website

Inspiration

Floods are one of the deadliest natural disasters in the world. I wanted to build something that could actually help people know what to do before, during, and after a flood.

What it does

WaveDefense is a flood safety website that guides people on what to do before, during, and after a flood. It includes:

  • Step-by-step safety tips for all 3 flood phases.
  • An emergency kit checklist.
  • Google Maps integration to locate any area quickly.

How we built it

I built it with HTML and CSS from scratch. Tool used

  • HTML : page structure and content
  • CSS : colors, layout, and design
  • JavaScript :interactive tabs, report form, and map integration
  • Google Maps : location search feature
  • VS Code : code editor
  • Google Fonts : Bebas Neue and DM Sans typography

Challenges we ran into

  • Fixing JavaScript bugs in the report submission feature.
  • Making the design look clean and professional.
  • Planning the theme and colors.

Accomplishments that we're proud of

I am most proud of the fact that this was built completely from scratch. Some of the feature I am especially proud of are: The design Emergency kit list Google maps integration, where people type any city or location and it opens it in google maps.

What we learned

  • How to integrate Google Maps into a webpage.
  • How to design a clean, user-friendly layout with a proper color theme.
  • The precautions to take during flood situation.

Built With

Share this project:

Updates