Quotes & Tips Depot

Displays motivational quotes and tips based on chosen emotion option.

Comment

Inspiration

The isolation and quarantine protocols, due to the COVID-19 pandemic, really brought to light in my eyes how much we take social interaction for granted. Even more so how much validation and mental fortification we get simply by being close to those we consider friends, family, co-workers, etc. I wanted to create something, even if it was miniscule to what humans actually need, that substitute in place of that social validation every human naturally craves for.

What it does

Depending on the user's selection from 6 basic emotions, it will display an assortment of quotes and tips associated with that emotion, in order to provide mental reassurance and confidence to the user experiencing a certain type of emotion.

How I built it

I used HTML and CSS strictly. I also used Visual Studio Code to edit and changes I made to the .html and .css files. Practically all of the elements had the position property modified manually, so they are all absolute from each other. Lots of paragraphs and background-color changes, such as the gradient backgrounds in the select option element, the body background, and the header background.

Challenges I ran into

Having never even read a single tutorial on HTML/CSS before, I had to spend most of the first part of the hackathon just researching what each tag represented, what properties of certain elements would be useful in accomplishing what I wanted, etc.

Accomplishments that I'm proud of

Getting the select option element to link to a new .html file when an option was called was probably the most satisfying thing to see happen, especially after spending a good few hours failing with text fields, which I'm sure also could work.

What I learned

HTML and CSS are extremely useful in web page editing, and it's no wonder that virtually no webpage on the Internet doesn't use HTML and/or CSS. I also never really had to make a tech-related recorded demonstration, so that actually brought its own perks when I finally managed to get a system going with that.

What's next for Quotes & Tips Depot

I definitely want to try looking into JavaScript, and possibly messing around with storing data in local/session storages, or even using an API to hold data for me. I also think I could expand the range of emotions I currently have significantly, as JS allows for support of arrays.

Built With

Share this project:

Updates