Inspirational Quote Generator

• 

  css code

• 

  css code

• 

  javascript code

• 

  html code

• 

  javascript code

• 

  javascript code

• 

  scared quote page

• 

  confused quote page

• 

  original page

Inspiration

Eveyone is going through a stressful time right now with the Covid-19 crisis, upcoming election, California wildfires, etc. We wanted to create a place where everyone could hear something positive that specifically applies to them.

What it does

Our site allows the user to click on their current mood and it returns an inspirational quote based on their mood that will make them smile. It also changes colors based on the mood inputted by the user.

How we built it

We used repl.it to code in html, css, and javascript. We used jQuery to access the DOM.

Challenges we ran into

We had a lot of problems making sure the colors switched to the right color at the right time based on the user hovering and clicking. We also struggled with the layout.

Accomplishments that we're proud of

We are proud of the hover and click color changes because they took a lot of effort. We are also proud of the quote variety we provided for the user.

What we learned

We learned how to switch css styles using javascript, and how to use inner html in javascript.

What's next for Inspirational Quote Generator

We could add more emotions and more quotes to the user experience can be better customized. We could also improve its appearance on mobile devices. We could also add background images of relevant pictures per mood.

Built With

• css
• html
• javascript