Make Indian Flag using CSS (Day 2 of #OpenUpOctober)

Let’s say you’re a frontend engineer with 10 years of experience. You go into an interview, and are ready to kill it!

You’re expecting questions like:

• How to identify and debug memory leaks in an SPA
• In-depth dive of promises
• Inner workings of the event loop
• DOM vs VDom vs Shadow DOM
• Types of state management in complex web apps
• Architectural and design questions
• etc.

and you get asked what?

“Draw your country’s flag using CSS”. How would you feel?

This is what happened to someone over at reddit, and while this seems a bit unacceptable I wanted to see if I still had the CSS chops to figure this out with minimal / no help.

And I surprisingly did it, but with a teeny tiny bit of help:

See the Pen Indian flag using css by oxalorg (@oxalorg) on CodePen.

1. I had to google the aspect-ratio: 1 / 1. Couldn’t figure out how to make a perfect square box based on height alone (any one knows a better way?).
2. Also forgot that transform: rotate(45) wouldn’t work, and it needs to be 45deg instead.

I also added a bit of javascript to make the flags inner circle (Ashoka chakra) spin indefinitely! Because why not?

This is Day 2 of my #OpenUpOctober challenge! LETS GOOOO