Color Flipper

前言

由於我在Youtube發現了此影片，所以決定往後每篇文章練習影片中一個小專案，加速對JavaScript的熟悉度。另外，有兩點要特別說明 :
* 我會注重在JavaScript的部分，所以HTML與CSS就不多做說明。
* 教學影片說明欄有附上每個專案程式碼的連結，每個專案皆有Setup與Final兩個版本，而我將偏重在JS函式的建置上，因此也不會在Header設定上多做介紹。

功能說明

  1. 導覽列 : 可以在Index(固定顏色頁面)和Hex(隨機Hex Color樣面)跳轉
  2. 主頁面 :
    • 文字 : 顯示目前是什麼顏色
    • 按鈕 : 進行換色動作(固定顏色 or 隨機Hex色碼)

HTML重點

  • 按鈕的id="btn"可以讓我們在之後的JavaScript部分中，利用document.getElementById()的方法來渲染該按鈕
  • 重點程式碼如下 : 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    ...
    <!-- 主頁面 -->
    <main>
        <div class="container">

            <!-- 塗色方塊 -->
            <h2>Background Color : <span class="color">#f1f5f78</span></h2>
            <!-- #f1f5f78為預設顯示字體 -->

            <!-- 換色按鈕 -->
            <button class = "btn btn-hero" id="btn">click me</button>
            
        </div>
    </main>
    <!-- javascript -->
    <script src="index.js"></script>
    ...

JavaScript重點 — index.js

  1. 固定顏色種類，並存在名為colors的陣列中 
    1
    const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
  2. 透過找取按鈕的id去渲染該按鈕 
    1
    const btn = document.getElementById('btn');
  3. 透過CSS中的.color元素去渲染按鈕本身的顏色 
    1
    const color = document.querySelector('.color');
  4. 建立一個得到隨機整數的函數，範圍是0~x 
    1
    2
    3
    function getRandomNumber(x){
        return Math.floor(Math.random() * x);
    }

    I. Math.random()會產生介於0到1之間的隨機小數
    II. 再乘上x自己，便會得到介於0到x之間的隨機小數
    III. 最後用Math.floor()無條件捨去，便能得到介於0到x之間的隨機整數

  5. 最後透過addEventListener()方法，去為btn註冊一個新的點擊事件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    btn.addEventListener('click',function(){

        const  randomNumber = getRandomNumber(colors.length);
        //利用前面的函數，隨機挑0~3其中的一個數字
        
        document.body.style.backgroundColor = colors[randomNumber];
        //改變背景色
        
        color.textContent = colors[randomNumber];
        //渲染按鈕顏色
    });
    ...

JavaScript重點 — Hex.js

Hex Color Codes是由六個十六進位的數字所組成，詳情請見解釋

  1. 將16個數字存在名為hex的陣列中 
    1
    const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
  2. 透過找取按鈕的id去渲染該按鈕 
    1
    const btn = document.getElementById('btn');
  3. 透過CSS中的.color元素去渲染按鈕本身的顏色 
    1
    const color = document.querySelector('.color');
  4. 建立一個得到隨機整數的函數，範圍是0~x 
    1
    2
    3
    function getRandomNumber(x){
        return Math.floor(Math.random() * x);
    }

    第2~4點和上個例子皆相同

  5. 最後透過addEventListener()方法，去為btn註冊一個新的點擊事件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    btn.addEventListener('click',function(){

        let Hexcolor = "#";
        for(let i = 0; i < 6; i++){
            let index = getRandomNumber(hex.length);
            Hexcolor += hex[index];
        }
        //隨機抽出6個數字，並拼湊成一組Hex Color Code
        
        document.body.style.backgroundColor = Hexcolor;
        //改變背景色
        
        color.textContent = Hexcolor;
        //渲染按鈕顏色
        
    });
    ...

參考來源

  1. addEventListener()方法解釋
  2. Hex Color Code介紹