Skip to content
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

added a modal allowing the player to choose the level and a start gam… #21

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

added a modal allowing the player to choose the level and a start gam… #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ec148c7
added a modal allowing the player to choose the level and a start gam…
Oct 3, 2022
fea1808
made changes to css files
Oct 3, 2022
7cf40a1
timer starts when we choose the level
Oct 3, 2022
ab28af1
timer will only start when we choose a level and start button will be…
Oct 4, 2022
834eb60
changed the id name to start-btn
Oct 4, 2022
8d58653
Changed the anonymous function
Oct 4, 2022
baf485c
changed anpnymous function to game
Oct 5, 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/nematanya">
<img src="https://avatars.githubusercontent.com/nematanya" width="100px;" alt="Tanya Nema"/>
<br />
<sub>
<b> Tanya Nema </b>
</sub>
</a>
<br />
</td>
<td align="center">
<a href="https://github.com/harshN-17">
<img src="https://avatars.githubusercontent.com/u/96466588?v=4" width="100px;" alt="Harsh Narayan"/>
Expand Down
28 changes: 25 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,34 @@
<body>
<script src="index.js" defer></script>
<header>
<img src="images/logo.jpg" height="50px" width="50px" alt="logo">
<img src="images/logo.jpg" height="50px" width="50px" alt="logo" class="logo">
<h1>memory game</h1>
<button id="restart-btn" onclick="restartGame()">restart</button>
</header>
<h3 style="text-align:center">Best time:<span id="best--timer">-</span></h3>
<h3 style="text-align:center">time:<span id="timer">0</span></h3>
<h4 class="time--stat" style="text-align:center">
<span>
Best time: <span id="best--timer">-</span>
</span>
<span>
time:<span id="timer">0</span>
</span>
</h3>
<div class="shadow" id="shadow"></div>
<center><button class="primary-button" id="start-btn" onclick="openModal()" >Start Game</button></center>
<div class="modal" id="modal">
<div class="modal__header">
<h1 class="h1" id=""bttn>Choose your Level</h1>
<button class="modal__close-button" onclick="closeModal()"><i class="fa fa-xmark"></i></button>
</div>
<div class="modal__body">
<div id="align_button"><button class="modal__close-button" onclick="closeModal(),handleLevel('Easy'),hideButton()">Easy <i class="fa fa-xmark"></i></button><br></div>
<div id="align_button"><button class="modal__close-button" onclick="closeModal(),handleLevel('Medium'),hideButton()">Medium<i class="fa fa-xmark"></i></button><br></div>
<div id="align_button"><button class="modal__close-button" onclick="closeModal(),handleLevel('Hard'),hideButton()">Hard <i class="fa fa-xmark"></i></button><br></div>
</div>
<div class="modal__footer">
<p class="p" id="align_button">Good Luck for your Game</p>
</div>
</div>
<section class="memory-game">
<div class="memory-card">
<img class="front-face" src="#" alt="card front face" />
Expand Down
47 changes: 35 additions & 12 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function restartGame(){
}

// Wrapping entire code in anonymous function and calling it, so that user doesn't have access to cardImageSrcs
(() => {
const game = (level) => {
const cards = document.querySelectorAll('.memory-card')
const restartBtn = document.querySelector('#restart-btn')
const timer = document.querySelector('#timer')
Expand All @@ -12,14 +12,10 @@ function restartGame(){
let bestScore = localStorage.getItem("memory-game-best-score");
//initialise with the best score
bestTimer.innerHTML = "<b>" + (bestScore == null ? "-" : bestScore) + "</b>";
let counter = 0;
//increasing the counter

const interval = setInterval(function(){
counter++;
console.log()
timer.innerHTML = "<b>" + counter + "</b>";
}, 1000);
//increasing the counter



// Storing image sources for list of cards
// Storing it as a list and not a matrix to make it a bit difficult to map list to the 3x4 grid
Expand Down Expand Up @@ -114,10 +110,37 @@ function restartGame(){
setTimeout(checkForMatch,100); // Adding a small delay, so that card gets enough time to render updated src before alert pops up
}
}

function timerStart(){
let counter = 0;
const interval = setInterval(function(){
counter++;
timer.innerHTML = "<b>" + counter + "</b>";
}, 1000);
}
timerStart();
cards.forEach((card, i)=>{
card.addEventListener('click',e=>flipCard(e, i)); // Passing index of card when calling flipCard
})
})();


};
const modal = document.getElementById("modal");
const shadow = document.getElementById("shadow");
window.onclick = (e) => {
if (e.target === shadow) {
closeModal();
}
};
function handleLevel(level)
{
game(level);
}
function closeModal() {
modal.classList.remove("active");
shadow.classList.remove("active");
}
function hideButton(){
document.getElementById('start-btn').style.display ="none";
}
function openModal() {
modal.classList.add("active");
shadow.classList.add("active");
}
170 changes: 163 additions & 7 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,27 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital@0;1&display=swap');

*{
box-sizing: border-box;
margin:0;
padding:0;
font-family: 'Courier New', Courier, monospace;
font-family: 'Ubuntu', sans-serif;
}
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(to right top, #0a2a5b, #004d7a, #008793, #00bf72, #7feb12);
height: 100vh;
}

.logo {
margin-left: 15px;
border-radius: 50%;
box-shadow: 0px 4px 10px black;
}

.memory-game{
Expand All @@ -13,23 +31,48 @@
flex-wrap: wrap;
margin:0 auto;
gap:0.2em;
padding: 10px;
padding: 10px;
border-bottom: 4px solid #c9d5e7;
}

header{
display: flex;
text-transform: uppercase;
background: #000;
color: white;
color: rgb(255, 255, 255);
justify-content: space-between;
padding:0 10px;
align-items:center;
background-color: rgba(255, 255, 255, 0.289);
padding: 10px 0px;
}

#restart-btn{
margin-right: 15px;
text-transform: capitalize;
padding: 3px;
padding: 7px;
border: none;
border-radius: 10px;
outline: none;
font-weight: bold;
background-color: #729ddc;
cursor: pointer;
}

#restart-btn:hover {
background-color: #6d94ce;
}

#restart-btn:active {
background-color: #87b0ed;
}

.time--stat {
width: 80vmin;
margin: auto;
margin-top: 12px;
display: flex;
justify-content: space-around;
}

.memory-card{
width: 24%;
position: relative;
Expand All @@ -43,7 +86,6 @@ header{
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
border: 1px solid black;
}
.front-face{
object-fit: cover;
Expand All @@ -52,4 +94,118 @@ header{
}
.front-face,.back-face{
pointer-events: none;
}

:root {
Copy link
Contributor

Choose a reason for hiding this comment

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

color variables are set on a project level(by the maintainer). Remove these, you don't need it for this issue

--black-1a: hsla(0, 0%, 0%, 0.3);
--black-2a: hsla(0, 0%, 0%, 0.7);
--green-1: hsl(100, 50%, 50%);
--green-2: hsl(100, 50%, 40%);
--green-3: hsl(100, 50%, 90%);
--white-1: hsl(0, 0%, 100%);
--ft-fy-fallback-1: sans-serif;
--ft-fy-1: "Poppins", var(--ft-fy-fallback-1);
--ft-se-400: 1.05rem;
--ft-wt-400: 400;
--zx-600: 600;
--zx-400: 400;
}

.page {
display: grid;
min-height: 100vh;
place-items: center;
font-family: var(--ft-fy-1);
font-size: var(--ft-se-400);
font-weight: var(--ft-wt-400);
grid-template-areas: "main";
}
.page__main {
grid-area: main;
}

.primary-button {
text-align: center;

--pg: 0.8em 1.4em;
border: var(--primary-button_br, none);
cursor: pointer;
padding: var(--primary-button_pg, var(--pg));
color:black;
text-decoration: none;
background-color: #618bcb;
font-size: var(--primary-button_ft-se, 1rem);
font-family: var(--primary-button_ft-fy, var(--ft-fy-1));
}
.primary-button:hover {
background-color: #6d94ce;}

.modal {
--pg: 0.7em 20px;
position: absolute;
display: none;
width: 100%;
z-index: var(--modal_zx, var(--zx-600));
max-width: 500px;
grid-template-areas: "header" "body" "footer";
top: 40%;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 0 8px var(--black-1a);
background-color: var(--modal_bd-cr, var(--white-1));
}
.modal__header {
display: flex;
padding: var(--modal__header_pg, var(--pg));
color: var(--modal__header_cr, var(--white-1));
background-color: #6d94ce;
justify-content: space-between;
align-items: center;
grid-area: header;
}
.modal__body {
padding: var(--modal__body_pg, var(--pg));
background-color: var(--green-3);
grid-area: body;
}
.modal__footer {
color: var(--modal__footer_cr, var(--white-1));
padding: var(--modal__footer_pg, var(--pg));
background-color: #6d94ce;
grid-area: footer;
}
.modal__close-button {
--pg: 0.8em 1.4em;
width: 10em;
margin-bottom: 10px;
border: var(--primary-button_br, none);
cursor: pointer;
padding: var(--primary-button_pg, var(--pg));
color: var(--primary-button_cr, var(--white-1));
text-decoration: none;
background-color: #6d94ce;
}
.modal.active {
display: grid;
}
#align_button{
text-align: center;
}
.h1 {
font-size: 2rem;
}


.shadow {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
z-index: var(--zx-400);
background-color: var(--black-2a);
}
.shadow.active {
display: block;
}