Bài 1 – Series 50 bài Html, Css, Javascript đơn giản

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.

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.

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ẻ

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é!
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x