/* Map challenge */

const plantingGuide = [
    {
        type: "coriander",
        image: "images/coriander.jpg",
        photographer: "Chandan Chaurasia",
        climate: ["subtropical", "tropical", "desert", "temperate", "cool", "mediterranean"],
    },
    {
        type: "thyme",
        image: "images/thyme.jpg",
        photographer: "Albert Melu",
        climate: ["subtropical", "tropical", "desert", "temperate", "cool"],
    },
    {
        type: "lavender",
        image: "images/lavender.jpg",
        photographer: "Annie Spratt",
        climate: ["subtropical", "desert"],
    },
    {
        type: "oregano",
        image: "images/oregano.jpg",
        photographer: "Jackie Hope",
        climate: ["subtropical", "tropical", "desert", "temperate", "cool", "mediterranean"],
    },
    {
        type: "lettuce",
        image: "images/lettuce.jpg",
        photographer: "Erda Estremera",
        climate: ["subtropical", "tropical", "desert", "cool", "mediterranean"],
    },
    {
        type: "pumpkin",
        image: "images/pumpkin.jpg",
        photographer: "Sierra Keat",
        climate: ["tropical"],
    },
    {
        type: "mint",
        image: "images/mint.jpg",
        photographer: "Simon Lee",
        climate: ["dry", "cool"],
    },
];

const plots = document.getElementsByClassName("plot")
const plotsArray = Array.from(plots)

/*
We need to select the correct plants for the climate. 
Map through the plotsArray and add the image value for plants which are suited to a cool climate.

Step 1: Create a function called filterByClimate
    * has two parameters: plants(array), climate
    * filter through the passed array and only select items whose climate contains the matching climate argument
    
Step 2: Create an array to hold all the plants suitable to a cool climate
    * Invoke the filterByClimate function with the array and climate arguments
    * Assign the result to a varaible named "climatePlants"

Step 3: Generate the HTML for each plot, and fill the garden
    * map through climatePlants to generate the following mark-up for each item:
        <div class="plot"><img src=""></div> where the image src is equal to the corresponding image value
    * map through the plots array
        * create a variable that pulls an index at random from the newPlots array
        * update the inerHTML of each plot to replace with a random item from the newPlots array
*/