Sử dụng BEM tạo Toast Message UI

[@F8VNOfficial]

Bạn nào chưa học Javascript thì cứ chép vào là được nhé :v. Sau đó học Javascript tại đây: fullstack.edu.vn/courses/javascript-co-ban Tham gia các khóa học MIỄN PHÍ tại F8 tại đây nhé (đã quyết định theo thì hãy cố gắng đến cùng): 1. Kiến thức & cái nhìn tổng quan về ngành: fullstack.edu.vn/courses/less... 2. Code giao diện trang web với HTML, CSS: fullstack.edu.vn/courses/html... 3. Xử lý hiển thị tốt giao diện trên nhiều thiết bị khác nhau (responsive): fullstack.edu.vn/courses/resp... 4. Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java... 5. Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java... 6. Lập trình Backend với Node & ExpressJS: fullstack.edu.vn/courses/nodejs ---

[@nakrothlegend97]

*Em xem trên youtube mấy video của anh , ko có video nào mà có quảng cáo luôn đó...anh đúng thật sự là người có tâm và có tầm...truyền đạt cuốn thực sự..cảm ơn anh*

[@F8VNOfficial]

Cảm ơn em nha. Trước a ko bật QC nhưng từ giờ anh sẽ bật e nhé. Bật QC giúp tăng tỉ lệ đề xuất kênh của KZbin hơn và nếu có thu nhập anh sẽ sử dụng để duy trì và phát triển F8.

[@thanhvo1703]

Em comment ý này là để bạn nào làm theo clip mà bị lỗi giống em sửa thôi nha anh ! Hàm calc() mà mình để toán tử nó dính sát thì nó sẽ hiểu là theo sau là 1 độ dài âm nên nó sẽ bị 'invalid' nên mình cần để thêm 1 khoảng trắng trước và sau toán tử. vd: calc(100% + 32px). Em cám ơn video của anh, nhờ những lỗi nhỏ nhỏ thì em lại tự học nhiều hơn.

[@superhero6856]

anh làm cho mn xem miễn phí mà rất có tâm e ủng hộ chúc ah luôn thành công

[@minhtringuyen242]

Anh làm clip về phím tắt để code nhanh hơn đi ạ.

[@minhnguyenphucquang2345]

Cái này toidicodedao có làm một vid: kzbin.info/www/bejne/m5Cud6RuaploiLs

[@trungsusi]

Cám ơn anh, xem Khoá JS này mà thấy có những cái về Tư duy có thể áp dụng vào cái ngôn ngữ C# đang dùng. ^^

[@tuyenguitar1092]

anh thao tác nhìn đã quá ạ. Bài giảng rất hay ạ

[@DuongNguyen-cm2zy]

chắc bao h học js rồi quay lại bài này, cảm ơn anh ạ

[@chinhle6244]

học xong js chưa b:))

[@ngochoangtuan1564]

Hay quá. Cám ơn a nhiều. Chúc a sức khoẻ và ra thêm nhiều video hay ạ. Học của a e biết được nhiều luôn.

[@DzungVv]

đúng phần mình đang tìm hiểu, cảm ơn những chia sẻ của anh!

[@CuongNguyen-yh9dh]

Emmet của anh giúp thao tác nhanh hơn rất nhiều, mong a ra video hướng dẫn vài cái ạ. Em cảm ơn ak.

[@anbui6997]

a nhảy số nhanh quá , bài trước mới css cơ bản mà bài này đã scrip một đống rồi

[@ienpham1820]

Đặt ly trà sữa ở đây khi nào học js , sang quay lại lấy

[@hahoang-uw5dt]

xem video, nghe anh sub mà cuốn hơn cả xem phim bom tấn hô li út anh ạ :)))))). quá đã luôn

[@motminh687]

Hi vọng anh làm thêm nhiều content xây dựng tính năng bằng html css js này hơn ạ

[@luanthai3219]

Em vẫn khá yêu đời cho tới vid này - nghi ngờ nhân sinh 😀 nhưng cũng cám ơn anh nhiều

[@F8VNOfficial]

Nếu chỉ biết html, css thì em tẩu hoả ngay em. Vì bài này anh dùng cả JS. Em chỉ cần quan tâm phần đầu video, khi chỉ dùng html cá thôi nha

[@Hieu-if1bf]

tưởng mỗi mình

[@HiepLee1509]

đoạn intro hay quá ạ🤣🤣🤣

[@phanhaiang7052]

hồi lúc còn ngu nói anh làm dài dòng, bây giờ đỡ ngu thấy anh code hay thật :D

[@quangtran7954]

hay anh ơi,với đứa như e thì cái này rất hay =))) mặc dủ chép là chủ yếu

[@vinhphucluu3820]

Phải nói là cho những video của anh 100 điểm :D

[@StudentsLong]

chua học js vào xem lú cái đầu luôn a

[@DiscoveringNations]

ôi mẹ ơi nhìn cái thao tác code nó đã con mắt gì đâu :v

[@chauaominh838]

anh cho em hỏi 3:11 anh dùng tổ hợp phím gì có thể copy hết. xong qua css làm sao có thể gõ block cùng lúc thế anh

[@Amuro__1]

Anh cho em hỏi là khúc 18:55 anh làm sao để chọn nhiều dòng code vậy ạ

[@voxuanhoa1166]

xem từ đầu chuỗi video html, css tới bài này tự nhiên khựng lại :))

[@AnotheNguyen]

Awesome, bài này hay quá anh ơi! Thanks for sharing!

[@lucastruong2530]

đã like và sub, kênh rất hay và ý nghĩa,. Trình bày nội dung quá tốt ngoài mong đợi. Keep it up. Thank bạn đã chia sẽ :D

[@theshrieking]

Căng não lun nhưng mà hay lắm a. Số 1

[@duongpham-mq6xh]

Mấy cái đoạn dùng hàm để nó hoạt động thực kia là Javascript à a

[@powerthymewarp6275]

Anh oi, tự nhiên độp phát add JavaScript zô ko hỉu lun 😐

[@venuspdd]

code đến hiện tại bị lỗi rồi anh ơi.😭từ lúc thêm 2 cái button success và danger là 2 button bị đẩy lên góc phải. 17:12

[@hiphd1467]

ITS REALLY WORKED LOL THANK YOU DUDE

[@baole4742]

chỉ vài tips code nhanh hơn đi ạ. Thấy a làm tiết kiệm time hẳn

[@dinhkhai]

Đoạn 3:10 a gõ kiểu gì nhanh vậy ạ, ai biết chỉ cho mình với. Thankyou !!

[@phamducmanhfplhcm441]

cảm ơn anh sơn nhiều

[@hoanghuutoan5373]

Anh ơi video rất hay và đủ tính năng và tối ưu khá tốt và em muốn đóng góp 1 chú là cái chỗ duration ý ạ mình kh cần định nghĩa delay nữa mà ở duration mình chỉ điền là 3 hoặc 5 xong r gọi trực tiếp duration vào animation xong thêm chữ "s" thì nó cũng là 3s ý ạ có ổn không anh hihi , được anh tl thì thật tuyệt ạ :3

[@top_1_florentino]

lâu rồi chắc a ko để ý đâu ông phát hiện thì ông xử lý cho ông là đc rồi.

[@dangvangiangk16_hl17]

e cảm ơn anh ạ, video hay lắm ạ

[@boyhotkey96]

lỗi ở 33'26 fix ngắn gọn hơn video bằng dòng lệnh if như này có ổn không nhỉ main.appendChild(toast); setTimeout(() => { if (main.appendChild(toast)) { main.removeChild(toast); } }, duration + 1000);

bác thử thêm return vào đoạn if xem sao, em thấy nó nhanh và ngăn luôn thằng setTimeout chạy. if (e.target.closest('.toast__close') { return main.removeChild(toast); }

[@HoangTran-co1zu]

anh ơi, anh dạy hay lắm, nhưng e góp ý xíu, video nào a cx show toàn bộ code từ đầu thì ok hơn, thí dụ như video này a chỉ show từ dòng 70 trờ đi, e ko làm đc trong code ạ

[@trinhnguyen6537]

Chung ý kiến 🥲🥲

[@minhhuy3316]

cái đoạn code trên đó là code cái button, ở bài trước mà ?

[@quynguyencanh703]

@@minhhuy3316 nhưng bài trước là bài optionl chaining mà.

[@vuathietbi]

admin làm quả ví dụ đúng kiểu dạy 1+1 = 2 xong ví dụ làm toán tích phân, loanh quanh theo được 1-2 phút đầu xong lơ nga lơ ngơ.

[@F8VNOfficial]

Bạn ở đâu tới đây nhỉ? Bạn học kiểu xem 1-2 videos rồi bình luận hay đã học hết 1-2 khoá tại đây rồi vậy?

[@haophan2k]

@@F8VNOfficial bạn nói có phần đúng mà anh nếu ai học css html trước không biết gì về js nhảy vào bài này là ngán liền

[@F8VNOfficial]

@@haophan2k Nó là do cách nghĩ của các bạn thôi. Nếu các em không biết thì có thể học phần BEM và bỏ qua phần sau mà, khi nào học Javascript có thể xem lại sau. Mình phải tùy cơ ứng biến chứ, "Cái khó ló cái khôn" chứ. Cứ gặp khó là ngán thì làm được cái gì nữa? Mô tả trong video cũng không đọc luôn.

[@XuanNguyenKorea]

@@F8VNOfficial Bạn ơi, video bạn làm hay và có tâm lắm, mình đang học theo video của bạn. Nhưng bài này bạn sử dụng css của ví dụ trước nối vào bài này nên nhiều cái mình k hiểu và chỉnh sửa mãi không đươc, mình học video này hơn 1 ngày rồi vẫn vướng chỗ css chung của cái BEM hôm trước, mình chưa học hết video mà thấy ngán thật, nhưng k có nghĩa là mình nản và k làm được gì, chỉ mong bạn làm ví dụ thì tách css từng phần ra thì dễ hiểu hơn, bạn rành mọi thứ rồi nên nhìn đâu hiểu đó, chứ người mới học như mình thấy rối lắm, mình đang học theo video của bạn đó. Thank you!

[@huynhmylinh7104]

bài này khó vãi luôn, anh giảng hay quá ạ, cảm ơn anh nhiều >3

[@kayzxjee]

a cho em hỏi js trong bài này là mình phải học ở khoá JS riêng đk ạ ? tại trên trang f8 em chỉ mới đến phần 8. Đối chiếu với bên youtube thì thấy phần BEM này tận cuối khoá

[@HiepNguyen-rq7rj]

anh có thể làm mà code trong video giống hệt với video đc không kiểu nhìn hơi loạn

[@annc19324]

làm sao để thực hiện những thao tác nhanh bằng phím tắt vậy ạ

[@nguyenvanthanh5237]

anh ơi những phần anh chọn phần tử và tạo class nhanh thì key word là gì vậy ạ , em tìm mà không thấy có

[@Hieu-if1bf]

cái đấy là js kết hợp với css ko cần làm theo đâu tập trung vào html css là dc tạm bỏ sau quay lại

[@CuongNguyen-sx8in]

Chưa học js đến đây khựng luôn

[@vinhthai8498]

sao chỗ keyfame cái slideinleft e dùng ko đc mà e không biết vì sao không đc

[@anhtrantrunghoang5451]

a ơi a thao tác tổ hợp phím nào mà copy nhanh với nhiều vậy ạ

[@taovb2006]

Bước 1: Chọn cụm từ class=’ Bước 2: Tiếp theo nhấn phím tắt: Ctrl + D => RightArrow - “→” => Ctrl + Shift + RightArrow

[@TrinhThanhToai-DHTIAHN-]

phần này có js mà e vẫn chưa hk ạ , xem chưa hiểu lắm a

[@haiang6949]

đến bài này ngợp quá anh ơi, anh thao tác nhanh quá e k hiểu mấy, nhất là đến đoạn hàm :(((

[@nguyenxuanbac5435]

Ủa sao e code nó k ăn theo cái ${title} vs ${message} nhỉ😢

[@truonganhkhoa4673]

Bạn Sơn ơi khúc 3:11 mình dùng thủ thuật gì mà coppy nhanh vậy, xin chỉ giáo

[@nghienreview5904]

Ké😢

[@_PhamHoaiNam-qw4zj]

sao đoạn video này k có code phần css ạ

[@tranhongphi1159]

ah ơi xao em học đến bài 99 thì không đi tiếp được nữa ạ

[@CrystalTran-th6zo]

anh ơi, em làm theo nhưng box không ở giữa, em đã check hết các css. Không biết làm sai chỗ nào ạ?

[@linhnguyenquoc3517]

Cho em hỏi, làm sao để bấm chuột và sửa nhiều vị trí giống nhau cùng 1 lúc, hoặc bôi đen nhiều vị trí giống nhau 1 lúc để coppy giống như anh đã làm trong video

[@F8VNOfficial]

Em tìm từ khoá: Multiple cursor vs code nha em

[@datnikon]

7:33 làm sao để cóp chung được những thứ như vậy thế anh nhỉ? Phím tắt là gì anh?

[@phiduong6008]

ctrl+d

[@trantuan6892]

ctrl + d xong ctrl + shift + mũi tên sang phải

[@tienvo9790]

hay quá anh, từ phần Js em làm theo y chang mà ko hiểu sao ko chạy dc, hay là em xài Sublime Text nên khác với VS code nhỉ?? anyway, chắc để học js xong quay lại video này

[@nguyenthanhbinh9598]

anh ơi .toast là thẻ div mà sao chiều ngang nó chiếm full màn hình ạ

[@daothingiang]

Mọi người ơi! Còn ai qua đây cho em hỏi sao em gắn link icon vào rồi nhưng không thấy hiện icon trong web vậy ạ?

[@ttduytrinh5830]

gửi đoạn code lên cmt này luôn e

[@vietnamnguyen7531]

anh cho e hỏi .toast + .toast nghĩa là sao hả anh? Anh có thể ví dụ được không ạ?

[@mark-alice]

nghĩa là tất cả các class .toast nào mà trước đó cũng là 1 class toast thì sẽ được áp dụng css trong đó

[@TheKing-tt6dg]

bạn không xem kĩ mấy phần trước à [ .toast + .toast { ... }] ví dụ như margin-left : 10px; thì nó sẽ cách đều các toast ra 1 khoảng đều nhau là 20px về bên trái áp dụng cho tất cả các toast

[@MinhNguyen-wc4xs]

Trong đoạn javascript, anh có thể giải thích việc anh dùng const mà k dùng let, var không ạ

[@F8VNOfficial]

Const dùng khi ko có nhu cầu gán lại giá trị, let dùng khi cần gán lại giá trị biến (vì const không làm đc vậy), var ngày nay không dùng nữa em nhé

[@c63coding]

Bạn, anh/chị nào biết hotkeys của a Sơn k chỉ với ạ. Chẳng hạn như 3:10 ,, 26:09. Tks mn nhiều

[@ThanhNguyen-tj9pw]

ctrl + D, hoặc ctrl shift + l nha

[@thetannguyen9389]

ở 3:13, sau khi crtl D hết, anh gõ tổ hợp phím nào để nó chọn hết vậy ạ ?

[@leminhloi2805]

Sau khi bạn trỏ chuột ở đầu mỗi từ, bạn tiếp tục bấm Ctrl + D là được á :))

[@Hà2222-r4g]

@@leminhloi2805 xong rồi mk làm sao để viết đc chữa toast__ vậy ạ??

[@kienhao9674]

Ctrl + Shift + Mũi tên phải nhé bạn.

[@vietnguyenhuu7945]

Đoạn đầu còn hiểu nhưng lúc sao bị lú rồi. Do mình dở hay là bài này nó khó vậy ta cảm thấy hoang mang.

[@dinhdocr7862]

Anh Sơn ơi, toast.innerHTML của Em khi E cho một chỗi vào thì nó báo lỗi là -->JSX expressions must have one parent element.javascript vậy Anh, mong Anh trả lời E ạ

[@nguyenhoangson5619]

mình cũng bị bạn tìm ra chưa giúp mình với

[@HaiangVuHoang]

làm sao để căn giữa web vậy ạ?

[@leoanh5360]

Ai da,hoc xong js roi quay lai 15' vay bai nay dinh lam anh Son oi

[@n7.levankien389]

Hay quá a zai ơi

[@truonghoanglong541]

22:55 dùng clasList.add thêm css animation để cho toast nó chạy vô nhanh hơn chứ nhỉ. làm như này hơi mất time. em góp ý thôi ạ

[@F8VNOfficial]

Em làm hẳn cái ví dụ trên codepen hoặc jsfiddle.net/ rồi comment vào đây cho anh em khác tham khảo đi e

[@tamngo2862]

Qúa hay a ơi!

[@dungg2038]

bài này lại phải học 1 tuần rôi

[@RealFootball_01]

anh cho em hỏi cách gõ nhanh với ạ

[@vanbap]

Chỗ function toast ( { ... } ) là cú pháp của loại gì vậy nhỉ ??? Không phải object bình thường cx như function @@ Mình cảm ơn !

[@QuangNguyen-vy5jr]

cái này tạo hàm truyền vào biến là Object thôi bạn ơi, như hàm bt thường nhưng biến ở đây là object

[@maidinhthang]

ủa anh ơi,làm thế nào mà anh gõ được nhiều dòng cùng lúc đó ạ

[@haophanduy8230]

Nhấn giữ phím Alt rồi nháy chuột vào những chỗ cần viết...rồi thả cả cả ra và viêtd thôi

[@phanbaohoangphan910]

ai đó cho em hỏi phải install cái gì nữa ko mà visual code của em không làm được cái( .toast + .toast {} )

[@Kitsuchi4444]

Thanks for tutorial

[@longthanhvu8415]

Đùng một cái làm một bài khó quá anh

[@A2K37THPTTANHLINH]

dòng thứ 5 là gì thế a

[@phuvan1518]

cho em xin mấy cái tên extention của anh cái ạ =))

[@nhiennhienan7385]

anh ơi. A làm thế nào để cop được cùng lúc nhiều tên class đấy ạ.

[@buiminhuc6607]

ctrl + shift + ->

[@hoaimiqng]

Hay quá anh ạ

[@buiquocbao1967]

a ơi, a căn giữa cả trang kiểu j v ạ, em tha thiết cần

[@F8VNOfficial]

Em cho body cao 100vh rồi dùng thêm display: flex; align-items: center; justify-content: center; nhé.

[@MinhTran-kb5rj]

nhấn nút nào đẻ thẻ chạy ra chỗ 14:00 vậy mng

[@congle6538]

Mọi người cho mình hỏi chỗ innerHTML ấy, khi gán thẻ html vào giữa '__' thì em không xuống hàng được như video hướng dẫn, có cách nào khắc phục không ạ?

[@eCircuit-Code]

cũng đang bị vậy

Hi anh, Khi để nó tự mất. "fadeOut linear 1s ${delay}s forwards" Thì tại vị trí đó nó vẫn ở đó, và nó che mất các thành phần bên dưới nó a ạ.

[@F8VNOfficial]

Xong mình remove nó đi mà e ơii

[@thongvan6596]

sao em làm vậy không ra icons ạ

[@nakrothlegend97]

anh ơi... sao em copy 2 cái icon như anh mà nó ko hiện lên trên trang web vậy ạ

[@tramdungchanso1]

Nhúng link icon vào chưa bạn

[@nakrothlegend97]

@@tramdungchanso1 mình copy bỏ dô html rồi í bn

[@khangnguyen6547]

sau này đi làm là bắc buộc phải đặt class chuẩn bem phải k ạ, hay tùy vào chỗ làm

[@mmo-xuan]

mình viết ở trong sass xong rồi biên dịch ra css

[@laptrinhfullstack]

hay quá ad ơi

[@buiquocbao1967]

anh chỉ cách căn cho nó giữa trang đi anh

[@vanlongoan1454]

Muốn làm thông báo kiểu như này mà realtime (crud với api) trên front hiện tb thì nên tìm hiểu gì anh. Anh có thể làm 1 bài HD đc ko

[@ntctn658]

socket.io bác ơi

[@eCircuit-Code]

phím tắt trong này mình dùng tổ hợp phím nào vậy moi người

[@hieuang7340]

ctrl + D á bạn

[@flowersun9045]

rồi luôn viết theo chứ javascript chưa học :))))

[@quangcaovan4544]

keyframe sao k chạy nhỉ :(( mn biết cách khắc phục không ạ

[@-ThaiThanhQuan-A]

anh làm sao mà chỉnh code trong html với css không cần save mà vẫn thay đổi bên trang wed v anh

[@kirito16177]

Cài tự động save ạ

[@-ThaiThanhQuan-A]

@@kirito16177 cài sao v bạn

[@puongnguyen4073]

cái icon làm sao chèn zo z mn

[@caominhdev]

thêm vào giỏ hàng :D

[@nguyenthanhhung4089]

hay v~ anh ơi. với con gà như em thì thế này rất hay :v

[@giangnguyenthanh8642]

có cần học trước script gì r mới học k mọi người . chứ từ video từ playlist tới này đâu có p nào nói về cái script này đâu nhỉ

[@ducnguyendanh2700]

lú luôn