Skip to content

Commit

Permalink
Merge pull request #5 from kjsce-codecell/amandeep
Browse files Browse the repository at this point in the history 
add Amandeep's section
  • Loading branch information
@RahilKothari9
RahilKothari9 authored Nov 4, 2024
2 parents cc71ec4 + 32ded90 commit d9cdf7a
Show file tree
Hide file tree
Showing 5 changed files with 376 additions and 9 deletions.
42 changes: 42 additions & 0 deletions Amandeep Singh/game/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!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="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Germania+One&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Germania+One&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js" defer></script>
<title>Systumm</title>
</head>
<body>

<div>
<center><p>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.</p></center>
</div>
<div>
<p class="helper tap">Hover over the tap to fill the mug</p>
<h1>Fill the mug <span id="target">0</span>%</h1>
<h2 id="percent-filled"></h2>
<h3 id="result"></h3>
<div id="tap-container">
<div id="tap"></div>
<div id="handle"></div>
<div id="pour"></div>
</div>

<div id="mug-container">
<div id="mug">
<div id="beer"></div>
</div>
<p class="helper mug">Click the mug to reset</p>
</div>

</body>

</html>
47 changes: 47 additions & 0 deletions Amandeep Singh/game/script.js
View file
Original file line number Diff line number Diff line change
@@ -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);
});
195 changes: 195 additions & 0 deletions Amandeep Singh/game/style.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
78 changes: 78 additions & 0 deletions Amandeep Singh/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Germania+One&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<style>
body {
font-family: "IBM Plex Sans";
text-align: center;
background-color: #e6eed6;
padding: 20px;
}
h1 {
color: #090c02;
margin-bottom: 10px;
font-size: 8rem;
}
h2 {
font-size: 2rem;
color: #a72608;
font-style: italic;
}
a {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #1d2e3b;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
a:hover {
background-color: #000000;
color: whitesmoke;
}
.div1 {
margin-top: 12%;
}
</style>
<div class="div1">
<h1>Amandeep Singh</h1>
<h2>Team Team</h2>
<a href="game/index.html">Click here</a>
<style>
h1 {
overflow: hidden;
white-space: nowrap;
border-right: 3px solid;
animation: typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
margin: 0 auto;
width: fit-content;
}

@keyframes typing {
from { width: 0 }
to { width: 100% }
}

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #090c02 }
}
</style>

</div>
</body>
</html>
Loading

0 comments on commit d9cdf7a

Please sign in to comment.