Skip to content

Commit 6a13d56

Browse files
mohammadanangmohammadanang
committed
Merge branch 'master' of github.com:thinkswell/javascript-mini-projects
2 parents 843e67c + 0574556 commit 6a13d56

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1360
-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+
}

‎Dicegame/shivam200446/dice.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var randomnum1 = Math.floor(Math.random() * 6) + 1;
2+
var randomimg = "dice" + randomnum1 + ".png";
3+
var imgsource1 = "images/" + randomimg;
4+
var image1 = document.querySelectorAll("img")[0].setAttribute("src", imgsource1);
5+
6+
var randomnum2 = Math.floor(Math.random() * 6) + 1;
7+
var imgsource2 = "images/" +"dice" + randomnum2 + ".png";
8+
var image2 = document.querySelectorAll("img")[1].setAttribute("src", imgsource2);
9+
10+
if(randomnum1>randomnum2){
11+
document.querySelector("h1").innerHTML ="Player1 Wins!";
12+
}
13+
else if(randomnum1<randomnum2){
14+
document.querySelector("h1").innerHTML="Player2 Wins!";
15+
}
16+
else{
17+
document.querySelector("h1").innerHTML= "DRAW!";
18+
}

‎Dicegame/shivam200446/images/dice1.png

2.5 KB
Loading

‎Dicegame/shivam200446/images/dice2.png

2.16 KB
Loading

‎Dicegame/shivam200446/images/dice3.png

2.38 KB
Loading

‎Dicegame/shivam200446/images/dice4.png

2.55 KB
Loading

0 commit comments

Comments
 (0)