Choose Your Weapon Day 2



I swear writing the posts is much more of a hassle than the actual coding. [but no, I need to soldier on. Documentation is of the essence!] I think by now, you all realized how much of a whiner I am… Be glad you don’t know me in real life, be very glad.

So for this day, I thought of turning the usual programming assignment in every computer coding course into an actual game with an interface. I’m talking about the rock paper scissors game. Nothing fancy, just a couple of control flow statements (if/else). Just as the first project, the tricky part was the design. [I better be a badass designer after this project!] I wanted to do a flat design style, I settled on a design look, now on to the phase where you get your hands dirty. illustrators pen tool is a software version of the devil! My god. If you were the calmest and collected person on earth, this tool will make you either mad or suicidal [sigh] After somewhat hours, I finally designed the three items and this is how they turned out.

Now that I have them ready, it’s time to code. I added the structure and styled the site, and voila!

Logic is good. the design seems fine. Am I really done?

No, no it can’t be that easy… do I have the courage to check mobile compatibility? I wanna say no no don’t Athoug because well it will suck. I wish I listened to my thoughts because it sure was a pile of mess 🙁



After crying a bit, and banging my head against the wall. I came back and said to myself, ‘Bro you will master media query’ beside it’s my fault I can’t design a mobile-first approach? Why? the answer, simple, I’m an ass. So after fixing the style to accommodate different screen sizes, it was time to put it to the test, let’s see …

Yay! I can sleep sound tonight! [happy dance!] I still wanted to add more interaction (CSS animation) however I’m still not up to that level [soon inshallah very soon] You can check it out here.

Share your thoughts with me? Do you have any suggestions for me? or recommendation about a project idea?

anyhow, 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 *