practicum/week-4/question1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <div id="question">
        Using the array flowers below, 
        display the flowers. Use the div 'flowersDiv'.
        You should display the flowers in two rows,
        each row containing 4 flowers.
        For each flower, you should show the image
        and under the image display its name.Your webpage should be responsive.
    </div>
    
    <div id='flowersDiv'>
        <table></table>
    </div>

    <script>
        /*
           Using the array flowers below, 
           display the flowers. Use the div 'flowersDiv'.
           You should display the flowers in two rows,
           each row containing 4 flowers.
           For each flower, you should show the image
           and under the image display its name.
        */
       let showFlower = (flowers) => {
           let flowersDiv = document.getElementById('flowersDiv');
           let table = flowersDiv.firstElementChild;
           let row1 = table.insertRow();
           let row2 = table.insertRow();
           for (i = 0; i < flowers.length; i++) {
               let figure = `<td><figure>
                                <image src='${flowers[i].picture}' 
                                    alt="${flowers[i].name}">
                                <figcaption>${flowers[i].name}</figcaption>
                            </figure></td>`;

                    if(i < 4) {
                        row1.innerHTML += figure;
                    } else {
                        row2.innerHTML += figure;
                    }
           }
       };

       class Flower {
           constructor(name, pictureName) {
               this.name = name;
               this.picture = pictureName;
           }
       }
       let daffodil = new Flower('Daffodil', 'https://habahram.blob.core.windows.net/flowers/daffodil.jpg');
       let cherryblossom = new Flower('Cherry blossom', 'https://habahram.blob.core.windows.net/flowers/cherryblossom.jpg');
       let lily = new Flower('Lily', 'https://habahram.blob.core.windows.net/flowers/lily.jpg');
       let daisy = new Flower('Daisy', 'https://habahram.blob.core.windows.net/flowers/daisy.jpg');
       let sunflower = new Flower('Sunflower', 'https://habahram.blob.core.windows.net/flowers/sunflower.jpg');
       let tulip = new Flower('Tulip', 'https://habahram.blob.core.windows.net/flowers/tulip.jpg');
       let rose = new Flower('Rose', 'https://habahram.blob.core.windows.net/flowers/rose.jpg');
       let waterlily = new Flower('Water lily', 'https://habahram.blob.core.windows.net/flowers/waterlily.jpg');
       
       let flowers = [
             daffodil,
             cherryblossom,
             lily,
             daisy,
             sunflower,
             tulip,
             rose,
             waterlily
       ];
       flowers.sort(function(a, b) {
            return a.name.localeCompare(b.name);
       });
       showFlower(flowers);
    </script>
</body>
</html>