2017年5月24日水曜日

開発環境

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 8.(Styling with Fonts and Colors: Expanding Your Vocabulary)、SHARPEN YOUR PENCIL(No. 5898) を取り組んでみる。

SHARPEN YOUR PENCIL(No. 5898)

コード(Emacs)

HTML5

<ul id="colors0">
</ul>
<script src="sample4.js"></script>

CSS(Stylesheet)

JavaScript

let ul0 = document.querySelector('#colors0'),
    range = (start, end, step=1) => {
        let res = [];
        for (let i = start; i < end; i += step) {
            res.push(i);
        }
        return res;
    };

ul0.innerHTML = 
    range(1, 16)
    .map((n) => {
        let color = `#${n.toString(16).repeat(6)}`;

        return `<li style="color: ${color}; font-size:x-large;">${color}</li>`;
    })
    .join('');

0 コメント:

コメントを投稿