Memory Card Game - JavaScript Tutorial

JavaScript / Web 184.2K צפיות 13/08/2018
פתח ב-YouTube

דרג סרטון זה

התחבר כדי לדרג

תיאור

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: https://marina-ferreira.github.io/memory-game/ 💻Repo: https://github.com/code-sketch/memory-game/ 💻Finished files: https://marina-ferreira.github.io/projects/js/memory-game/ ❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba) ⭐️ 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: https://www.youtube.com/channel/UCHFmShpjG-8N52O0JD2ut3A/ -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

#freeCodeCamp.org