Skip to content

Commit c159f73

Browse files
PBJIPBJI
authored
Merge pull request #757 from Somil-Shukla/BalloonPoppingGame-Somil-Shukla
Balloon Popping Game
2 parents 8074947 + 7d2152f commit c159f73

File tree

5 files changed

+148
-0
lines changed

5 files changed

+148
-0
lines changed

‎BalloonPoppingGame/Somil-Shukla/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# javascript-balloon-popping-project

‎BalloonPoppingGame/Somil-Shukla/app.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
let popped = 0;
2+
3+
document.addEventListener('mouseover', function(e){
4+
5+
if (e.target.className === "balloon"){
6+
7+
e.target.style.backgroundColor = "#ededed";
8+
e.target.textContent = "POP!";
9+
popped++;
10+
removeEvent(e);
11+
checkAllPopped();
12+
}
13+
});
14+
15+
function removeEvent(e){
16+
e.target.removeEventListener('mouseover', function(){
17+
18+
})
19+
};
20+
21+
function checkAllPopped(){
22+
if (popped === 24){
23+
console.log('all popped!');
24+
let gallery = document.querySelector('#balloon-gallery');
25+
let message = document.querySelector('#yay-no-balloons');
26+
gallery.innerHTML = '';
27+
message.style.display = 'block';
28+
}
29+
};

‎BalloonPoppingGame/Somil-Shukla/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Pop the Ballons</title>
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<h1>Pop the balloons by moving</br>your mouse over them</h1>
13+
<div id="yay-no-balloons"><span class="blue">Wow!</span> All balloons popped!</div>
14+
<div id="balloon-gallery">
15+
<div class="balloon"></div>
16+
<div class="balloon"></div>
17+
<div class="balloon"></div>
18+
<div class="balloon"></div>
19+
<div class="balloon"></div>
20+
<div class="balloon"></div>
21+
<div class="balloon"></div>
22+
<div class="balloon"></div>
23+
<div class="balloon"></div>
24+
<div class="balloon"></div>
25+
<div class="balloon"></div>
26+
<div class="balloon"></div>
27+
<div class="balloon"></div>
28+
<div class="balloon"></div>
29+
<div class="balloon"></div>
30+
<div class="balloon"></div>
31+
<div class="balloon"></div>
32+
<div class="balloon"></div>
33+
<div class="balloon"></div>
34+
<div class="balloon"></div>
35+
<div class="balloon"></div>
36+
<div class="balloon"></div>
37+
<div class="balloon"></div>
38+
<div class="balloon"></div>
39+
</div>
40+
41+
</div>
42+
<script src="app.js"></script>
43+
</body>
44+
</html>

‎BalloonPoppingGame/Somil-Shukla/javascript balloon popping project.png‎

33.2 KB
Loading

‎BalloonPoppingGame/Somil-Shukla/style.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
body{
2+
font-family:sans-serif;
3+
padding: 30px;
4+
background:#ededed;
5+
}
6+
7+
.wrapper{
8+
max-width: 690px;
9+
margin: 0 auto;
10+
}
11+
12+
.blue {
13+
color:#3f7abe;
14+
}
15+
16+
h1{
17+
margin: auto;
18+
margin-top: 50px;
19+
margin-bottom: 50px;
20+
color: #08a3d9;
21+
text-transform: uppercase;
22+
font-size: 30px;
23+
color: #000380;
24+
}
25+
26+
#balloon-gallery div{
27+
background: #ff3300;
28+
height: 121px;
29+
width: 119px;
30+
text-align: center;
31+
color: #ff3300;
32+
font-size: 40px;
33+
font-family: sans-serif, arial;
34+
border-radius: 100%;
35+
margin-top: 20px;
36+
display: inline-block;
37+
/* float: left; */
38+
margin: 2.5px 5 px 2.5px 0px;
39+
}
40+
41+
#balloon-gallery div:nth-child(3n){
42+
background: #ffce00;
43+
color: #ffce00;
44+
}
45+
46+
#balloon-gallery div:nth-child(3n-1){
47+
background:#3f7abe;
48+
color:#3f7abe;
49+
}
50+
51+
#balloon-gallery div:nth-child(5n){
52+
background:#8e7a8e;
53+
color:#8e7a8e;
54+
}
55+
56+
#balloon-gallery div:nth-child(13){
57+
background:#8e7a8e;
58+
color:#8e7a8e;
59+
}
60+
61+
#balloon-gallery div:nth-child(10n){
62+
background:#ff3300;
63+
color: #ff3300;
64+
}
65+
66+
#balloon-gallery div:nth-child(4n){
67+
clear:right;
68+
}
69+
70+
#yay-no-balloons {
71+
display:none;
72+
color:#ff3300;
73+
font-size:100px;
74+
}

0 commit comments

Comments
 (0)