Перейти к содержимому

Build a Brain Storming Memory Game with JavaScript, HTML, and CSS 🔥

Thapa Technical

0:00 / 0:00

Build a Brain Storming Memory Game with JavaScript, HTML, and CSS 🔥

20 592 просмотра · 3 г. назад
Thapa Technical
752 тыс. подписчиков
20 592 просмотра · 3 г. назад
Welcome, Flip, Match, and Win is a fun and challenging card memory game using HTML CSS & JAVASCRIPT that features a dynamic and interactive gameplay. With its CSS styles and flipping effect, it's an engaging game that will keep you entertained for hours. So, sharpen your memory skills and get ready to flip, match, and win! 👉 Video Source Code: https://www.thapatechnical.com/2023/0... 😊 Become Member, get access to perks, free Source code, & more..    / @thapatechnical   😍 Check my Instagram to Connect with me:   / thapatechnical   👩‍💻 Discord Server Link for Programmer to Hangout:   / discord   ==========TIMELINE=========== 0:00 - Introduction and explanation of the game 1:22 - Update on shuffling videos 3:50 - Overview of folder structure 4:20 - HTML code for the game 6:30 - Step 1: Creating a grid of cards with images on the back 9:45 - CSS styling for the grid 12:10 - Discussion and correction of mistakes made in the previous steps 16:20 - Step 2: Duplicating the grid to increase the number of cards 18:30 - Step 3: Randomizing the order of the cards 22:01 - Step 4: Adding a CSS class to show selected cards 27:10 - Step 5: Allowing only two cards to be selected per turn 29:05 - Step 6: Adding a CSS style to match the selected cards 38:01 - Step 7: Continuing the game until all matches are made 44:05 - Step 8: Adding a delay to show selected cards for a short period 45:35 - Step 9: Creating two sides for each card and styling them for a flipping effect 53:30 - Discussion of main changes needed for the game to work 55:40 - Review of the completed app. ************ 😍 Must Watch Videos For Web Development 😍 ************ ➡️ Complete Reactjs in One video here    • ReactJS For Beginners in One Video in Hind...   ➡️ HTML in One Video:    • Learn HTML in One Video in Hindi from scra...   ➡️ CSS in One video:    • Learn Complete CSS In One Video In Hindi   ➡️ CSS FlexBox in 30 Minutes:    • CSS FlexBox in 30 Minutes in Hindi 2022   ➡️ JavaScript in One video:    • JavaScript in One Video in Hindi   ➡️ ECMAScript 6 in One Video:    • ES5 & ES6 | ECMAScript 6 in One Video in H...   ➡️ HTML5 in one video:    • HTML5 Tutorial in One Video in Hindi 2019   ➡️ CSS3 in one video:    • Learn Complete CSS3 In One Video In HINDI ...   ➡️ Bootstrap4 in One video:    • Bootstrap 4 in One Video in HINDI  2019   ➡️ Jquery in One video:    • jQuery in One Video in Hindi 2019   ➡️ JSON in one video:    • JSON in One Video in Hindi 2018   ➡️ ReactJS in one video:    • ReactJS For Beginners in One Video in Hind...   ➡️ PHP in One Video:    • PHP TUTORIAL IN ONE VIDEO IN HINDI 2019   ➡️ NodeJS in one video:    / ipnwakoibt   ➡️ MySQL in one video:    • Complete SQL & MySQL in One Video in Hindi...   ➡️ Advanced JavaScript in Hindi Playlist:    • Advanced JavaScript Tutorial in Hindi 2020   ➡️ ES5 & ES6 | ECMAScript 6 in One Video in Hindi:    • ES5 & ES6 | ECMAScript 6 in One Video in H...   ➡️ JavaScript Game Development Series in 2020:    • JavaScript Game Development Hindi 2020