GoodLife

Your one-stop center for finding movements that matter to you with a compilation of reliable organizations that you can trust and support with your donations!

Comment 11

Inspiration

Because of the corona virus, we've all had a lot of extra time on our hands. Looking to be productive and make an impact, we researched a variety of different movements happening in our own communities.

Within our hacking group, we have members who are passionate about climate change, healthcare, and racial equality. We all agreed that these are important challenges that deserve more attention. But how do we, as students, support movements focused on these issues?

We realized that finding reliable sources and organizations can be really difficult for virtually any cause a person might be interested. So, we decided to build a service that would combat this problem.

What it does

GoodLife is a website service that provides users with the unique opportunity to find organizations related to causes that they are passionate about, or discover more topics that they would be interested in supporting.

The GoodLife website is made up of five different web pages: Home, About, Donate, Contact Us, and Register.

1) Home

Our homepage provides an easy-to-use navigation bar to the other pages in our website so that the user can toggle between our different webpages.

2) About

Our about page contains our mission statement along with a list of the core values we fight for at GoodLife. The page also has a written portion called "Your Actions Have Power" which describes some of the most current and up-to-date social problems across the world today.

Finally, we have an automatic image slideshow of pictures representing some of the information in the "Facts to get you motivated" section. These components are also related to the modern issues discussed in "Your Actions Have Power."

3) Donate

The Donate page is the main feature of the GoodLife website. This is where the user can find links to relevant movements about issues they want to support.

To navigate the Donate page, we created an image menu with labelled symbols representing Animal Cruelty, Climate Change, Global Poverty, Human Rights, and Health. Clicking on a symbol will automatically bring the user to that section of the webpage.

For each of the categories in the image menu, we provide a list of related organizations that accept donations along with a quick description of what the organization specializes in. The user can also visit any of the listed organizations to make a donation by clicking the "Donate Now" button.

This page is also color coded with each color representing a different cause category.

4) Contact Us

The contact us page gives the user the option to send a message to the GoodLife team. They simply need to input their name, email, and the message they want to send.

To send a message, hit "send" and you will receive an automatic alert from the browser letting you know if the message was submitted successfully. Hitting "close" will bring you back to the homepage.

5) Register

Finally, our website offers a registration service for users who want to register an account with GoodLife. To create their accounts, users will need to provide a name, email, and password.

To submit your details and register, hit "submit" and you will receive an automatic alert from the browser letting you know if you were registered successfully. Hitting "close" will bring you back to the homepage.

In the future, we hope to further develop our project by giving registered accounts additional perks on our website! Registered accounts in the future might also receive emails about donation or volunteer opportunities for their favorite organizations.

How I built it

For the majority of the hackathon, we used repl.it and VSCode to collaborate on different webpages using HTML, CSS, and JavaScript. After compiling different parts of the website together on VSCode, we made a few more changes in Notepad++ before finalizing everything.

The logo was created in Scratch through vector mode and all other images were created or edited in the pixlr editor.

Challenges I ran into

We overcame a lot of different technical and non technical challenges in this hackathon.

Initially, one of the first challenges we faced was coordinating meetings so we could discuss ideas and assign tasks. The majority of our group was located in India (IST) while only one member was located in the Western United States (PST). Because of this, setting up meetings was difficult because of the very different time zones.

We were able to overcome this problem by meeting early in the morning or late at night during times that worked for everyone. It was really fun to work with the team and we learned a lot about one another through are shared passions for computer science!

A second challenge we faced was combining individual webpages together and maintaining the same styling effects. Some of our webpages were created in different projects and IDEs, so they had their own separate CSS page with different style definitions for key elements like headers, paragraph styles, etc.

We overcame this issue by creating classes and eventually combining all CSS pages into a single CSS file.

Accomplishments that I'm proud of

We are proud of the front-end and UI/UX design! We feel like our color palette is very consistent and helps tie the whole website together! Overall, the website is visually appealing, works as designed, and it's easy to use and understand for both new and returning users.

We are really happy with the way our website turns out and we are also proud to have created a project that serves a purpose and solves an important problem. GoodLife is something that we have already started using ourselves to help each other find trustworthy organizations.

What I learned

We learned a lot about managing our time and how to work effectively in a group even in very different time zones.

Programming wise, we learned a lot from each other! We all had different levels of skill and experience and every one learned a few new commands and tricks for making good, smooth websites. In particular, we learned about CSS shorthand for various styling elements like margins or borders.

What's next for GoodLife

We want to keep updating the About page to make sure information is up-to-date on the latest movements!

And, as stated before, we hope to further develop our project by giving registered accounts additional perks on our website! Registered accounts in the future might also receive emails about donation or volunteer opportunities for their favorite organizations.

------- GoodLife, changing the world a dollar at a time. -------

+ 27 more
Share this project:

Updates