Inspiration
Ever stop and consider the water many of us have access to every single day? Can you quantify how much you use and for what reasons? Every drop that passes through our drains is no longer part of the usable, accessible water that humans use. Wasting water may not remove it completely from the global water cycle but it wastes water that could be used for other humans. The intention of our website is to demonstrate the potential for excessive water consumption through inefficient sink usage, and to promote environmental sustainability through doing so.
What it does
The website has a calibration feature that calculates the rate of water from the user’s household sink. Then the user is able to use another timer to keep track of the amount of time that they use their device. From that, the website tells the user how much water they have consumed.
How we built it
BackEnd: We used JavaScript to complete the relevant calculations and produce the results. Two timer functions were utilized - the initial timer function is used to determine the rate at which the user’s sink consumes water, accounting for the various water pressures for different users’ sinks. The second timer is used by the user to time their sink usage, and proceeds to use this to determine the water consumption.
(Aneekah) FrontEnd: First, we used Figma to wireframe and to generate starter CSS code. Simultaneously, we worked on HTML files to develop the elements of the project.
Challenges we ran into
FrontEnd: The CSS started code was messy and redundant. We sifted through each of the lines to make the website flow smoother. Further, we had to make changes to certain tags to make the website responsive to changes in size of the browser so that the website could be used on a mobile device.
BackEnd: We significantly underestimated the amount of time coding/debugging the timer functions would take, along with unexpected errors related to JavaScript Modules and local testing. Since the primary backend programmer has experience in C++ and object oriented programming, they attempted to utilize modular design in Javascript files but unexpected errors related to authorization and hosting resulted in the reorganization of the Javascript code into one file, limiting time to explore other functionality options.
Accomplishments that we're proud of
- The transition of the GIF beginning to play, once the start button is clicked.
What we learned
On the FrontEnd, we walked away with more skills of understanding HTML/CSS and how to debug it using the inspect element.
On the BackEnd, a much deeper understanding of the interactions between HTML, CSS, and JavaScript was obtained, along with general increase in programming confidence utilizing JavaScript and collaborating on a public Github repository.
What's next for Water Waste
There were multiple features we wanted to build out including keeping track of water consumption over time to create a point system to encourage efficient sink usage, keeping track of multiple different sinks with different water consumption rates, and providing facts about the amount of water that was used/saved on average, etc by collecting data from relevant APIs. With more time, we would have implemented those features!
Log in or sign up for Devpost to join the conversation.