Self Care Tip Generator, Javascript Program

11:15 AM


Hey! I'm back with another small project that I did. This time, it's a self care tip generator written with Javascript! Click to continue reading.

My health is very important to me. Sometimes it can be difficult to care for myself physically and mentally with the stress of the rest of my life around me. I know that I need to slow down occasionally and replenish my energy. I was inspired by all of the great self care tips on Tumblr to make this small program. You click a button, and you get a random way to care for yourself!

The Program

In the Browser

Here's what the page looks like all set up in the browser


Click the button, get a tip!


HTML and Javascript

Here is the function I use to grab and display a tip




Here are the important HTML bits



The button click on line 49 calls the function "getTip()". This function contains 3 things: the array where all the tips are stored, line 40, which randomly accesses one of the elements of the array then stores it in the variable rand, and finally, line 43 which populates the <p> displayTip with the contents of the variable rand. So, displayTip is populated by and shows one random element from the array of tips.

Style Sheet

Nothing fancy here!


Next Steps

I want to implement a submission feature. I'm not interested in messing with email, so an option for me is to set up a database and have submissions come in through there. I'd also like to work on the UI. I really like simplicity in design, but it feels unfinished to me. Additionally, maybe when I feel more confident about the above issues, I'll put this thing out into the wild!


Share This Story

Tags: , ,

You Might Also Like

0 comments