The inspiration for the site came from the lack of active and open mental health resources and information we readily have access to or know about. The name "Rainbow Spirit" comes from rainbows being a symbol of hope and positivity tied in with our goal to uplift people's spirits on our website.

What It Does

Rainbow Spirit is a website that helps users to strive for good mental health with its informative and relaxing features. All of our features and details are there to ensure that the user feels calm and comfortable while using our website.

Relaxation Room On the relaxation room page (second page), we have a cozy station that helps with studying and working on your daily chores. We wanted to aim for a very comfy and cute cafe vibe to help the user feel relaxed. The Lofi station offers a coffee shop playlist and it's the music that is playing in the background. The Pomodoro clock is an additive to help people study, keep track of time, and be more productive. We also have a customizable and functional to-do list. It allows the user to add, remove, and checkmark things from their list.

Color Psychology On the color psychology page (third page), the user can learn about the concept of color psychology and how specific colors can affect you, based on what each color promotes, what it is good for, and when to avoid them. You can use this info in your day-to-day life.

Helplines In the helplines page (fourth page), we included a variety of websites in the form of hyperlinks that offer very helpful resources such as stories, education on mental health, suicide prevention, a variety of uplifting communities, and more! Again, we applied the general color scheme to the tables and text.

Gallery On the gallery page (fifth page), users can look at calming pictures and listen to nature sounds to aid in relaxation.

Challenges We Ran Into/Things We Learned

It was our very first time ever coding a website like this so we had many hair-pulling errors such as basic formatting errors, syntax errors, and struggling to understand and find code. Lisa: I learned HTML the day before the hackathon started and I'm honestly very proud of us for creating this with very little knowledge and experience. I found it satisfying that I created something with my own two hands and it was honestly a fun process. I learned so much just from participating in this hackathon and it speeded up my learning process. In the beginning, I had trouble trying to navigate the different codes on the pages since it was my first time ever looking at this type of stuff. Now, I have way more knowledge on the types of code, what I'd like to specialize in, and a new-grown passion for coding. Maryann: I have coded a very basic web page before but purely with HTML. This was my first time using CSS and javascript on a website. I was able to code more features and more customization to the styling than my first website and it was exciting seeing this come to life. I learned so many intricate things about website formatting and styling in general. As previously mentioned, we ran into a lot of challenges such as struggling to center the boxes on the color psychology page yet the answer as simple as adding an inline-block line of code. I am happy to have expanded on my knowledge of coding languages and to have grown as a web developer and computer scientist over this period of time.

How We Built It

We collaborated on and we used the following coding languages: HTML, CSS, javascript

Accomplishments That We're Proud of

We're simply proud of being able to create a functioning website that has amazing features and designs. Lisa: I love this website and after this, I'm going to brag about it to all of my friends and family. I'm more amazed by the fact that our website looks so well designed, I'd actually use it to help me with studying and listing my tasks. Since before this I had no previous knowledge of HTML, I'm proud of myself for being able to understand, read and create code. Maryann: I'm just blown away that I was able to create a website of this quality. We worked very hard to make it aesthetically pleasing and useful so I am happy that the end result was able to exceed my expectations. I am also very proud of how Lisa and I worked as a team. We often asked each other for help, actively collaborated, and had fun navigating the process together.

What's Next for Rainbow Spirit

If we ever decide to continue this project, we'd like to add some more features and pages such as a feasible calendar, or even editable content similar to Notion. We may also want to add a login feature and allow users to save and upload their own content to make it more personal.

Extra Features of Rainbow Spirit

In the tab bar, we were able to add a cute violet crescent moon favicon and our very own website title. At the top of the screen on the third page, we also included a progress bar that moves as you scroll through the page.

Built With

Share this project: