Happy/Sad Day 25

Here we are reaching the 25th, the quarter round, the ¼th [I’m out of words to describe this day] Let’s just get straight to the point. Honestly, I haven’t been feeling myself lately. Another word could be sad. So during this funk, I couldn’t really create anything. While in this state, I kept listening to motivational speeches to sorta kinda get me out of this mindset. Hence this project. Basically, it’s a choice where you chose how you want to spend the day.  As always I started with the design. I wasn’t aiming for much. Just something simple and just something…

So I know how I want it to look like. So now I moved on to the coding part. Since it was a very simple design, it didn’t really take much. Just some google fonts, proper positioning, and of course that dreaded mobile-first approach.

So all is well. It’s responsive. it has the effects I want. I then added the fact that I wanted to be changed based on the feeling of the day happy/sad

Brilliant. Now I want the style to change when the option is sad. As in everything changes. The face, the colors, and all that jazz. Now when you look at my code, the HTML, and CSS are very well structured. However [which is a big but] my javascript is… let’s just say if a programmer looks at it, they’d spit at my code. full of bad practice [but I just wanted stuff to be done regardless of the best approach] anyways, I made it work. The style changes based on the choice.

so okay. I can stop here and have it working. But you know what I can still do a better job. After all, all this practice shouldn’t go to waste. I’ve always wanted to work with animation because my skills are a bit lacking in that genre. I was a bit proud of myself really because I kinda tested the blinking on my own with no reference [so Athoug have a moment of pride regardless of how silly and simple it is it’s an achievement] I was experimenting the blinking and here’s the process

[The first approach]

[the second approach]

[The third approach]

Now the kicker is that animations in CSS only runs once. However, I want it to run every let say 4 seconds. After some digging, I realized there’s an event called animation end that fires up once the animation is ended. Thanks to this StackOverflow post, I managed to have it blink the way I want it to. Now This is what I have thus far

Not bad. Now I want to have the mouth flip whenever the user clicks on a  choice. So after some messing around with rotation and transitions. I kinda like the final result.

You can check the actual project on my site here. Thank you for sticking with me thus far. Sorry for the sappy post. Better posts/projects will come soon.

Happy coding 🙂

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 *