From fc2af17b92b065ee0871ca0877f4bfde909bda98 Mon Sep 17 00:00:00 2001 From: Yash Mittal Date: Thu, 18 Jan 2024 03:32:06 +0530 Subject: [PATCH] added github link to 3 projects --- .../2048Game/assets/githubLogoWhite.svg | 5 + JavascriptProjects/2048Game/index.html | 78 ++++---- JavascriptProjects/2048Game/styles.css | 55 +++++- .../MemoryMatrix/{ => assets}/brain2.png | Bin .../MemoryMatrix/assets/githubLogo.svg | 5 + JavascriptProjects/MemoryMatrix/brain.png | Bin 1775 -> 0 bytes JavascriptProjects/MemoryMatrix/index.html | 180 ++++++++++-------- JavascriptProjects/MemoryMatrix/styles.css | 97 +++++++++- .../rockPaperScissor/images/githubLogo.svg | 5 + .../rockPaperScissor/index.html | 77 ++++---- .../rockPaperScissor/styles.css | 70 +++++++ 11 files changed, 409 insertions(+), 163 deletions(-) create mode 100644 JavascriptProjects/2048Game/assets/githubLogoWhite.svg rename JavascriptProjects/MemoryMatrix/{ => assets}/brain2.png (100%) create mode 100644 JavascriptProjects/MemoryMatrix/assets/githubLogo.svg delete mode 100644 JavascriptProjects/MemoryMatrix/brain.png create mode 100644 JavascriptProjects/rockPaperScissor/images/githubLogo.svg diff --git a/JavascriptProjects/2048Game/assets/githubLogoWhite.svg b/JavascriptProjects/2048Game/assets/githubLogoWhite.svg new file mode 100644 index 00000000..f522bef2 --- /dev/null +++ b/JavascriptProjects/2048Game/assets/githubLogoWhite.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/JavascriptProjects/2048Game/index.html b/JavascriptProjects/2048Game/index.html index 39f41487..c0b83271 100644 --- a/JavascriptProjects/2048Game/index.html +++ b/JavascriptProjects/2048Game/index.html @@ -1,40 +1,48 @@ - - - - - 2048 Game - - -
-
-
score :
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ + + + + 2048 Game + + + +
+
+
score :
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + github + View Source Code on Github + + + + + - - - - + \ No newline at end of file diff --git a/JavascriptProjects/2048Game/styles.css b/JavascriptProjects/2048Game/styles.css index 95077657..65440b42 100644 --- a/JavascriptProjects/2048Game/styles.css +++ b/JavascriptProjects/2048Game/styles.css @@ -7,6 +7,7 @@ body { padding: 0; background-color: rgb(16, 24, 32); } + #game-container { display: grid; grid-template-columns: repeat(4, 100px); @@ -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); } @@ -77,8 +129,9 @@ body { #game-container { grid-template-columns: repeat(4, 60px); } + .tile { width: 60px; height: 60px; } -} +} \ No newline at end of file diff --git a/JavascriptProjects/MemoryMatrix/brain2.png b/JavascriptProjects/MemoryMatrix/assets/brain2.png similarity index 100% rename from JavascriptProjects/MemoryMatrix/brain2.png rename to JavascriptProjects/MemoryMatrix/assets/brain2.png diff --git a/JavascriptProjects/MemoryMatrix/assets/githubLogo.svg b/JavascriptProjects/MemoryMatrix/assets/githubLogo.svg new file mode 100644 index 00000000..ccf01588 --- /dev/null +++ b/JavascriptProjects/MemoryMatrix/assets/githubLogo.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/JavascriptProjects/MemoryMatrix/brain.png b/JavascriptProjects/MemoryMatrix/brain.png deleted file mode 100644 index 46d9b9826193f66f5cac6cf6e2e197976f37a21d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1775 zcmV*@Z2;gcoV7sig>|(WE43 zv=)pXs@;&7gd{MxBgFXy+5DN9Mb^@}50j4{suPpWFSI)`;l)G4YKb=r!gV2r_d z9-bc{V#Wo2WG@$fax0MA0&Lv*?Wjj*UIKl(+04Z@b5t#B3IW?oF`p`g5PNKEC>K{0 z7@BPGdI)dLCX7v0$;BfG3m9Wg8SLIakN)b+k^zQ?hrRRF;;6IDFJx)L_Kt|}bal`( z*g;R=AxRUd=D3~+?@|pr*n$7vGbJo~pBPP7Gh^zl9GRpga4t(#}p^|5<(H;CX(Cg2$~_Ayr* zc;gk!R0FAGXgP$y10!fL03(=d8QlXVzFb$vjq+Z-Azl#f8r-nu$cN|tT7g#OE|U84 zoVA(%SSe(rSVSr*_y#-F0nXicTD!VT^ZsrK3}!aN^+dQ8F;Z(HiEWJm#=`g3_cIU( zwwag2vj?x|Y6l=FUuot!`+Ga_swt+DgH<&4(bxy8xX!4Rc(Q@(3el)#rnywZT&W?o ztYz_q3hD`^V#w2Lddc$?h25JT-&1M}ux;1AhgEezon_TP89UU0U0nhJ?_V>Ri8@lx zaVv|^RHUAxozabYkVX^jig3L#0B%(gyS@_ycJ_B*R8e)M&@-Fc0tj}ms^h-Mr{DK5 zR}#$SI+9vM6}zDe?Fcbb31%`u3v*9CnY0r26_J?~Z=%|YSIa?Kf3|{WSXT^j&SB6k zivYH6-5;pR9u(GkKK}bxF|!%kT|j*UjvFuivijd z;h(#T>y2^!am%sU42*zp5LIwWx9 zNf^cPPsgYEaHhd$N(KHoTVo>48BcO1(wwSQ8rHEU^4QjFaA0j8z2VJcMTeWtQ28pQp`lXRW}Cgx=vhw%(;@s(f?c`DwaX)8?B$j-e_p^PjmIe;o1bAC=&QmCZxZ*U4P z)T_MX9EG@y8eTdvdgS=^Wd>l!j(r7zmzSL!5aaQIb&L9s<{9reM_4FE*J)eI#%Nu#Npno(=@xuZl0>*x0Z0t~D0r>pJww-%-0}Cz;cO&O4 zd85X@DCWs1B1d^@rb1XO0p|6S#}0pP5%_|Znh%i0HZE1hcm#zKzicE#0-yAJ93Wx< z{Y|?y3jvHBL6>w-y)8r-#rz_vG2nT4{@mf@%v){e&u>U7F94VCi2yL3hs0(6>xYC< z>$RM!JAX%jqBS+(+Pwk*h%tD6!1XcV8y zNKWr~unt6R=H8QmYy+@Yu-bfEs002ovPDHLkV1gTYNc#W) diff --git a/JavascriptProjects/MemoryMatrix/index.html b/JavascriptProjects/MemoryMatrix/index.html index 6d2541a9..94587cf6 100644 --- a/JavascriptProjects/MemoryMatrix/index.html +++ b/JavascriptProjects/MemoryMatrix/index.html @@ -1,95 +1,109 @@ - - - - Memory Matrix - - - - - -
- -
- Current Score:-
- Total Score:- -
-
-

Memory Matrix

-

Your Current Level is

-

- Number of hidden tiles will be - -

-
-
- - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ + + + Memory Matrix + + + + + + +
+ + github + View Source Code on Github + -
-
+ +
+
+
+ Current Score:-
+ Total Score:- +
+
+

Memory Matrix

+

Your Current Level is

+

+ Number of hidden tiles will be + +

+
+ + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
-
-
-

Instructions

- Memory Matrix is a game where you have to use your memory to fill the - matrix and reproduce a pattern without mistakes. -
    -
  • the order in which you click the cells is not important.
    • -
  • - in order to reproduce the pattern you must click only on the cells - that belong to the pattern. -
    • +
    +
    +
    -
  • for every correct cell clicked you get 10 points
    • +
    +
    +

    Instructions

    + Memory Matrix is a game where you have to use your memory to fill the + matrix and reproduce a pattern without mistakes. +
      +
    • the order in which you click the cells is not important.
      • +
    • + in order to reproduce the pattern you must click only on the cells + that belong to the pattern. +
      • -
    • - You will only get the chances to click the tile equals to the number - of tiles hidden
      +
    • for every correct cell clicked you get 10 points
      • -

      - For Example:-
      - 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 -

      - -
    +
  • + You will only get the chances to click the tile equals to the number + of tiles hidden
    -
    - Note:- This task challenges a part of your short-term memory called - spatial recall — your ability to track location and position within an - environment. -
    +

    + For Example:-
    + 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 +

    +
    • +
+ +
+ Note:- This task challenges a part of your short-term memory called + spatial recall — your ability to track location and position within an + environment.
- - +
+ + + + \ No newline at end of file diff --git a/JavascriptProjects/MemoryMatrix/styles.css b/JavascriptProjects/MemoryMatrix/styles.css index f565148d..24db6a22 100644 --- a/JavascriptProjects/MemoryMatrix/styles.css +++ b/JavascriptProjects/MemoryMatrix/styles.css @@ -10,6 +10,13 @@ body { text-align: center; } +header { + display: flex; + align-items: center; + justify-content: flex-end; + padding: 1rem; +} + p { margin-top: 0.5rem; } @@ -19,15 +26,12 @@ p { background-size: 100%; background-position: center; background-repeat: no-repeat; - width: 30px; - height: 30px; + width: 60px; + height: 60px; background-color: transparent; border: none; outline: none; - position: absolute; - top: 0; - right: 0; - margin: 8px; + margin-left: 8px; cursor: pointer; } @@ -139,7 +143,7 @@ h3 { max-width: 100%; } -.game-container > div { +.game-container>div { background-color: #633b3b; cursor: pointer; transition-duration: 300ms; @@ -147,12 +151,12 @@ h3 { transition-property: color, transform; } -.game-container > div.rotated { +.game-container>div.rotated { transform: rotate3d(0, 1, 0, 180deg); background-color: #73a580; } -.game-container > div.wrongTile { +.game-container>div.wrongTile { transform: rotate3d(0, 1, 0, 180deg); background-color: red; background-size: 50%; @@ -228,10 +232,83 @@ h3 { align-items: center; } +.toolTipWrap { + position: relative; +} + +.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: white; + font-size: 0.75rem; + opacity: 0; + transform: translate(-20px, -50%); + min-width: 90px; + background-color: rgba(var(--primary)); + 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 rgba(var(--primary)); + border-right: 10px solid transparent; + border-bottom: 10px solid transparent; + border-top: 10px solid transparent; +} + +.toolTipWrap>.toolTipContentOnBottom { + top: 100%; + transform: translate(50%, 0); + right: 50%; + margin-right: 0; + margin-top: 28px; + min-width: 70px; +} + +.toolTipWrap:hover .toolTipContentOnBottom { + transform: translate(50%, -20px); +} + +.toolTipWrap>.toolTipContentOnBottom::after { + right: auto; + top: auto; + left: 50%; + transform: translateX(-50%); + bottom: calc(100% - 1px); + border-left-color: transparent; + border-bottom-color: rgba(var(--primary)); +} + + + + @media screen and (max-width: 800px) { body { font-size: 0.75rem; } + .game-container { width: 300px; height: 300px; @@ -285,4 +362,4 @@ h3 { width: 200px; height: 200px; } -} +} \ No newline at end of file diff --git a/JavascriptProjects/rockPaperScissor/images/githubLogo.svg b/JavascriptProjects/rockPaperScissor/images/githubLogo.svg new file mode 100644 index 00000000..ccf01588 --- /dev/null +++ b/JavascriptProjects/rockPaperScissor/images/githubLogo.svg @@ -0,0 +1,5 @@ + + + \ No newline at end of file diff --git a/JavascriptProjects/rockPaperScissor/index.html b/JavascriptProjects/rockPaperScissor/index.html index 6793f064..9829e9f6 100644 --- a/JavascriptProjects/rockPaperScissor/index.html +++ b/JavascriptProjects/rockPaperScissor/index.html @@ -1,43 +1,52 @@ - - - - - JavaScript Game | Rock Paper Scissors - - - -
-
-
- - - - - - -
-
Let's Play!!
-
-
- + + + + + JavaScript Game | Rock Paper Scissors + + + + +
+
+
+ -

Rock

 - - -

Paper

- - - -

Scissors

+ +
-
+
Let's Play!!
+
+ +
+ + +

Rock

+ + + +

Paper

+ + + +

Scissors

+ +
+
+ + + github + View Source Code on Github + + + + - - - + \ No newline at end of file diff --git a/JavascriptProjects/rockPaperScissor/styles.css b/JavascriptProjects/rockPaperScissor/styles.css index 3d8e594b..94e51a0b 100644 --- a/JavascriptProjects/rockPaperScissor/styles.css +++ b/JavascriptProjects/rockPaperScissor/styles.css @@ -1,11 +1,13 @@ /* Import Google font - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); + * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } + body { height: 100vh; display: flex; @@ -13,24 +15,29 @@ body { justify-content: center; background: #f6f7fb; } + ::selection { color: #fff; background-color: #7d2ae8; } + .container { padding: 2rem 7rem; border-radius: 14px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } + .result_images { display: flex; column-gap: 7rem; } + .container.start .user_result { transform-origin: left; animation: userShake 0.7s ease infinite; } + @keyframes userShake { 50% { transform: rotate(10deg); @@ -41,20 +48,25 @@ body { transform-origin: right; animation: cpuShake 0.7s ease infinite; } + @keyframes cpuShake { 50% { transform: rotate(-10deg); } } + .result_images img { width: 100px; } + .user_result img { transform: rotate(90deg); } + .cpu_result img { transform: rotate(-90deg) rotateY(180deg); } + .result { text-align: center; font-size: 2rem; @@ -65,15 +77,18 @@ body { .option_image img { width: 50px; } + .option_images { display: flex; align-items: center; margin-top: 2.5rem; justify-content: space-between; } + .container.start .option_images { pointer-events: none; } + .option_image { display: flex; flex-direction: column; @@ -82,18 +97,73 @@ body { cursor: pointer; transition: opacity 0.3s ease; } + .option_image:hover { opacity: 1; } + .option_image.active { opacity: 1; } + .option_image img { pointer-events: none; } + .option_image p { color: #7d2ae8; font-size: 1.235rem; margin-top: 1rem; pointer-events: none; } + + +.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: 120px; + background-color: white; + border-radius: 8px; + padding: 4px 8px; + transition: transform 200ms ease, opacity 200ms ease; + margin-right: 14px; + pointer-events: none; + box-shadow: rgba(0, 0, 0, 0.3) 0px 18px 36px -18px, rgba(50, 50, 93, 0.25) 0px 30px 60px -12px; +} + +.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; +} \ No newline at end of file