rendering/renderCircles.js at master · josephmadamba/rendering · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

function makeSingleCircle (circle) {
    return `<div class="circle" style="width:${circle.radius};
    height:${circle.radius};
    background:${circle.color};
    border-radius:50%">
</div>`
}

function renderCircles(circles) {
    return circles.map(makeSingleCircle).join('')


    // var i;
    // var htmlString = ""
    // for (i = 0; i < circles.length; i++) {
    //   htmlString += `<div class="circle" style="width:${circles[i].radius};
    //                                             height:${circles[i].radius};
    //                                             background:${circles[i].color};
    //                                             border-radius:50%">
    //                 </div>`
    // }
    // return htmlString;
}

function circles() {
    var content = document.getElementById('content');
    var circlesAbstraction = [
        {
            radius: '50px',
            color: "#FF00FF"
        },
        {
            radius: '30px',
            color: "#FF99AA"
        },
        {
            radius: '60px',
            color: "#0000FF"
        },
        {
            radius: '10px',
            color: "#000000"
        },
    ];

    content.innerHTML = renderCircles(circlesAbstraction);

}