/* Challenge: setInterval() */

let isSunny = true
let counter = 0
let percentGrowth = 0
const plots = document.querySelectorAll(".plot")

setTimeout(() => isSunny = false, 5000)

/*
The plants will only grow for as long as it is sunny. 
Write a setInterval method to update the CSS class for the plots 
grow-10, grow-20, grow-30 etc so they will grow every 1 second.

Step 1: Create a setInterval method named plantsGrow, 
with a delay of 1000: 
    * console log the counter variable
    * increment the counter variable
    * add a clearInterval method when isSunny is false
    
Step 2: Update the percentGrowth variable
    * in each loop set the percentGrowth variable to 10, 20, 30 etc
    * check it's working by logging "plants grow! (${percentGrowth})"

Step 3: Create a function named growAllPlants
    * takes an argument percentGrowth
    * loops through the plots array and adds the class "grow-" + percentGrowth
    * invoke the newly created growAllPlants() function inside setInterval 
*/