本日小作品：
https://codepen.io/linchinhsuan/pen/eYZXbmO

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

我使用的CDN，來源是這個Icon網站
https://material.io/resources/icons/?style=baseline
基本上這些icon就跟字型一樣，所以可以透過設定color屬性改變其顏色。

var colors = ["#ffa69e","#faf3dd","#b8f2e6","#aed9e0","#5e6472"];
var len = colors.length;

宣告一個變數儲存色碼陣列，然後用變數len撈出陣列的長度。

var color = document.querySelector(".color");
for(var i=0;i<len;i++){
    var item = document.createElement("li");
    item.textContent = colors[i];
    color.appendChild(item);
    item.style.backgroundColor = colors[i];
}

for迴圈，首先先在document底下新增一個li節點，這裡使用的是document.createElement("li")這段語法，他會新增一個節點但尚未被掛在任何一個節點下。
color.appendChild(item);這個時候才真正地把li掛在color這個ul底下，成為color的子節點。
item.textContent = colors[i];這行是將色碼透過迴圈依序寫入每個li的內文。所以我們才會在網頁中看到色碼實際上以文字的形式顯示出來。

最後的item.style.backgroundColor = colors[i];則是將這個li的style也就是樣式屬性裡面的backgroundColor改成color陣列中對應的色碼。如此一來就可以達到透過迴圈將每個li上不同顏色的效果。

color.addEventListener("click",function(e){
    var chooseColor = e.target.textContent;
    if(e.target.nodeName === "LI"){
        document.querySelector(".material-icons").style.color = chooseColor ;
    }
},false);

在color上新增一個事件監聽器，因為比起在子元素上新增（那要寫五次），在ul上新增會更有效率。
e.target是指你點擊到的目標，以這個例子為例可能會是UL或是LI兩種，.textContent則是點擊目標的內文。
if(e.target.nodeName === "LI"){......}的意思是如果點擊的目標的nodeName（節點名稱，例如UL或LI一類的），嚴格等於LI的話，則執行程式碼。白話文就是，我們透過這行讓使用者點到li才有事件，點到空白處（ul）則不會。
document.querySelector(".material-icons").style.color = chooseColor ;改變icon的color屬性，最後就得到我們要的結果。

－－－

本日結語：
今天是十五天（一半了灑花！），昨天和親弟弟討論之後決定了這個小作品的具象化方向，感謝弟弟大力相助＞＜