Basic Javascript Project 2. Create Hex Color

Yêu cầu bài toán là khi click vào button thì tạo ra các mã màu hex ngẫu nhiên, thay đổi màu nền trang web bằng mã màu này và in ra màn hình. Đây là một trong những bài tập HTML - CSS - JAVASCRIPT ở mức cơ bản giúp các bạn làm quen với JS. Bài tập chủ yếu giải thích về JS nên phần giao diện sẽ không nói nhiều. Hy vọng với bài tập này các bạn sẽ thấy thích thú khi học javascript.

HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="container">
        <h2 class="hexColor">
            This Hex Color Code Is: <span class="hex">#ffffff</span>
        </h2>
        <button type="button" class="hexBtn">Press here to change color</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS


body {
    min-height: 100vh;display: flex;
    justify-content: center;align-items: center;
}
.container {
    text-align: center;
}
.hex {
    font-size: 3rem;text-transform: uppercase;
}
.hexBtn {
    padding: 0.25rem 0.5rem;border: 3px solid #fefefe;border-radius: 7px;
    color: #fefefe;background: rgba(0,0,0,0.6);font-size: 1.5rem;
    outline: none;text-transform: capitalize;cursor: pointer;
}
.hexBtn:hover {
    background: rgba(0,0,0);
}

JS


const hexNumbers = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']; (1)
const hexBtn = document.querySelector('.hexBtn'); (2)
const bodyBcg = document.querySelector('body'); (3)
const hex = document.querySelector('.hex'); (4)

hexBtn.addEventListener('click', getHex); (5)

function getHex() {
    let hexCol = '#'; (6)
    for(let i = 0; i < 6; i++) { (7)
        let random = Math.floor(Math.random()*hexNumbers.length); (8)
        hexCol += hexNumbers[random]; (9)
    }
    bodyBcg.style.backgroundColor = hexCol; (10)
    hex.innerHTML = hexCol; (11)
}

Dòng (1) tạo một mảng hexNumbers chứa các kí tự để tạo mã màu hex, mã màu hex thực chất là một chuỗi string được bắt đầu bằng dấu # và 6 kí tự nữa.

Dòng (2) (3) (4) ta sử dụng phương thức querySelector() để tìm đến phần tử HTML tương ứng. Ngoài cách này ra ta có thể dùng một số cách sau:

getElementById()

VD: Tìm đến thẻ html có ID là "root" lưu ý trên một trang web thì có nhiều ID nhưng các ID phải duy nhất và khác nhau.


var el = document.getElementsById("root");

getElementsByClassName()

VD: Tìm đến các thẻ html có class là "btn" lưu ý trên một trang web thì có nhiều thẻ html có cùng class nên phương thức này trả về 1 tập hợp các phần tử thỏa mãn.


var el = document.getElementsByClassName("btn");

getElementsByTagName()

VD: Tìm đến các thẻ html là thẻ "button"


var buttons = document.getElementsByTagName('button');

querySelector()

Phương thức này trả về phần tử đầu tiên thoả mãn điều kiện, và điều kiện phải tuân theo cú pháp CSS:


document.querySelector('.btn'); // class
document.querySelector('#root'); // id
document.querySelector('button'); // tag
document.querySelector('div a'); // tag theo kiểu css

querySelectorAll()

Phương thức này giống với querySelector() nhưng nó trả về toàn bộ các phần tử thỏa mãn.


var btns = document.querySelectorAll('.btn');

JS


const hexNumbers = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F']; (1)
const hexBtn = document.querySelector('.hexBtn'); (2)
const bodyBcg = document.querySelector('body'); (3)
const hex = document.querySelector('.hex'); (4)

hexBtn.addEventListener('click', getHex); (5)

function getHex() {
    let hexCol = '#'; (6)
    for(let i = 0; i < 6; i++) { (7)
        let random = Math.floor(Math.random()*hexNumbers.length); (8)
        hexCol += hexNumbers[random]; (9)
    }
    bodyBcg.style.backgroundColor = hexCol; (10)
    hex.innerHTML = hexCol; (11)
}

Dòng (5) ta sử dụng hàm addEventListener() để thêm sự kiện click cho đối tượng HTML mà ta tìm được ở trên theo cú pháp:


element.addEventListener('eventName', functionName);

Trong đó:
- element là đối tượng HTML (được gọi bằng các phương thức getElement...).
- eventName là tên các sự kiện (bỏ chữ 'on') như click, change, mouseover...
- functionName là tên hàm mà các bạn muốn gọi khi xảy ra sự kiện.
Hoặc bạn có thể sử dụng hàm ẩn danh với cú pháp:


element.addEventListener('eventName',function(){
    // code here
});

Trong function getHex ta quan tâm dòng (10) và (11) trước, câu lệnh này khá dễ hiểu nó có tác dụng gán mã màu vào thẻ body và in ra màn hình. Vấn đề là mã màu đó phải được tạo ra ngẫu nhiên.

Ở dòng (6) vì mã màu hex thực chất là một chuỗi string bắt đầu bằng dấu # và nối chuỗi với 6 kí tự ngẫu nhiên nữa do các dòng (7) (8) (9) tạo ra. Để tạo ra 6 kí tự thì ở dòng (7) ta dùng vòng lặp for lặp lại 6 lần, mỗi lần sẽ lấy 1 kí tự ngẫu nhiên trong mảng hexColors và nối với biến hexCol.


#3
#39
#390
#390F
#390F4
#390F49

Như vậy sau khi ra khỏi vòng lặp for thì biến hexCol đã có mã màu đầy đủ để gán giá trị cho background. Hy vọng với phần giải thích cho bài tập này các bạn sẽ thấy thích thú hơn khi học javascript.

Demo online: https://basic-js-project-2create-hex-color.kentrung.repl.co/
Code online: https://repl.it/@kentrung/Basic-JS-Project-2Create-Hex-Color
Bài viết được tham khảo tại: https://www.youtube.com/watch?v=Kp3HGwlXwCk&t=960s