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 1 commit
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
8 changes: 4 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ <h4 class="time--stat" style="text-align:center">
</span>
</h3>
<div class="shadow" id="shadow"></div>
<center><button class="primary-button" onclick="openModal()" >Start Game</button></center>
<center><button class="primary-button" id="hide" onclick="openModal()" >Start Game</button></center>
Copy link
Contributor

Choose a reason for hiding this comment

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

hide is not a better name, try something like start-btn

Copy link
Author

Choose a reason for hiding this comment

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

OK

Copy link
Author

Choose a reason for hiding this comment

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

Changed the name from string to level

<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()">Easy <i class="fa fa-xmark"></i></button><br></div>
<div id="align_button"><button class="modal__close-button" onclick="closeModal()">Medium<i class="fa fa-xmark"></i></button><br></div>
<div id="align_button"><button class="modal__close-button" onclick="closeModal()">Hard <i class="fa fa-xmark"></i></button><br></div>
<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>
Expand Down
26 changes: 19 additions & 7 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,19 +123,31 @@ window.onclick = (e) => {
closeModal();
}
};

function closeModal() {
modal.classList.remove("active");
shadow.classList.remove("active");
let counter = 0;
function handleLevel(string)
Copy link
Contributor

Choose a reason for hiding this comment

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

use better parameter name, like level instead of string 🤣

{
if(string==='Easy')
timerStart();
else if(string==='Medium')
timerStart();
else if(string==='Hard')
timerStart();

}
function timerStart(){
Copy link
Contributor

Choose a reason for hiding this comment

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

as I suggested in my previous comment, do not make this a separate function, there is this anonymous function just change it to a named function, and then instead of calling the timerStart(), call that function passing the level to it. The timer logic was already there in that function

Copy link
Author

Choose a reason for hiding this comment

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

It's not working when I'm doing this idk why :(

Copy link
Author

Choose a reason for hiding this comment

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

Made changes !

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

function closeModal() {
modal.classList.remove("active");
shadow.classList.remove("active");
}
function hideButton(){
document.getElementById('hide').style.display ="none";
}
function openModal() {
modal.classList.add("active");
shadow.classList.add("active");
Expand Down
1 change: 1 addition & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ header{
}
.modal__close-button {
--pg: 0.8em 1.4em;
width: 10em;
margin-bottom: 10px;
border: var(--primary-button_br, none);
cursor: pointer;
Expand Down