Skip to content

Commit b48b879

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #997 from DevanshKyada27/Cat-Game
Cat Game/DevanshKyada27
2 parents 22577c7 + f30e521 commit b48b879

File tree

3 files changed

+447
-69
lines changed

3 files changed

+447
-69
lines changed

‎index.html

+75-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,75 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Fortune Teller App</title>
7-
<link rel="stylesheet" href="style.css">
8-
</head>
9-
<body>
10-
<div class="container">
11-
<h1>Fortune Teller App</h1>
12-
<p class="fortune"></p>
13-
<button id="generate-fortune">Generate my Fortune</button>
14-
</div>
15-
<script src="script.js"></script>
16-
</body>
17-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="style.css">
7+
<title>Cat Game</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="wrapper">
12+
<div class="ears">
13+
<div class="ear"></div>
14+
<div class="ear"></div>
15+
</div>
16+
<div class="head">
17+
<div class="mustaches">
18+
<div class="mus">
19+
<div class="mustach"></div>
20+
<div class="mustach"></div>
21+
<div class="mustach"></div>
22+
</div>
23+
<div class="mus">
24+
<div class="mustach"></div>
25+
<div class="mustach"></div>
26+
<div class="mustach"></div>
27+
</div>
28+
</div>
29+
<div class="eyes">
30+
<div class="eye"></div>
31+
<div class="eye"></div>
32+
</div>
33+
<div class="nose">
34+
<div class="shape"></div>
35+
</div>
36+
<div class="mouth">^</div>
37+
</div>
38+
<div class="body"></div>
39+
<div class="pads">
40+
<div class="pad"></div>
41+
<div class="pad"></div>
42+
</div>
43+
<div class="hat">
44+
<div class="bottom"></div>
45+
</div>
46+
<div class="glasses">
47+
<div class="glass"></div>
48+
<div class="glass"></div>
49+
</div>
50+
<div class="tie"></div>
51+
</div>
52+
<div class="controls">
53+
<input type="checkbox" id="eyeglasses">
54+
<input type="checkbox" id="hat">
55+
<input type="checkbox" id="tie">
56+
<label class="glassescontrol" data-text="eyeglasses" for="eyeglasses">
57+
<div class="glassesicon">
58+
<div class="glassicon"></div>
59+
<div class="glassicon"></div>
60+
</div>
61+
</label>
62+
<label data-text="Hat" class="hatcontrol" for="hat">
63+
<div class="haticon">
64+
<div class="bottom">
65+
</div>
66+
</div>
67+
</label>
68+
<label data-text="Tie" class="tiecontrol" for="tie">
69+
<div class="tieicon"></div>
70+
</label>
71+
</div>
72+
</div>
73+
<script src="./script.js"></script>
74+
</body>
75+
</html>

‎script.js

+35-15
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,35 @@
1-
const fortunes = [
2-
"Your future is looking bright!",
3-
"A new opportunity will come your way soon.",
4-
"You will find happiness in unexpected places.",
5-
"Don't be afraid to take risks.",
6-
"Good things will happen when you least expect them.",
7-
"Believe in yourself, and you will succeed."
8-
9-
];
10-
11-
document.getElementById("generate-fortune").addEventListener("click", () => {
12-
const randomIndex = Math.floor(Math.random() * fortunes.length);
13-
const fortuneText = fortunes[randomIndex];
14-
document.querySelector(".fortune").textContent = fortuneText;
15-
});
1+
//controls
2+
const hatcheck = document.querySelector("#hat");
3+
const glassescheck = document.querySelector("#eyeglasses");
4+
const tiecheck = document.querySelector("#tie");
5+
//accessories
6+
const hat = document.querySelector(".hat");
7+
const glasses = document.querySelector(".glasses");
8+
const tie = document.querySelector(".tie");
9+
//Reveal Hat
10+
hatcheck.addEventListener("change", hatfun);
11+
function hatfun() {
12+
if (hatcheck.checked == true) {
13+
hat.style.bottom = "165px";
14+
} else {
15+
hat.style.bottom = "400px";
16+
}
17+
}
18+
//Reveal Eyeglasses
19+
glassescheck.addEventListener("change", glassesfun);
20+
function glassesfun() {
21+
if (glassescheck.checked == true) {
22+
glasses.style.right = "50%";
23+
} else {
24+
glasses.style.right = "-50%";
25+
}
26+
}
27+
//Reveal Tie
28+
tiecheck.addEventListener("change", tiefun);
29+
function tiefun() {
30+
if (tiecheck.checked == true) {
31+
tie.style.bottom = "10px";
32+
} else {
33+
tie.style.bottom = "-80px";
34+
}
35+
}

0 commit comments

Comments
 (0)