If you live in the USA, Happy Independence Day! I’ve been busy this week doing family stuff, so I honestly haven’t touched the COVIDiary project. We’ll hopefully get back into that in the next week or so.
Instead, I thought we’d have a little fun with JavaScript today. We are going to use HTML, CSS, and JavaScript to create the American Flag!
Starter Code
This tutorial is focusing on JavaScript, so I have provided the HTML and CSS for you. When you finish the tutorial, feel free to play with the CSS properties to see how they work. I added comments to the code so you know what each line does.
Here’s the starter code. If you want to code along, I suggest clicking the Edit on CODEPEN button and putting that tab in a new window.
See the Pen US Flag (Starter Template) by Audrea Cook (@audthecodewitch) on CodePen.
I provided a blank flag template via HTML and CSS. You are going to add the JavaScript to create the field of stripes and the union (the blue square with stars) using two separate functions. I’ve separated the functions into the two embedded CodePens below, but you’ll add the code for both to your JavaScript tab in your CodePen!
The stripes() Function
This function will create our 13 red and white stripes. Read the comments for each line to see what it’s doing.
See the Pen US Flag (Stripes) by Audrea Cook (@audthecodewitch) on CodePen.
The stars() Function
This function will create our blue union with the 9 rows of white stars. The stars are FontAwesome icons.Please note the location of union within our flag container is determined by the CSS #union id.
See the Pen US Flag (Stars) by Audrea Cook (@audthecodewitch) on CodePen.
Bippity-Boppity Boo! (Put it Together)
If you’ve been coding along, you should have a beautiful US flag! If not, here’s what it looks like when the two functions are put together.
See the Pen US Flag (Complete) by Audrea Cook (@audthecodewitch) on CodePen.
I hope you had as much fun with this as I did! Have a safe and wonderful 4th of July!