ChatHaitiWeather

Inspiration

For this project, we were inspired by weather websites and social media apps such as Snapchat of Instagram.

What it does

The user uses and interactive map to select a region in Haiti. Then, today's temperature and the next six days are displayed. It shows reviews from other users about how likely they think a natural disaster is, however currently no user inputs are save and fake responses are shown.

How we built it

The project was made using HTML, CSS, and javascript. It was our first time making something that was more than just paragraphs and we used libraries like leaflet.js to help with the interactive map and turf.js to help with some geometry of the polygons of each regions.

Challenges we ran into

We did not have much experience with HTML or CSS, so we struggled with many things. The main thing we struggled with was web design: putting the components together in a way that was pleasing to us. The hardest thing to do that impacted the web design was formatting, especially centering and aligning text. We also struggled with outputting the weather, specifically the temperature and the weather conditions (cloudy, rainy, etc.).

Accomplishments that we're proud of

We were able to persevere through these challenges, and create a decent looking website. We first got the title working, then the map, then the weather, and finally the user input, and the rating system. The map was the coolest to us because we had only made webpages with paragraphs of text

What we learned

This experience was very enlightening, and it taught us a lot about web design, HTML and CSS syntax, and how to collaborate effectively. We also learns how to access and api with javascript and plan out ideas and layouts rather than jumping in.

What's next for ChatHaitiWeather

If we continue, we would add a database to hold ratings and reviews. We would an want an algorithm to mark how likely a disaster is. Another thing would be adding points on the map to show nearby shelters.

Also thank you Hack4Haiti team for making our first hackathon extremely fun and educational.

Built With

• css
• gadm
• github
• html
• javascript
• leaflet.js
• open-meteo
• turf