LeafPost

What the users first see when they open LeafPost
Customizable sustainability to-do list that users can edit and complete to unlock games and simulations
Interactive tour, unlocked after 5 environmental tasks are completed. Educates users on parts of the environment
Crossword puzzle, unlocked after 5 enviornmental tasks are completed. Once user guesses correctly, they can click on the word to learn more

Inspiration

By 2030, the worst impacts of climate change will be irreversible. Despite this pressing issue, in a PEW research center survey, only 40% of Americans considered climate change as a serious issue. Additionally, over 75% of Americans wanted to live more sustainably but didn’t know where to start. With many not aware of the importance of environmental conservation, and many others not sure how to help, our team decided to create LeafPost, a platform to help spread awareness about climate change and sustainability, as well as encourage action amongst the public.

What it does

The first thing a user sees on LeafPost is a couple buttons, which allow for cookie-cutter tasks to be added to the user’s list. This is a great place to start if the user doesn’t know what exactly sustainability entails and isn’t sure what tasks they can perform. Beneath this, users can input their own tasks, and designate a category for those tasks from waste, water, and energy conservation. Once users check off 5 or more tasks, they gain access to games and interactive simulations. This makes the website family-friendly! Parents can designate the sustainability tasks they’d like to perform each day, and once they’re done, kids can learn more about why sustainability is important.

How we built it

We used Javascript, HTML, and CSS to code our project. HTML was used to create the structure of the website, Javascript was used to code the function, and CSS was used to code the appearance.

Challenges we ran into

In coding our project, we encountered many hurdles. One such hurdle was in coding our to-do list. We wanted to allow the user to customize their sustainability to-do list and be able to add boxes with their tasks. However, we had trouble making these checkboxes appear. We solved this problem by creating a preset list of 10 checkboxes, but setting them to hidden when the page was loaded. This way, when users added individual tasks, we could code the checkbox to appear with that task. Another hurdle we encountered was in the crossword puzzle. We wanted the image of the crossword puzzle to be clickable, so that when the user clicks on the word on the crossword, a link with corresponding information would open. We solved this issue by using image area maps. With these, we created areas within the image by specifying pixel locations, where once clicked, they could open links. These are 2 of many hurdles we encountered when creating our project.

Accomplishments that we're proud of

We are proud of the overall cohesiveness of our website. Our website includes multiple pages of which are separate but also work well together including our to-do list, tour game, and crossword puzzle.

What we learned

We learned how to use area maps as well as experimented with different HTML user inputs.

What's next for LeafPost

We hope to eventually develop LeafPost into a fully functioning website as well as app. One change we would make in the future is enhancing the styling and the CSS of LeafPost. While the basic functionality of our crossword puzzle, interactive simulation, and to-do lists are represented in our demo, we would like to add animations and more styling elements to make it more visually appealing for users. Additionally, we would like to add more games and simulations in the future as rewards for completing sustainability tasks. Some examples include features which would calculate the user’s individual carbon footprint, connect users to sustainable small businesses, allow users to “walk” through different locations across the globe to see how climate change has impacted them. Finally, we would like to add a social media element to leafpost, where users can post pictures and ideas relating to environmental sustainability to connect with others and encourage each other. Our current prototype demonstrates the underlying ideas and themes of what we would want our project to become.