Skip to content

Card feature #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kunal2812 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Card feature #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51e0298
Card feature added
kunal2812 Oct 1, 2022
b01097e
Updated CONTRIBUTORS.md
kunal2812 Oct 1, 2022
acbc05e
Fixed few minor bugs
kunal2812 Oct 1, 2022
2187a7e
Resolved conflicts
kunal2812 Oct 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions CONTRIBUTORS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,16 @@
</a>
<br />
</td>
<td align="center">
<a href="https://github.com/kunal2812">
<img src="https://avatars.githubusercontent.com/u/59749539?v=4" width="100px;" alt="KK"/>
<br />
<sub>
<b>Kunal Katiyar </b>
</sub>
</a>
<br />
</td>
</tr>


Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h3 style="text-align:center">time:<span id="timer">0</span></h3>
<div class="memory-card" data-character="rengoku">
<img class="front-face" src="images/rengoku.png" alt="rengoku" />
<img class="back-face" src="images/cover.png" alt="card cover" />
</div>
</div>
<div class="memory-card" data-character="mask">
<img class="front-face" src="images/mask.png" alt="mask" />
<img class="back-face" src="images/cover.png" alt="card cover" />
Expand Down
44 changes: 33 additions & 11 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,44 @@ const cards = document.querySelectorAll('.memory-card')
const restartBtn = document.querySelector('#restart-btn')
const timer = document.querySelector('#timer')
let counter = 0;
let memoryCounter = 5;

//increasing the counter
// For modifying cards
const makeCardsClickable = setTimeout(function(){
cards.forEach(card=>{
card.addEventListener('click',flipCard); // Makes cards clickable after the timer expires
card.children[1].style.display="block"; // Hides them after the timer expires
})
},memoryCounter*1000);

// For timing the counters
const interval = setInterval(function(){
counter++;
console.log()
timer.innerHTML = "<b>" + counter + "</b>";
if(memoryCounter>0){ // Makes a check on memoryCounter and stops after 5 secs
memoryCounter--;
viewAllCards();
Copy link
Copy Markdown
Contributor

@dev-lovedeep dev-lovedeep Oct 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this viewAllCards function is called every time until the memory counter is zero, which is not good for performance. Add some conditions so that it do not run unnecessarily

timer.innerHTML = "<b>" + memoryCounter + "</b>"; // Changes inner HTML
}
else{ // Counter for timing the game
counter++; // This counter is set to motion only when the game starts i.e when memoryCounter expires
timer.innerHTML = "<b>" + counter + "</b>"; // Changes inner HTML
}
}, 1000);


// To view all cards
function viewAllCards(){
Copy link
Copy Markdown
Contributor

@dev-lovedeep dev-lovedeep Oct 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

showAllCards would be a better name

// Cards are made viewable when memoryCounter is greater than 0
if(memoryCounter>0){
Copy link
Copy Markdown
Contributor

@dev-lovedeep dev-lovedeep Oct 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this check should not be inside the function. To make a function reusable, it should do what its name suggests. Checks should be placed where the function is called.

for ex: if we add a hint button which show the all cards , then we can reuse this function, but if this check is there we cannot reuse it

cards.forEach(card=>{
card.children[1].style.display="none";
})
}
}


// When the game restarts all cards are made visible for 5secs
function restartGame(){
window.location.reload()
window.location.reload();
}

const flippedCards = []
Expand Down Expand Up @@ -59,9 +87,3 @@ function flipCard(e){
setTimeout(checkForMatch,0);
}
}

cards.forEach(card=>{
card.addEventListener('click',flipCard);
})