Nowadays, millions of people across the globe suffer from mental illness, yet the majority of them don't know how to deal with these conditions. Mental health is very significant at every stage of life, from early childhood until old age. Not only does it affect our mindset, but it also increases the risk of other types of illnesses. Furthermore, many people lack the resources to help themselves or others who are struggling with mental illness. Therefore, we decided to create OurMentalHealth, a website that aims to reach more people about the importance of mental health, advocate for those in need, and help provide resources for mental health. With this website, we would like to help break down the stigma surrounding mental illness and remind people who suffer from mental health that they are not struggling alone.

What it does

This website is designed and coded to inform people who do not know much about Mental Health and those who are suffering from mental health. It offers resources, tips, and tools to help people that have Mental Illnesses or those that would like to help others overcome it. We have many features on our page that people can use to learn about or help with their mental state. For example, we have a quiz section, which allows people to test their knowledge of mental health. We also provide videos and podcasts that include speakers talking about their mental health experience and how they were able to combat it. Additionally, the website also comes with a Draw Journal, where the users are able to express their feelings through writing and drawing it. The Take Action page on our website reminds users of the actions people can take, including what they can do for themselves and others, the symptoms of mental health, educational resources, and where they can donate for this cause.

How we built it

We first used Google Jamboard to design the wireframe of our design, including how we wanted our website to be structured, the color scheme, and the images we wanted to use. Then, we created a shared Replit, which is an online IDE, using the programming languages HTML, CSS, and Javascript. Our goal was to transform our designs into lines of code and syntax to create an interactive, and accessible website that would reach, educate, and help those who suffer or those eager to learn more about mental health. HTML was used to structure and layout our entire website. We focussed on structuring the layout of the website before incorporating our designs. After creating our HTML tabs, we moved onto CSS and worked on making our website accessible, thematic, and colorful. Lastly, we implemented the programming language, Javascript, onto our website. The three key elements of our website that make it interactive are the fact generator, canvas drawing board, and quiz. Through Javascript, we were able to create functional activities for our website.

Challenges we ran into

Throughout the three days of working on our project, we learned many coding skills, but also encountered numerous challenges.

One challenge we faced was debugging our Quiz in Javascript. After coding the variables and function and giving each div an id or class, we realized that our quiz was not giving an output of the result. The buttons functioned perfectly but our addEventListener couldn't be identified or debugged. We looked through our syntax and rewrote numerous times, trying to find out what could have been wrong. Eventually, after spending hours debugging this issue, we decided to ask our mentors for help. After numerous trials and errors, inspecting our website, and running our program, we realized that the error was how we mistakenly defined the id attribute for 'result' differently in the HTML and Javascript files. It was surprising to us that we initially thought it was an issue with our lack of experience in Javascript, but it turned out to be a careless mistake. This was a fulfilling experience that allowed us to learn that we must be extremely careful and aware of mistakes when coding.

Another challenge we faced was the difference in the time zones of our teammates. Having teammates from across the world with different time zones, it was extremely difficult for our team to create a schedule that would work best for all of us. For our team, someone's bedtime is when others wake up, and this restrains the time period we can meet up and discuss our ideas on the website. It was challenging because we couldn't code at the same time while discussing with one another. However, we were able to come up with a solution where each teammate is assigned a web page to work on as their primary goal and have other people leave feedback in our chat. This way, we can all work asynchronously depending on our available times while getting the feedback needed to improve our website. This also worked effectively because everyone was able to complete and improve their website, as well as participating in coding the fun activities, for example the Drawing Journal and Quiz, together as a team.

Accomplishments that we're proud of

As beginners in programming, our knowledge of programming languages (HTML, CSS, and Javascript) was very limited. We were surprised when our website turned out looking amazing, interactive, and accessible. Being able to help others and educate them about social issues is a wonderful opportunity that we never thought we could do. So, executing this idea and making it real, made us more proud of the website. We came across many challenges and had the ability to fix them, even when it took hours. We were able to successfully create the drawing board and the quiz which was the hardest thing for us to do. Aside from the coding, and debugging accomplishments, this truly was an experience we could never forget. The accomplishments of learning new things and being able to work as a team without too many conflicts helped us enhance our skills in not only programming but communication and teamwork. We are all satisfied and proud of what we were able to accomplish in 2 days!

What we learned

TecHacks is the first hackathon that we've all participated in, where most of us only have the basic knowledge of HTML, CSS, and Javascript. We were able to experience the opportunity of creating a project outside of our comfort zone and meeting people from around the world. Most of us worked alone on coding projects before TecHacks; however, after this three-day experience, we've all learned new skills of collaborating as a team, leading with each other, and taking action for social issues that we believe in. We were able to interact with each other through having common interests, sharing ideas, and communicating to create a website about an issue that we are deeply passionate about. Due to the impacts of COVID-19, we never had the opportunity to attend in-person hackathons nor see other people for over a year, hence why we joined this hackathon. As a result, our endless three days of coding, talking, and having fun allowed most of us to realize that we are passionate about coding and how coding can have a significant impact on the world. In addition to the ability to communicate with people (online) who have similar interests as us, we were able to help each other deepen and grow our knowledge in coding. Though we were all familiar with HTML, CSS, and Javascript, we struggled in different areas of programming languages. But, this allowed us to share our knowledge with each other and help each other learn new syntax, functions, and elements. We learned about containers, canvas, iframe, and implemented these new features onto our website to make it interactive.

What's next for OurMentalHealth

We got a lot done, but of course, there is always more that we could incorporate into the website. In the future, we would like to add more resources on OurMentalHealth and deepen our knowledge on mental health. We aren’t experts in psychology or mental health but we’ve all experienced it because it’s a common issue, which is also why we want to advocate for those who suffer from mental illnesses and educate those who are unaware of what to do in a crisis. In addition, we want to improve on the drawing board and add more features such as the eraser tool and shapes. We also want to incorporate a mental health-related game on our website, where it allows users to understand more about mental health issues. It would also be wonderful to create a group chat feature where people can share their personal experiences in mental health. It will remind people who suffer from mental illness to stay strong and that they are not struggling alone.

Built With

Share this project: