├── README.md
└── Matching Card Game
    ├── style.css
    ├── cards.js
    └── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Card_Matching_Game
 2 | User selects to 2 cards that match
 3 | 
 4 | ## How It's Made:
 5 | 
 6 | **Tech used:** HTML, CSS, JavaScript
 7 | 
 8 | 
 9 | ## Optimizations
10 | 
11 | - Enhance UX
12 | 
13 | 
14 | ## Examples:
15 | Other examples from my portfolio:
16 | 
17 | **BTC Price Prediction:** https://github.com/vhparadajr/Express_BTC_app
18 | 
19 | **Nasa API Interface:** https://github.com/vhparadajr/Nasa
20 | 


--------------------------------------------------------------------------------
/Matching Card Game/style.css:
--------------------------------------------------------------------------------
 1 | .container{
 2 |   border:1px solid white;
 3 |   width: 100%;
 4 |   height: 700px;
 5 | }
 6 | 
 7 | .card{
 8 |   border:1px solid white;
 9 |   width: 19%;
10 |   height: 150px;
11 |   float: left;
12 |   margin-left:10px;
13 | }
14 | 
15 | 
16 | .skyBlue.selected, .skyBlue.matched{
17 |   background: skyblue;
18 | }
19 | .red.selected, .red.matched{
20 |   background: red;
21 | }
22 | .pink.selected, .pink.matched{
23 |   background: pink;
24 | }
25 | .plum.selected, .plum.matched{
26 |   background: plum;
27 | }
28 | .yellow.selected, .yellow.matched{
29 |   background: yellow;
30 | }
31 | .limegreen.selected, .limegreen.matched{
32 |   background: limegreen;
33 | }
34 | .darkorange.selected, .darkorange.matched{
35 |   background: darkorange;
36 | }
37 | .darkmagenta.selected, .darkmagenta.matched{
38 |   background: darkmagenta;
39 | }
40 | .indigo.selected, .indigo.matched{
41 |   background: indigo;
42 | }
43 | .turquoise.selected, .turquoise.matched{
44 |   background: turquoise;
45 | }
46 | 
47 | 
48 | 
49 | 
50 | 
51 | h1{
52 |   text-align: center;
53 |   color:white;
54 | }
55 | html{
56 |   background-color: black;
57 |   font-family: sans-serif;
58 | }
59 | 


--------------------------------------------------------------------------------
/Matching Card Game/cards.js:
--------------------------------------------------------------------------------
 1 | //click on card
 2 | //add selected
 3 | //if two cards have selected - see if they are a match
 4 | //if they are a match add match class and remove select, so you can keep selecting
 5 | 
 6 | var tempArray = ['red','skyBlue','limegreen','darkorange', 'yellow','darkmagenta','limegreen','indigo','turquoise', 'plum', 'pink', 'red','skyBlue', 'plum', 'pink', 'yellow', 'darkorange','darkmagenta','indigo','turquoise']
 7 | 
 8 | 
 9 | Array.prototype.shuffle = function() {
10 |     var input = tempArray;
11 | 
12 |     for (var i = input.length-1; i >=0; i--) {
13 | 
14 |         var randomIndex = Math.floor(Math.random()*(i+1));
15 |         var itemAtIndex = input[randomIndex];
16 | 
17 |         input[randomIndex] = input[i];
18 |         input[i] = itemAtIndex;
19 |     }
20 |     return console.log(tempArray)
21 | }
22 | tempArray.shuffle();
23 | 
24 | var cards = document.getElementsByClassName("card");
25 | 
26 | for(let i = 0; i < cards.length; i++){
27 |   cards[i].addEventListener("click",function(){
28 |       cards[i].classList.add(tempArray[i]);
29 |   });
30 | }
31 | 
32 | const game = {
33 |   checkIfMatch: function(){
34 |     if( $('.selected').eq(0).attr('class') ==  $('.selected').eq(1).attr('class') ){
35 |       $('.selected').addClass('matched').removeClass('selected')
36 |     }else{
37 |       $('.selected').removeClass('selected')
38 |     }
39 |   },
40 |   checkEnd: function(){
41 |     if( $('.card').length == $('.matched').length ){
42 |       alert('GAME OVER')
43 |     }
44 |   }
45 | }
46 | $('.card').on('click', function(){
47 |   $(this).toggleClass('selected')
48 |   if($('.selected').length == 2){
49 |     game.checkIfMatch()
50 |   }
51 |   game.checkEnd()
52 | });
53 | 


--------------------------------------------------------------------------------
/Matching Card Game/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <!-- //MORNING CHALLENGE: Make a 10 card memory game - users must be able to select two cards and check if they are a match. If they are a match, they stay flipped. If not, they flip back over. Game is done when all cards are matched and flipped over
 4 | //Bonus - add shuffling of the cards (find a shuffling algorithm online) at the start of the game
 5 | 
 6 | There should be 5 pairs of matching cards
 7 | User flips 1 card and then another - if they match those cards stay flipped over
 8 | If not they flip back over -->
 9 | 
10 | <html lang="en" dir="ltr">
11 |   <head>
12 |     <meta charset="utf-8">
13 |     <title></title>
14 |     <meta name="viewport" content="width=device-width, initial-scale=1">
15 |     <link rel="stylesheet" href="style.css">
16 |     <title>Matching game</title>
17 | 
18 |     <!-- external CSS link -->
19 |     <!-- <link rel="stylesheet" href="css/normalize.css"> -->
20 | 
21 |   </head>
22 |   <body>
23 | 
24 |     <header>
25 |       <h1>Matching Card Game</h1>
26 |     </header>
27 | 
28 |     <section class="container">
29 |       <section class="card"></section>
30 |       <section class="card"></section>
31 |       <section class="card"></section>
32 |       <section class="card"></section>
33 |       <section class="card"></section>
34 |       <section class="card"></section>
35 |       <section class="card"></section>
36 |       <section class="card"></section>
37 |       <section class="card"></section>
38 |       <section class="card"></section>
39 |       <section class="card"></section>
40 |       <section class="card"></section>
41 |       <section class="card"></section>
42 |       <section class="card"></section>
43 |       <section class="card"></section>
44 |       <section class="card"></section>
45 |       <section class="card"></section>
46 |       <section class="card"></section>
47 |       <section class="card"></section>
48 |       <section class="card"></section>
49 |     </section>
50 | 
51 | 
52 | 
53 | 
54 |     <footer>
55 | 
56 |     </footer>
57 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
58 |   <script type="text/javascript" src="cards.js"></script>
59 |   </body>
60 |   </html>
61 | 


--------------------------------------------------------------------------------