Motivation Day 36



I don’t know about you, but sometimes, I have those days where I’m like “I can do this!” “pffft I’m awesome and I’ll show everyone what I can do!” and those days are very rare to come across. Today isn’t one of those days… Hence the title of today’s project. I want to have a motivational generator that helps this damaged self-esteem of mine. Let’s start, shall we?

I thought of doing some data mining and grabbing some quotes here and there. But you know what, there are some awesome people in the world who’ve already complied that data. I used this lovely guy’s JSON file [much-appreciated kind stranger].  Now I start testing if I can grab the data

okay, now let’s try some random generation

awesome the function works nicely. I then move on to hooking it with the UI

Here’s where I reached my breaking point… I wanted to add a bit of functionality which was animating the text. And for the love of me, I couldn’t get it to work. I didn’t want to use a plug-in. I wanted pure vanilla javascript.

I try.

Try some more.

And again.

nothing…

I then decided to screw it. I’m not doing anything today. So much for motivation huh. I take a break. And my mind can’t stop thinking about the problem. I tried distracting myself by reading comics. But I couldn’t so the hell with it, I’ll try some more after all this whole project is called ‘Motivation’. I started testing with a simple ‘Hello’ string and kept at it until



YES! okay, it animated but then hits an infinite undefined state. It’s okay as long as I got it to animate. With some tweaks to the script, I test once more

Okay nice, I just forgot to add the write else. After adjusting that one more test

YES! [happy dance] Okay now let’s try the script with the actual quotes generated and

OH, HAPPY DAY! Finally, it works. [this might be easy for you but it sure took me a while] Okay I also was to have random colors generated by each click.

Awesome! Now that I have the functionality working nicely, I start working on the UI. Nothing fancy really, yet here are the images that show the detailed process

I had to do a responsive check to make sure the text adjusts its size based on the width

[back to the process]



 

While styling the site, I noticed whenever I click the button well…

hmmm as you can see the button keeps its original style. A simple fix and

Great. Now one more thing. The font. After change it well this is what we have

I’m pretty happy [given that I was going to scratch this project altogether] If you are feeling down and what some motivational or inspiring quotes, you can check the project out here. Tell me do you have some down days as well? If so how do you come put on it?

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *