időjárás

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Időkép demo</title>
        <style type="text/css">
        .element {
            float: left;
        }
        .element div {
            text-align: center;
        }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
        var napok = [
            { nev:'H', fok: 10 },
            { nev:'K', fok: -20 },
            { nev:'Sz', fok: 5 },
            { nev:'Cs', fok: 8 },
            { nev:'P', fok: 12 },
            { nev:'Sz', fok: 22 },
            { nev:'V', fok: 45 }
        ];
        var nap, container = document.getElementById("container"), element, label1, textNode1, label2, textNode2, image;

        for (var i = 0; i < napok.length; i++) {
            nap = napok[i];
            element = document.createElement("div");
            element.className = "element";
            image = document.createElement("img");
            if (nap.fok <= 5) {
                image.src = "https://cdn0.iconfinder.com/data/icons/good-weather-1/96/weather_icons-68-128.png";
            } else {
                image.src = "https://cdn0.iconfinder.com/data/icons/good-weather-1/96/weather_icons-01-128.png";
            }
            label1 = document.createElement("div");
            textNode1 = document.createTextNode(nap.nev);
            label2 = document.createElement("div");
            textNode2 = document.createTextNode(nap.fok);
            label1.appendChild(textNode1);
            label2.appendChild(textNode2);
            element.appendChild(label1);
            element.appendChild(label2);
            element.appendChild(image);
            container.appendChild(element);
        }
        </script>
    </body>
</html>