From f71a1c91eb92ca2dccca1ec8507c2a8cee2b849a Mon Sep 17 00:00:00 2001 From: amandeeep02 Date: Sat, 2 Nov 2024 15:18:18 +0530 Subject: [PATCH] add Amandeep's section --- Amandeep Singh/game/index.html | 42 +++++++ Amandeep Singh/game/script.js | 47 ++++++++ Amandeep Singh/game/style.css | 195 +++++++++++++++++++++++++++++++++ Amandeep Singh/index.html | 78 +++++++++++++ index.html | 22 ++-- 5 files changed, 373 insertions(+), 11 deletions(-) create mode 100644 Amandeep Singh/game/index.html create mode 100644 Amandeep Singh/game/script.js create mode 100644 Amandeep Singh/game/style.css create mode 100644 Amandeep Singh/index.html diff --git a/Amandeep Singh/game/index.html b/Amandeep Singh/game/index.html new file mode 100644 index 0000000..b5e362f --- /dev/null +++ b/Amandeep Singh/game/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + Systumm + + + +
+

Below is a random HTML, CSS, and JavaScript code that I found on my PC. I created this code during the early days of my web development journey. Since this was the first code I found, I've included it here.

+
+
+

Hover over the tap to fill the mug

+

Fill the mug 0%

+

+

+
+
+
+
+
+ +
+
+
+
+

Click the mug to reset

+
+ + + + \ No newline at end of file diff --git a/Amandeep Singh/game/script.js b/Amandeep Singh/game/script.js new file mode 100644 index 0000000..a5b2bef --- /dev/null +++ b/Amandeep Singh/game/script.js @@ -0,0 +1,47 @@ +var mugHeight; +var beerHeight; +var percentFilled; +var roundedPercent; +var game = Math.floor(Math.random() * 100 + 1); + +function getHeights() { + mugHeight = $("#mug").height(); + beerHeight = $("#beer").height(); + percentFilled = (beerHeight / mugHeight) * 100; + roundedPercent = Math.round(percentFilled); + $("#percent-filled").html("Percent Filled: " + roundedPercent + "%"); +} + +$("#handle").hover( + function () { + $("#beer").addClass("fill"); + $("#beer").css("animation-play-state", "running"); + $("#pour").addClass("pouring"); + }, + function () { + getHeights(); + $("#beer").css("animation-play-state", "paused"); + $("#pour").removeClass("pouring"); + if (roundedPercent === 0) { + // do nothing + } else if (roundedPercent === game) { + $("#result").html("Nailed it! Good job!"); + } else if (game - roundedPercent < 5 && game - roundedPercent > -5) { + $("#result").html("Eh. Close enough."); + } else { + $("#result").html("You stink"); + } + } +); + +$("#mug").click(function () { + $("#beer").removeClass("fill"); + getHeights(); + $("#result").html(""); + game = Math.floor(Math.random() * 100 + 1); + $("#target").html(game); +}); + +$(document).ready(function () { + $("#target").html(game); +}); diff --git a/Amandeep Singh/game/style.css b/Amandeep Singh/game/style.css new file mode 100644 index 0000000..2c0e46b --- /dev/null +++ b/Amandeep Singh/game/style.css @@ -0,0 +1,195 @@ +html { + font-size: 16px; +} +body { + font-family: "Roboto Condensed", sans-serif; +} +h1, +h2, +h3, +h4 { + font-family: "Germania One", Arial, sans-serif; +} +.custom-class { + margin-top: 25px; +} +#tap-container { + position: absolute; + top: 0; + left: 0; +} +#tap { + width: 120px; + background: #ddd; + height: 35px; + margin: 140px 0 0 0; + position: relative; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} +#tap:after { + content: ""; + display: block; + position: absolute; + border-top: 70px solid #ddd; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-radius: 0 0 40px 40px; + height: 0; + width: 20px; + top: 10px; + right: 10px; + transform: rotate(-20deg); + z-index: 2; +} +#tap:before { + content: ""; + display: block; + position: absolute; + width: 70px; + height: 60px; + background: grey; + left: -20px; + top: -15px; + border-radius: 0px 20px 20px 0px; +} +#handle { + border-top: 100px solid black; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + width: 20px; + position: absolute; + top: 30px; + left: 80px; + border-radius: 10px 10px 0 0; + z-index: 3; +} +#handle:before { + content: ""; + display: block; + width: 30px; + height: 30px; + background: lightgrey; + position: absolute; + bottom: -20px; + left: -5px; + border-radius: 20px 20px 10px 10px; +} +#handle:hover { + transform: rotate(6deg); + transform-origin: center bottom; +} +#handle:hover:before { + transform: rotate(0deg); +} +#pour { + position: absolute; + left: 92px; + top: 210px; + width: 16px; + height: 0px; + z-index: 1; + background: rgba(229, 197, 57, 1); + transition: 0s; +} +#pour.pouring { + height: 230px; + transition: 800ms ease; +} + +#mug-container { + position: absolute; + top: 180px; +} +#mug { + margin: 60px 0 0 40px; + border: 20px solid #eee; + border-bottom-width: 30px; + width: 120px; + height: 200px; + border-top: none; + border-radius: 0 0 10px 10px; + position: relative; +} +#mug:before { + position: absolute; + content: ""; + display: block; + bottom: -40px; + height: 30px; + width: 180px; + left: -30px; + background: #eee; +} +#mug:after { + position: absolute; + content: ""; + display: block; + right: -80px; + top: 30px; + width: 40px; + height: 110px; + border: 25px solid #eee; + border-left: none; + border-radius: 0 50px 150px 0; +} +#beer { + width: 100%; + height: 0%; + max-height: 100%; + background: linear-gradient( + rgba(255, 255, 255, 1) 0%, + rgba(255, 255, 255, 1) 35%, + rgba(237, 237, 173, 1) 43%, + rgba(229, 197, 57, 1) 44%, + rgba(229, 197, 57, 1) 100% + ); + background-repeat: repeat; + background-size: 100% 200%; + position: absolute; + bottom: 0; + left: 0; +} +@keyframes beerFill { + 5% { + height: 0%; + } + 100% { + height: 100%; + } +} +#beer.fill { + animation-name: beerFill; + animation-duration: 10s; + animation-fill-mode: forwards; + background-position: 0% 70%; +} +h1 { + font-size: 3rem; + text-align: center; + line-height: 1em; + margin-bottom: 10px; + margin-top: 10px; +} +#percent-filled { + text-align: center; +} +#result { + text-align: center; +} +.helper.tap { + text-align: center; + margin-bottom: 0; +} +.helper.mug { + margin-left: 30px; + width: 180px; + text-align: center; +} + + +body { + background: linear-gradient(135deg, #182b4e 0%, #3d0505 100%); + min-height: 100vh; + color: white; +} \ No newline at end of file diff --git a/Amandeep Singh/index.html b/Amandeep Singh/index.html new file mode 100644 index 0000000..91038b7 --- /dev/null +++ b/Amandeep Singh/index.html @@ -0,0 +1,78 @@ + + + + + + Document + + + + + + +
+

Amandeep Singh

+

Team Team

+ Click here + + +
+ + diff --git a/index.html b/index.html index 56e7000..9202474 100644 --- a/index.html +++ b/index.html @@ -1,26 +1,26 @@ - - - + + + Document - - -

KJSCE CodeCell

+ + +

KJSCE CodeCell

OurSpace

FYs

SYs

TYs

- - \ No newline at end of file + +