Coin Flip Day 12



I have a confession to make… I make decisions based on a coin flip. Not the smartest of moves, but I am a confused individual who leaves it up to luck [ or gravity] So this days project is a coin flip simulation for me to use whenever I have a decision to make [off we go].

So the logic isn’t hard, people take it in their intro course to programming. What I have is an array that holds these two values, and randomly assign a value to the flip event. But for some reason, my random function doesn’t work D: as you can see I constantly get the same index

After a bit of debugging, I realized there was a problem with my rounding function so once I fixed it, I get the 0 and 1 in random [wooohooo]

Now I needed to make sure that my value fetching function works and it’s good, all is working, I get my heads and tails text.

So the logic is really easy. Now off to the hard part… UI. So this time, I truly wanted to challenge myself.  I want to simulate a coin rotation. I haven’t really dabbled my hands on CSS transitions and animation so here we go, let’s try it out.



My first step was adding the coin. I just wanted to have a placeholder first, and then have it change based on the result of the flip variable.

Awesome. We’re getting there. Next is the scary bit. Playing with flips. Now Yours truly forgot all about degrees and sins and cos [sigh] So I had to play around with it a bit to get it to flip by the x-axis and after some trial and error, we got it to sorta work once hovered on. [baby steps toogi baby steps]

Now triggering the transition based on a click event rather than hover. This step was simply [thank god] and all is good.

Now realistically, when you flip a coin, it rotates a couple of times then shows the result, not just a single flip like what I have right now. So I tried to play with keyframe animations and well…

Remember, I’m an idiot when it comes to degrees [forever crying] so I started throwing in supposed or posable options for degree angles and well it finally worked! look, look!

Yes, its filliping, buuuut it’s no stopping T.T I had to research a bit about animation and keyframes, especially that it’s the first time I use it. and well I figured it out! It also matches the result of the array value!



Now, we customize the UI. At the beginning, I wanted to have a chibi face and I started to work on it

But once I saw the final result, I kinda… didn’t like it.

Because honestly, that’s not my style at all. I’m messy, sketchy art is more my thing. So I change it and now this is what it looks like.

Yup, that’s more like it. Now to fully style everything and add some touches to the look. This is the final outcome!

I really love it! You can check it out for yourselves here. So tell me how do you make your decisions?

See you tomorrow, and 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 *