Mục lục
Xin chào các bạn, ngày hôm nay mình sẽ bắt đầu một series về những bài tập Html, css, javascript đơn giản. Hi vọng các bạn sẽ thích series này của mình. 😀
Bài đầu tiên thì mình sẽ hướng dẫn các bạn code một bảng màu khi hover như hình minh họa dưới đây
Trông thú vị phải không các bạn. Vậy làm thế nào để code được một bảng hover đầy màu sắc như này. Rất đơn giản và chỉ cần 3 file html, css, javascript rất ngắn gọn thôi.
Chỉ cần 1 thẻ
Html
Đầu tiên thì ta cần phải tạo file index.html
Chỉ cần 1 thẻ
và có class với id là container, và việc còn lại là của file css và file js.
Tạo một const để lấy DOM container ở html. Từ thẻ DOM này ta sẽ for để thêm từng thẻ
Javascript
Tạo một file script.js như đã khai báo trong file html. Và trong file script.js sẽ có đoạn code như dưới đây:
Tạo một const để lấy DOM container ở html. Từ thẻ DOM này ta sẽ for để thêm từng thẻ
là từng ô vuông. Add thêm sự kiện hover vào thì sẽ setColor thẻ
đấy và khi hover ra thì sẽ removeColor thẻ
File css sẽ style cho container bên ngoài và từng ô vuông nhỏ có class là “square”
Và thế là xong một project nho nhỏ để make color với bạn bè rồi phải không nào =))
Mình khuyến khích các bạn tự gõ lại để biết được từng dòng sẽ có chức năng gì. Hoặc có thể download source code tại đây.
Chúc các bạn ngày làm việc hiệu quả và đừng quên tham gia nhóm để trao đổi học hỏi thêm nhiều điều mới mẻ nhé!
Css
Tạo file style.css:
File css sẽ style cho container bên ngoài và từng ô vuông nhỏ có class là “square”
Và thế là xong một project nho nhỏ để make color với bạn bè rồi phải không nào =))
Mình khuyến khích các bạn tự gõ lại để biết được từng dòng sẽ có chức năng gì. Hoặc có thể download source code tại đây.
Chúc các bạn ngày làm việc hiệu quả và đừng quên tham gia nhóm để trao đổi học hỏi thêm nhiều điều mới mẻ nhé!