Тёмный

Build A Memory Card Game in HTML CSS & JavaScript 

CodingNepal
Подписаться 223 тыс.
Просмотров 65 тыс.
50% 1

Build A Memory Card Game in HTML CSS & JavaScript | Pairs Card Game in JavaScript
In this video, I have shown you how to Build A Memory Card Game in HTML CSS & JavaScript. In the video, I have shown you the two demos of this game. In demo 1, there are 16 cards where every two cards have the same images, but each card is placed randomly, and you have to find them. There is no time limit to find the pairs of cards.
In demo 2, everything is the same as in demo 1, but there is a time limit of 30 seconds, and you have to find the pair of cards in this given time. I hope you liked this game. If you liked it, let me know in the comment section.
Live Demo of this Memory Card Game (Demo: 1)
➤ codingnepalweb.com/demos/memo...
Live Demo of this Memory Card Game (Demo: 2)
➤ codingnepalweb.com/demos/memo...
Download Images of this Game - drive.google.com/file/d/1LABG...
Download Code Files From Here - codingnepalweb.com/demos/memo...
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Ikson - Anywhere [Official]
• #66 Anywhere (Official)
Something 'bout July (Instrumental) by RYYZN
• Something 'bout July (...
Deep Sea by Vendredi
• Deep Sea - Vendredi (N...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
Images used in the game are provided by FlatIcon
www.flaticon.com/free-icons/gems

Опубликовано:

 

21 янв 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 140   
@CodingNepal
@CodingNepal 2 года назад
Don't forget to check out the live demo of this game. Link is in the description!
@SatyamYadav04
@SatyamYadav04 9 месяцев назад
brother what is code for the game with timer
@codingwithkenny6492
@codingwithkenny6492 2 года назад
This is absolutely amazing sir! I learned a lot from it and was very inspiring indeed. Awesome project, best one yet!
@CodingNepal
@CodingNepal 2 года назад
Glad you enjoyed it!
@waltdisney-tz8ef
@waltdisney-tz8ef 10 месяцев назад
I LOVE YOUR PROJECTS VERY MUCH, THANKS TO YOU!🔥
@ohissamuel
@ohissamuel 2 года назад
This is really good The Javascript codes are self-explanatory
@lymmentrixprofessional
@lymmentrixprofessional 8 месяцев назад
This is the best I have ever coded , thanks a lot
@Sara_lm
@Sara_lm Год назад
Wow, wow, wow this is brilliant! I’m an amazed your work! This is incredible! No comment further , subscribed your channel!
@CodingNepal
@CodingNepal Год назад
Thank you so much 😀
@coder_neha
@coder_neha 10 месяцев назад
Thank you for posting such a amazing project
@sherryab3964
@sherryab3964 Год назад
Finally, a proper Vanilla VS game that if mobile responsive! Thank-you!
@_reomn7036
@_reomn7036 2 года назад
Esse cara é muito bom, não perco nenhum vídeo, um abraço do Brasil 🇧🇷
@CodingNepal
@CodingNepal 2 года назад
Happy to hear that.. Keep watching
@_reomn7036
@_reomn7036 2 года назад
@@CodingNepal 4ever ♥️
@nobodyknows6867
@nobodyknows6867 2 года назад
You are so good!! Keep going!!
@reallife1482
@reallife1482 Год назад
Absolutely brilliant
@mostafashahat9760
@mostafashahat9760 2 года назад
Nice work, please make Demo 2 tuturial...Thx
@WillSmith-qt7me
@WillSmith-qt7me 2 года назад
What a great project you have here
@TECHWITHKAMALRAJ
@TECHWITHKAMALRAJ 4 месяца назад
Amazing projects and what a logic ❤
@minimumviablepizza
@minimumviablepizza 9 месяцев назад
A couple of the earlier steps were not working as expected for me. I saw gems on both sides of the cards until around the 10min mark when 'backface-visibility: hidden;' is added then it worked as expected. If you are having early issues it may not be a bug. Great tutorial though and great game to learn from. 👏
@aidanbenbow6682
@aidanbenbow6682 3 месяца назад
The same expect that after the css I now have a long line of cards that are flipping rather than a grid.
@user-dr3cg6yk8w
@user-dr3cg6yk8w Год назад
Thank you for make this video!
@codeWithRoss
@codeWithRoss 2 года назад
This is a beautiful little game you have made!
@CodingNepal
@CodingNepal 2 года назад
Thanks and don't forget to check live demo. Link is in the description.
@horndoctech9914
@horndoctech9914 2 года назад
Amazing 😊
@LuisMedina-dk3vc
@LuisMedina-dk3vc 3 месяца назад
Awesome!
@memeindia2411
@memeindia2411 2 года назад
You are awesome man!! 😊
@CodingNepal
@CodingNepal 2 года назад
Thank you :)
@shraddhadeshmukh5810
@shraddhadeshmukh5810 2 года назад
Grt Man !!
@rajbannasa7662
@rajbannasa7662 2 года назад
That was soo awesome sir , thank you so much sir ❤️
@CodingNepal
@CodingNepal 2 года назад
You're most welcome
@lifeisbeautifu1
@lifeisbeautifu1 2 года назад
Wow. This looks amazing. I'll try recreate this game in React :)
@CodingNepal
@CodingNepal 2 года назад
Thank you and best of luck :)
@hackeditz2.0
@hackeditz2.0 2 года назад
Finally I found a game in your channel after a long time☺️☺️🤗
@CodingNepal
@CodingNepal 2 года назад
Hope you liked it
@comptech8532
@comptech8532 2 года назад
No words , just subscribed!!!!
@CodingNepal
@CodingNepal 2 года назад
Many many thanks to you
@CrazyCodingChannel
@CrazyCodingChannel 2 года назад
I've never seen anything like this. Cool!
@CodingNepal
@CodingNepal 2 года назад
Happy to hear that!
@CreativeTutorialsWeb
@CreativeTutorialsWeb 2 года назад
Superb one Sir this is beyond amazing
@CodingNepal
@CodingNepal 2 года назад
Many many thanks to you
@Ahm3dAshour
@Ahm3dAshour 2 года назад
Keeping going
@jeenitprajapati3449
@jeenitprajapati3449 2 года назад
We want second demo also
@shintaeroo9962
@shintaeroo9962 2 года назад
wow it is really what I want! Thank you!
@CodingNepal
@CodingNepal 2 года назад
Glad you like it!
@OrgilsYTChannel
@OrgilsYTChannel 2 года назад
Nice tutorial
@warrobots4010
@warrobots4010 2 года назад
Well don 👍
@jeenitprajapati3449
@jeenitprajapati3449 2 года назад
Superb Game made with your great hardwork
@CodingNepal
@CodingNepal 2 года назад
My pleasure :)
@shintaeroo9962
@shintaeroo9962 2 года назад
Oh I really want demo 2.
@to_serveMyNation
@to_serveMyNation Год назад
Fantastic project so many things to learn
@CodingNepal
@CodingNepal Год назад
Yes, thank you
@rubengarcia5460
@rubengarcia5460 2 года назад
Just great, good work. Waiting for v2.0.
@raghunathpatil7154
@raghunathpatil7154 Год назад
Hello coding nepal these video is amazing for development game in short time i have use these video for making my project and it was soo helpful for me but my request is can u provide video link or code for demo 2 please
@ohissamuel
@ohissamuel 2 года назад
We need demo 2 🙏
@linusyong4731
@linusyong4731 2 года назад
Where's the question mark image? Please give us the image. Love your work by the way! Very impressive and cool and creative.
@CodingNepal
@CodingNepal 2 года назад
Please, download the source codes file to get all files and images - www.codingnepalweb.com/build-memory-card-game-html-javascript/
@Abhicoder
@Abhicoder 2 года назад
Amazing 😀!
@CodingNepal
@CodingNepal 2 года назад
Thanks! 😄
@Abhi_Abhishek_
@Abhi_Abhishek_ 2 года назад
Nice part 2 plss
@devmaroc7979
@devmaroc7979 2 года назад
Keep going 💫❣
@CodingNepal
@CodingNepal 2 года назад
Sure
@baptistegourgouillon7895
@baptistegourgouillon7895 2 года назад
Hello, thanks for the tutorial. I found the notation "function flipCard({target: clickedCard}) {" quite puzzling. You went from "let clickedCard = e.target" to an object you're destructuring in your function. But I have a question : where is the variable definition, and the "e" of the event in your function parameter ? this notation is so concise that it's a bit complex...
@xeedreen2120
@xeedreen2120 Год назад
+++, я тоже этот момент не понял
@AashutoshBansal
@AashutoshBansal 2 года назад
I liked demo 2 man 😌
@CodingNepal
@CodingNepal 2 года назад
Great and don't forget to check live demo - codingnepalweb.com/demos/memory-card-game-with-timer-javascript/
@AashutoshBansal
@AashutoshBansal 2 года назад
@@CodingNepal bro already checked ✅ Thanks
@bcreative-findyourselfinde7505
@bcreative-findyourselfinde7505 2 года назад
If you add your voice with the projects it would be easy to understand. Thank You.
@codingbatch764
@codingbatch764 2 года назад
Woow!! Nice work mn Which app do you use to make that thumbnail on your ytb channel?
@CodingNepal
@CodingNepal 2 года назад
I use Adobe XD
@codingbatch764
@codingbatch764 2 года назад
Thanks bro!! Is that the one you use on your ytb video?
@64_bit_coding
@64_bit_coding 2 года назад
Cool
@to_serveMyNation
@to_serveMyNation Год назад
Please upload demo 2 please
@amazingcrochetandgospel1
@amazingcrochetandgospel1 Год назад
I give it a thunbs up but i can meet demo 2 of the video?
@yubiroaster6285
@yubiroaster6285 2 года назад
Big fan sir 🇳🇵.... Please reply 🙏🥺
@CodingNepal
@CodingNepal 2 года назад
Okay
@Blend-tv
@Blend-tv 2 года назад
Nice even I did this same one
@CodingNepal
@CodingNepal 2 года назад
Great and hope you like it
@Blend-tv
@Blend-tv 2 года назад
Can you make a tutorial on how to make a video conference website tutorial?
@azyzdarraji7554
@azyzdarraji7554 2 года назад
done :D
@user-fp2sy5rl9p
@user-fp2sy5rl9p 9 месяцев назад
I downloaded the images from the link but by default they are so big. Is there any reason why they are not the same size as in the video?
@amritontop
@amritontop 2 года назад
Cool game!
@CodingNepal
@CodingNepal 2 года назад
Thanks!
@aram_monch2380
@aram_monch2380 2 года назад
👌
@JohnnySalah-fu1kn
@JohnnySalah-fu1kn 2 года назад
it's not working when we add preserve 3d in css , I tried 3 times and I don't get any results? 😕
@CodingNepal
@CodingNepal 2 года назад
Please, check the codes. Link is in the description.
@horndoctech9914
@horndoctech9914 2 года назад
Please make the videos tutorial programming php mysql ajax .
@CodingNepal
@CodingNepal 2 года назад
Okay, I'll try
@Sridhar0346
@Sridhar0346 Год назад
its woring up to Position Absolute but when i give relative its its not working only backgroup image rotating
@Everson2958
@Everson2958 2 года назад
Faz a lógica novamente utilizando o vue.js
@6-s884
@6-s884 2 года назад
Hey bro first of all thank you for this amazing Masterpiece, am facing problem in demo 2, when i replace the images with mine it doesn't appear on website
@CodingNepal
@CodingNepal 2 года назад
Is your images name are same as mine..? Remember, you can replace my images with yours but images name should be same as mine.
@6-s884
@6-s884 2 года назад
@@CodingNepal thanks sir 💗 solved.
@yongxiangfoo1086
@yongxiangfoo1086 2 года назад
Hellp bro, can you make a tutorial about how to keep api key securely
@CodingNepal
@CodingNepal 2 года назад
If you're using nodejs, you can put your all secret keys in the dotenv file
@nitujha4884
@nitujha4884 2 года назад
Plz add voice to your videos. It will be much better
@lakshmipriyankaimadabattin3734
@lakshmipriyankaimadabattin3734 2 года назад
Can you make responsive page to sharable web page..... I mean can you shown web hosting
@walkwithkeon
@walkwithkeon 2 года назад
your videos are amazing but why don't you add voice over so we can know what you're doing and why?
@CodingNepal
@CodingNepal 2 года назад
I'll try to add voice in my upcoming videos
@phonedr.1013
@phonedr.1013 2 года назад
@@CodingNepal it's okay! i think totally fine! a new style lol
@TanZero100
@TanZero100 2 года назад
i really want you to record audio also please
@nadevnimnath7021
@nadevnimnath7021 2 года назад
Can I use this for official purposes?
@CodingNepal
@CodingNepal 2 года назад
Yes, you can use it!
@markovranjes1428
@markovranjes1428 2 года назад
Why can't I upload my photos in the html file? I just put my pictures in the folder and in the HTML changed the names of the pictures from yours to mine and it still doesn't work. Please help, appreciate it. :)
@CodingNepal
@CodingNepal 2 года назад
You can put your own images but, you've to put all images name same as mine and also folder name must be images. This is because in JS file, I've given this path near line.no 64
@himanshusandilya9520
@himanshusandilya9520 2 года назад
hello, I am new to web development... Plz suggest me a source code editor !
@arefam1301
@arefam1301 2 года назад
Demo 2 ???
@AnkitRaj-fp7cm
@AnkitRaj-fp7cm 2 года назад
2nd ones code is there there, can you please help me
@CodingNepal
@CodingNepal 2 года назад
Yes, you can download from the description link.
@Pankajsingh-ej8qk
@Pankajsingh-ej8qk Год назад
one suggestion instead of putting the background music try to voice over and make things clear while making or creating a project step by step
@sohelrana9403
@sohelrana9403 2 года назад
Without voice and face apka channel monetization hua hain kea?
@prithvichoudhary7449
@prithvichoudhary7449 2 года назад
When you revel your voice
@SatyamYadav04
@SatyamYadav04 9 месяцев назад
what is code for game with timer
@lymmentrixprofessional
@lymmentrixprofessional 8 месяцев назад
Demo 2
@sakshipagariya2416
@sakshipagariya2416 Год назад
hello sir, I'm from India . I had one query, your website is not showing up all of sudden idk why ,I tried all possible ways but didn't work.
@CodingNepal
@CodingNepal Год назад
It's working now.. Please visit again!
@dubfy
@dubfy Год назад
@@CodingNepal Hello. Can you tell me how to make it so that in version 2, when the time 0s ends, it is highlighted in red?
@AnjuGupta-jy6lj
@AnjuGupta-jy6lj 2 года назад
Bro I want demo 2 code
@CodingNepal
@CodingNepal 2 года назад
Source codes will be available on my website soon - www.codingnepalweb.com/
@tejasHasaan
@tejasHasaan 2 года назад
Can u make candy crush like game?
@CodingNepal
@CodingNepal 2 года назад
I'll try it
@tejasHasaan
@tejasHasaan 2 года назад
@@CodingNepal Yesterday I built memory card website. It's truly amazing.
@CodingNepal
@CodingNepal 2 года назад
@@tejasHasaan Great and I've also provided the source files link of this game in the video description.
@tejasHasaan
@tejasHasaan 2 года назад
@@CodingNepal thank u bro
@muhammadapriyansyah6655
@muhammadapriyansyah6655 2 года назад
how to give time for example, given 1 minute then game over
@CodingNepal
@CodingNepal 2 года назад
Could you explain more..?
@ilovejesus.100
@ilovejesus.100 Год назад
How to download files html
@programmingwithkartik4319
@programmingwithkartik4319 2 года назад
Good but bro but why so late video try to upload video regular week , you will lost your channel reach so try to upload videos
@dvthax
@dvthax 2 года назад
Pls make js game mad fish or moto x3m 🥺
@CodingNepal
@CodingNepal 2 года назад
Okay
@dvthax
@dvthax 2 года назад
@@CodingNepal thanks
@daeralbra
@daeralbra Год назад
Why do you guys do not speak during the video?
@onepieceworld121
@onepieceworld121 Год назад
Its easier to understand this way
@ushasandeepjain9939
@ushasandeepjain9939 2 года назад
PLZ @CodingNepal I want Demo 2
@user-qt2gm1rm2z
@user-qt2gm1rm2z 2 года назад
how can i contact you
@CodingNepal
@CodingNepal 2 года назад
You can email me at contact@codingnepalweb.com
@user-qt2gm1rm2z
@user-qt2gm1rm2z 2 года назад
@@CodingNepal I sent you a message You just have to read it.
@shayanmahmood7480
@shayanmahmood7480 Год назад
he is awesome but he is not getting subscribers as he deserves
Далее
Gale Now VS Then Edit🥵 #brawlstars #shorts
00:15
Просмотров 930 тыс.
I Tested Every FREE Drawing App
22:15
Просмотров 145 тыс.
Memory Card Game - JavaScript Tutorial
34:16
Просмотров 178 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 913 тыс.
Build A Dictionary App in HTML CSS & JavaScript
34:28
Awesome Vanilla JavaScript Memory Card Game Tutorial
58:30
HTML, CSS, & JavaScript: Matching Game
30:16
Просмотров 2,7 тыс.