Behereonline - Tin tức vô cùng hay hấp dẫn bạn đọc
  • Home
  • Bất động sản
  • Công Nghệ
  • Máy Tính
  • Mẹo Vặt
  • Khác
    • Làm Đẹp
    • Giải Trí
    • Game
    • Thời Trang
    • Tổng Hợp
No Result
View All Result
  • Home
  • Bất động sản
  • Công Nghệ
  • Máy Tính
  • Mẹo Vặt
  • Khác
    • Làm Đẹp
    • Giải Trí
    • Game
    • Thời Trang
    • Tổng Hợp
No Result
View All Result
Behereonline - Tin tức vô cùng hay hấp dẫn bạn đọc
No Result
View All Result
Home Game

Memory Card Game – JavaScript Tutorial

admin by admin
July 13, 2020
in Game
29
Memory Card Game – JavaScript Tutorial



Learn the fundamentals of pure javascript by building a memory card game. No frameworks or libraries, just vanilla JavaScript.

This video will cover how to:
‣ select elements in the DOM with querySelector
‣ iterate through lists with forEach
‣ add/remove an element class
‣ add/remove event listeners
‣ timeout
‣ html5: data-attribute
‣ css3: positioning, flexbox, perspective, backface-visibility, transitions

🔗Demo:
💻Repo:
💻Finished files:

⭐️ Course Contents ⭐️
⌨️ (00:00) Intro
⌨️ (00:47) Basic Structure / Create the Project
⌨️ (03:53) Board HTML
⌨️ (07:13) Board Styles
⌨️ (12:41) Flip Card
⌨️ (15:53) 3d Effect / CSS3 Perspective
⌨️ (18:25) Store Cards
⌨️ (22:37) Match Cards
⌨️ (25:12) Refactoring
⌨️ (27:27) Lock Board
⌨️ (28:53) Card Double Click
⌨️ (31:04) Shuffling

🎥Tutorial by Code Sketch. Check out the Code Sketch channel for more great tutorials:

—

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

Nguồn: https://behereonline.com

Xem thêm bài viết khác:

Xem thêm Bài Viết:

  • Đây là những gì có thể làm sạch văn hóa esports độc hại
  • Đánh giá khách quan về nhà cái M8Win – Liệu có uy tín?
  • Cách đi săn ôm trọn thưởng trong Nổ hũ rừng rậm từ những tay lão luyện 
  • Hướng dẫn cách chơi game bắn cá đại chiến B52 cho tân thủ
  • Fa88 – Chơi trò chơi đánh bài trả thưởng trên trực tuyến làm gợi nhớ đến thời thơ ấu
Previous Post

Nâng cấp Touchpad MIỄN PHÍ | ThinkView Tối Ưu

Next Post

MINH CẢNH - NHỮNG TRÍCH ĐOẠN HAY ĐỂ ĐỜI • VỌNG CỔ TRƯA

Next Post
MINH CẢNH – NHỮNG TRÍCH ĐOẠN HAY ĐỂ ĐỜI • VỌNG CỔ TRƯA

MINH CẢNH - NHỮNG TRÍCH ĐOẠN HAY ĐỂ ĐỜI • VỌNG CỔ TRƯA

Comments 29

  1. Hust Boy says:
    2 years ago

    how to flip all the card @@ ?? please help !

    Reply
  2. Litukas says:
    2 years ago

    With inspect element I can see back-face card, anyone know how to fix it?

    Reply
  3. Mustafa Osama says:
    2 years ago

    We need a channel from you especially for the css.

    Reply
  4. Like TurTle says:
    2 years ago

    those booleans are so difficult….

    Reply
  5. Gabor Pfalzer says:
    2 years ago

    Fun little tutorial, learnt a lot. Absolute position example was gold, and also really liked the explanation of restructuring. Thank you!

    Reply
  6. Pierre Ci says:
    2 years ago

    Thanks for your help . I am french but you speak slowly and I understood a lot thanks to you

    Reply
  7. Can AKT says:
    2 years ago

    My brain is burningg. Such a good project and tutorial. Extremly hard tutorial and ı like it

    Reply
  8. Stuepp says:
    2 years ago

    Thanks for the video, I'm pretty noob in coding but I could learn a good amount, and this help with my studies, really thank you very much.

    Reply
  9. Alberto Rangel says:
    2 years ago

    More tutorials from this woman! Where is her YouTube channel!?!?!?!

    Reply
  10. M.D says:
    2 years ago

    Hi this is great but i have a question about the calculating the width of the memory card. she says you need to take the margin into consideration so why does she then take away 10px when the margin is set to 5px? thanks if anyone can help me on this I would greatly appreciate it!

    Reply
  11. tornado4ever MS says:
    2 years ago

    A newbie question for anyone willing to answer. At 14:21in the line 8th it says card => card.eventListener. Should it be cards => cards.eventListener. It works both ways. but it still confusing to me why we cab use card instead of cards?

    Reply
  12. Denmlak says:
    2 years ago

    Hi, thank you for tutorial. How did you make responsive? Did you use @media, beacuse i cant make responsive like you did.

    Reply
  13. Fabian Skala says:
    2 years ago

    i copied it 1:1 but i cant flip the cards over

    Reply
  14. SAVE MONEY says:
    2 years ago

    hi nice work please help me can you change this code into simple matching game for kids like A for Apple B For Ball without flipping animation 😀🙄🙄🙄

    Reply
  15. boi RCK says:
    2 years ago

    I didn't expect to be responding to her questions like im talking to Dora the explorer 🤣🤣🤣 good tuto tho

    Reply
  16. End One says:
    2 years ago

    Mindblown, guess I need to study basics.

    Reply
  17. franz seidenfuss says:
    2 years ago

    Thank you very much for that! Keep up the good work!

    Reply
  18. Aiyi Wu says:
    2 years ago

    Hello. I think that the left side of the screen is a code editor like Visual Studio Code, but what program is on the right side of the screen? How do you get that display?

    Reply
  19. DC - TLC says:
    2 years ago

    I was making this game without watching any tutorial and i was stuck at storing the cards in variables, thanks for the solution 👍

    Reply
  20. tinyone says:
    2 years ago

    I wish there was a "Love" button. This is the most concise and clear javascript tutorial I have seen. The animations were extremely helpful.

    Reply
  21. HOLLYWOOD says:
    2 years ago

    How to are you man ?

    Reply
  22. Avé-Maria Nlandou says:
    2 years ago

    I just love how she explains step by step what she's doing and why. More tutorials like this PLEASE!

    Reply
  23. Chris Adams says:
    2 years ago

    Brilliant expose!

    One of the strengths of this presentation is seeing Flexbox, CSS calc, box-sizing, transform and transition explained in a practical and non-verbose way.

    Reply
  24. Amin Sani says:
    2 years ago

    How to add "play again" for user to play from beginning?

    Reply
  25. LYNXX. says:
    2 years ago

    Gamecrook is the I think only authentic website for free coins and gems for free.

    Reply
  26. Manal Alkallas says:
    2 years ago

    Awesome. Thank you. 🙂

    Reply
  27. Amin Sani says:
    2 years ago

    How to show alert of "you win" after the game finished?

    Reply
  28. EF2000Typhoon7LWA says:
    2 years ago

    You have taught me more about CSS in 10 minutes than my professor in a whole semester.

    Reply
  29. Duncan says:
    2 years ago

    You do a great job of making this easy to understand. Thanks!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Tin mới

Tổng Hợp

Nam nữ sinh năm 2009 mệnh gì tuổi con gì

by rdom
September 9, 2022
Sinh năm 1984 tuổi gì? Tử vi tuổi Giáp Tý 1984
Tổng Hợp

Sinh năm 1984 tuổi gì? Tử vi tuổi Giáp Tý 1984

by rdom
August 11, 2022
Hình ảnh về Google Panda
Tổng Hợp

Google Panda là gì? Những đối tượng nào nên chú ý đến Google Panda?

by admin
May 3, 2021
Kinh nghiệm mua bán nhà đất Hoài Đức bạn cần biết
Bất động sản

Kinh nghiệm mua bán nhà đất Hoài Đức bạn cần biết

by admin
July 9, 2021
Sống tại làng cổ Hà Lan Ecopark – phóng khoáng, tiện nghi
Bất động sản

Sống tại làng cổ Hà Lan Ecopark – phóng khoáng, tiện nghi

by rdom
July 9, 2021
Lựa chọn túi trữ sữa tốt nhất với mức giá rẻ nhất với danhgiatot.vn
Tổng Hợp

Lựa chọn túi trữ sữa tốt nhất với mức giá rẻ nhất với danhgiatot.vn

by admin
February 7, 2021

Giới thiệu

Behereonline – Tin tức vô cùng hay hấp dẫn bạn đọc

Địa chỉ: Số 421 Trần Hưng Đạo, Khu phố Long An, Thị Trấn La Hai, Huyện Đồng Xuân, Tỉnh Phú Yên, Việt Nam

Email: phamhongviet75574@gmail.com

Ảnh hot

Màn hình Dell U2419H
Đăng ký sim chính chủ Vietnamobile để bảo vệ quyền lợi của người dùng
Đăng ký sim chính chủ Vietnamobile để bảo vệ quyền lợi của người dùng
Nên đăng ký sim chính chủ Vietnamobile ngay sau khi mua 
Nên đăng ký sim chính chủ Vietnamobile ngay sau khi mua 
Đăng ký sim chính chủ Vietnamobile chỉ trong vòng vài phút thực hiện
Đăng ký sim chính chủ Vietnamobile chỉ trong vòng vài phút thực hiện
cua-hang-sim-thang-long-22-o-cho-dua
Hình ảnh về Google Panda

Video

https://www.youtube.com/watch?v=0LOhqz0C5Zc
  • Behereonline – Tin tức vô cùng hay hấp dẫn bạn đọc
  • Chính Sách Bảo Mật
  • Home
  • Liên Hệ

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Home
  • Bất động sản
  • Công Nghệ
  • Máy Tính
  • Mẹo Vặt
  • Khác
    • Làm Đẹp
    • Giải Trí
    • Game
    • Thời Trang
    • Tổng Hợp

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.