// function to add stripes to flag
const stripes = () => {
  // find flag in html
  let flag = document.getElementById("flag");
  // create new div for stripes section
  let stripes = document.createElement("div");
  // set CSS id for stripes section
  stripes.id = "stripes";

  // enter for loop to create 13 stripes
  for (let i = 0; i < 13; i++) {
    // create individual stripe
    let stripe = document.createElement("div");
    // if the remainder of i / 2 is 0 (even number)
    if (i % 2 === 0) {
      // set class to red
      stripe.className = "red";
      // if the remainder of i / 2 is not 0 (odd number)
    } else {
      // set class to white
      stripe.className = "white";
      // close if statment
    }
    // add stripe to stripes container
    stripes.appendChild(stripe);
    // close for loop
  }
  // add stripes container to flag
  flag.appendChild(stripes);
  // close function
};

// function to add stars to flag
const stars = () => {
  // find flag in HTML
  let flag = document.getElementById("flag");
  // create new div for union (blue star section)
  let union = document.createElement("div");
  // set union's id for CSS
  union.id = "union";

  // for loop to add the 9 rows of stars
  for (let i = 0; i < 9; i++) {
    // create div for row of stars
    let row = document.createElement("div");
    // create empty variable for number of stars in row
    let num;

    // if the remainder of i / 2 is 0 (even number)
    if (i % 2 === 0) {
      // set class names
      row.className = "star-row six";
      // set number of stars to 6
      num = 6;
      // if the remainder of i / 2 is not 0 (odd number)
    } else {
      // set class names
      row.className = "star-row five";
      // set number of stars to 5
      num = 5;
      // close if statement
    }

    // enter for loop to add stars to row
    for (let j = 0; j < num; j++) {
      // add star icon's HTML (from fontAwesome) to row div
      row.innerHTML += '<i class="fas fa-star"></i>';
      // close j for loop
    }
    // add row to union
    union.appendChild(row);
    // close i for loop
  }

  // add union to flag
  flag.appendChild(union);
  // close function
};

// Call functions to add flag to the DOM
stripes();
stars();