A community relief tool with the mission of connecting wildfire victims to local volunteers and donors in an effort to strengthen community collaboration and unity.
By filling out a form, the community becomes its own resource.
Our team was presented the challenge of constructing a disaster relief website where people can readily access a resource or tool.
Our site had to present a solution to contribute to relief of the disaster of our choosing. The site has to be functional, including interactive buttons, responsive design, and modals that can open and close upon clicking or tapping.
Our team was selected within a day and we were given only 5 days to complete and present a disaster resource.
No big.
Our site utilized the following tech stack to bring it all together:
- HTML
- CSS
- JavaScript for site functionality
- GitHub for team collaboration
- Canva for Organization's Logo
- VS Code for local repo work and management
This Webpage is deployed to GitHub Pages
- Local Repository Link: https://github.com/droman7/BeCoolAboutWildfires
- Official Deployed Website Link: https://droman7.github.io/BeCoolAboutWildfires/
-
Creating an initial HtML shell with CSS Cards was easy. Connecting them with modals and JS was the first time-consuming hurdle. At first, we focused on what we knew and got the different cards structured for JavaScript whether we used it or not
-
The color scheme was flat without a color variation, so the black-to-orange-to-brown created a simplified flow in the background for the eyes to follow.
-
The header page initially just had the logo in the top-left, but the looping fire in the background was a strong first impression behind a simple header and introductory paragraph.
-
Speaking of the fire video, mp4s are the way to go as long as the user's browser is compatible. MP3s only produced the video's sound on the first couple attempts, and GIFs were too short. Unintentionally, the video goes black by the time the user reads the entire mission statement.
-
Each submission button was either going to take you to a secondary page that shows a registry or notify you that your submission was completed successfully. Due to time constraints, we agreed on the latter.
-
The forms currently allow interested individuals to sign up as a volunteer or person in need through its two separate forms.
-
The forms need to be saved somewhere, so the next phase involves saving the completed forms in a server or registry that people in need can access that shows people who are still available to connect. It should also remove people from the registry once they're connected or their donation has been provided to minimize server space
-
On the horizon after the registry, the site could feature a map or list of available shelters, food distribution centers, water supplies, and other critical services. That would allow victims to connect with both their neighbor and existing community services.