Skip to content

Commit

Permalink
Merge pull request #3 from yassmittal/add-github-link-to-projects
Browse files Browse the repository at this point in the history 
Add GitHub link to projects
  • Loading branch information
@yassmittal
yassmittal authored Jan 17, 2024
2 parents 211c891 + 774e10f commit dc9939c
Show file tree
Hide file tree
Showing 11 changed files with 409 additions and 163 deletions.
5 changes: 5 additions & 0 deletions JavascriptProjects/2048Game/assets/githubLogoWhite.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 43 additions & 35 deletions JavascriptProjects/2048Game/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>2048 Game</title>
</head>
<body>
<div>
<div class="score-container">
<div>score :</div>
<div class="score"></div>
</div>
<div class="game-status"></div>

<div id="game-container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>2048 Game</title>
</head>

<body>
<div>
<div class="score-container">
<div>score :</div>
<div class="score"></div>
</div>
<div class="game-status"></div>

<div id="game-container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
<a class="toprightfixedBtn toolTipWrap" target="_blank"
href="https://github.com/yassmittal/yassmittal.github.io/tree/master/JavascriptProjects/2048Game">
<img src="assets/githubLogoWhite.svg" alt="github">
<span class="toolTipContent">View Source Code on Github</span>
</a>

<!-- <div class="transitionDiv">hi</div> -->
<script src="script.js"></script>
</body>

<!-- <div class="transitionDiv">hi</div> -->
<script src="script.js"></script>
</body>
</html>
</html>
55 changes: 54 additions & 1 deletion JavascriptProjects/2048Game/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ body {
padding: 0;
background-color: rgb(16, 24, 32);
}

#game-container {
display: grid;
grid-template-columns: repeat(4, 100px);
Expand Down Expand Up @@ -64,10 +65,61 @@ body {
color: white;
}

.toprightfixedBtn {
position: fixed;
top: 0;
right: 0;
margin: 1rem;
}

.toprightfixedBtn>img {
max-width: 50px;
}

.toolTipWrap:hover .toolTipContent {
opacity: 1;
transform: translate(0px, -50%);
pointer-events: all;
}

.toolTipWrap>.toolTipContent {
position: absolute;
top: 50%;
right: 100%;
color: black;
font-size: 0.75rem;
opacity: 0;
transform: translate(-20px, -50%);
min-width: 90px;
background-color: white;
border-radius: 8px;
padding: 4px 8px;
transition: transform 200ms ease, opacity 200ms ease;
margin-right: 14px;
pointer-events: none;
}

.toolTipWrap>.toolTipContent::after {
content: '';
position: absolute;
left: calc(100% - 1px);
/*Here I decreased the 1px because i don't want to leave any type of separation between the tooltip content and triangle */
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 10px solid white;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}


@keyframes bounce {
from {
transform: scale(0);
}

to {
transform: scale(1);
}
Expand All @@ -77,8 +129,9 @@ body {
#game-container {
grid-template-columns: repeat(4, 60px);
}

.tile {
width: 60px;
height: 60px;
}
}
}
0 JavascriptProjects/MemoryMatrix/brain2.png → ...ptProjects/MemoryMatrix/assets/brain2.png
View file
File renamed without changes
5 changes: 5 additions & 0 deletions JavascriptProjects/MemoryMatrix/assets/githubLogo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed JavascriptProjects/MemoryMatrix/brain.png
View file
Binary file not shown.
180 changes: 97 additions & 83 deletions JavascriptProjects/MemoryMatrix/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Memory Matrix</title>
<link rel="stylesheet" href="styles.css" />
<link rel="shortcut icon" href="brain2.png" type="image/x-icon" />
<script src="script.js" defer></script>
</head>
<body>
<div class="game-container-wrap">
<button class="question-btn"></button>
<div class="score-info">
Current Score:- <span data-id="current-score"></span> <br />
Total Score:- <span data-id="total-score"></span>
</div>
<div class="levels-info">
<h1>Memory Matrix</h1>
<h2>Your Current Level is <span data-id="current-level"></span></h2>
<h3>
Number of hidden tiles will be
<span data-id="hidden-tiles-number"></span>
</h3>
</div>
<div class="function-btn-wrap">
<button class="btn-primary" data-id="previous-level">
previous level
</button>
<button class="btn-primary" data-id="next-level">Next level</button>
<button class="btn-primary" data-id="start-btn">Start The Game</button>
<button class="btn-primary" data-id="reset-game">Reset Game</button>
</div>
<div class="game-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="result"></div>
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Memory Matrix</title>
<link rel="stylesheet" href="styles.css" />
<link rel="shortcut icon" href="assets/brain2.png" type="image/x-icon" />
<script src="script.js" defer></script>
</head>

<body>
<header>
<a class="toprightfixedBtn toolTipWrap" target="_blank"
href="https://github.com/yassmittal/yassmittal.github.io/tree/master/JavascriptProjects/MemoryMatrix">
<img src="assets/githubLogo.svg" alt="github">
<span class="toolTipContent">View Source Code on Github</span>
</a>

<div class="TimerWrapper hide">
<div class="TimerContent"></div>
<button class="question-btn toolTipWrap">
<span class="toolTipContent toolTipContentOnBottom">Instructions</span>
</button>
</header>
<div class="game-container-wrap">
<div class="score-info">
Current Score:- <span data-id="current-score"></span> <br />
Total Score:- <span data-id="total-score"></span>
</div>
<div class="levels-info">
<h1>Memory Matrix</h1>
<h2>Your Current Level is <span data-id="current-level"></span></h2>
<h3>
Number of hidden tiles will be
<span data-id="hidden-tiles-number"></span>
</h3>
</div>
<div class="function-btn-wrap">
<button class="btn-primary" data-id="previous-level">
previous level
</button>
<button class="btn-primary" data-id="next-level">Next level</button>
<button class="btn-primary" data-id="start-btn">Start The Game</button>
<button class="btn-primary" data-id="reset-game">Reset Game</button>
</div>
<div class="game-container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<div class="result"></div>
</div>

<div class="modalWrapper">
<div class="modal-content">
<h2>Instructions</h2>
Memory Matrix is a game where you have to use your memory to fill the
matrix and reproduce a pattern without mistakes.
<ul>
<li>the order in which you click the cells is not important.</li>
<li>
in order to reproduce the pattern you must click only on the cells
that belong to the pattern.
</li>
<div class="TimerWrapper hide">
<div class="TimerContent"></div>
</div>

<li>for every correct cell clicked you get 10 points</li>
<div class="modalWrapper">
<div class="modal-content">
<h2>Instructions</h2>
Memory Matrix is a game where you have to use your memory to fill the
matrix and reproduce a pattern without mistakes.
<ul>
<li>the order in which you click the cells is not important.</li>
<li>
in order to reproduce the pattern you must click only on the cells
that belong to the pattern.
</li>

<li>
You will only get the chances to click the tile equals to the number
of tiles hidden <br />
<li>for every correct cell clicked you get 10 points</li>

<p>
For Example:- <br />
If you have 7 tiles hidden only 7 Times you can click the tiles.
If you clicked wrong tile 2 time Then you will get 20 Points less
than the maximum point you can get from that level
</p>
</li>
</ul>
<li>
You will only get the chances to click the tile equals to the number
of tiles hidden <br />

<div>
Note:- This task challenges a part of your short-term memory called
spatial recall — your ability to track location and position within an
environment.
</div>
<p>
For Example:- <br />
If you have 7 tiles hidden only 7 Times you can click the tiles.
If you clicked wrong tile 2 time Then you will get 20 Points less
than the maximum point you can get from that level
</p>
</li>
</ul>

<div>
Note:- This task challenges a part of your short-term memory called
spatial recall — your ability to track location and position within an
environment.
</div>
</div>
</body>
</html>
</div>

</body>

</html>
Loading

0 comments on commit dc9939c

Please sign in to comment.