diff --git a/BalloonPoppingGame/Somil-Shukla/README.md b/BalloonPoppingGame/Somil-Shukla/README.md new file mode 100644 index 000000000..a618ea265 --- /dev/null +++ b/BalloonPoppingGame/Somil-Shukla/README.md @@ -0,0 +1 @@ +# javascript-balloon-popping-project diff --git a/BalloonPoppingGame/Somil-Shukla/app.js b/BalloonPoppingGame/Somil-Shukla/app.js new file mode 100644 index 000000000..dfde59ada --- /dev/null +++ b/BalloonPoppingGame/Somil-Shukla/app.js @@ -0,0 +1,29 @@ +let popped = 0; + +document.addEventListener('mouseover', function(e){ + + if (e.target.className === "balloon"){ + + e.target.style.backgroundColor = "#ededed"; + e.target.textContent = "POP!"; + popped++; + removeEvent(e); + checkAllPopped(); + } +}); + +function removeEvent(e){ + e.target.removeEventListener('mouseover', function(){ + + }) +}; + +function checkAllPopped(){ + if (popped === 24){ + console.log('all popped!'); + let gallery = document.querySelector('#balloon-gallery'); + let message = document.querySelector('#yay-no-balloons'); + gallery.innerHTML = ''; + message.style.display = 'block'; + } +}; diff --git a/BalloonPoppingGame/Somil-Shukla/index.html b/BalloonPoppingGame/Somil-Shukla/index.html new file mode 100644 index 000000000..9f0ecaf67 --- /dev/null +++ b/BalloonPoppingGame/Somil-Shukla/index.html @@ -0,0 +1,44 @@ + + + + + + + + Pop the Ballons + + +
+

Pop the balloons by moving
your mouse over them

+
Wow! All balloons popped!
+ + +
+ + + \ No newline at end of file diff --git a/BalloonPoppingGame/Somil-Shukla/javascript balloon popping project.png b/BalloonPoppingGame/Somil-Shukla/javascript balloon popping project.png new file mode 100644 index 000000000..3521b5f87 Binary files /dev/null and b/BalloonPoppingGame/Somil-Shukla/javascript balloon popping project.png differ diff --git a/BalloonPoppingGame/Somil-Shukla/style.css b/BalloonPoppingGame/Somil-Shukla/style.css new file mode 100644 index 000000000..63f558337 --- /dev/null +++ b/BalloonPoppingGame/Somil-Shukla/style.css @@ -0,0 +1,74 @@ +body{ + font-family:sans-serif; + padding: 30px; + background:#ededed; +} + +.wrapper{ + max-width: 690px; + margin: 0 auto; +} + +.blue { + color:#3f7abe; +} + +h1{ + margin: auto; + margin-top: 50px; + margin-bottom: 50px; + color: #08a3d9; + text-transform: uppercase; + font-size: 30px; + color: #000380; +} + +#balloon-gallery div{ + background: #ff3300; + height: 121px; + width: 119px; + text-align: center; + color: #ff3300; + font-size: 40px; + font-family: sans-serif, arial; + border-radius: 100%; + margin-top: 20px; + display: inline-block; + /* float: left; */ + margin: 2.5px 5 px 2.5px 0px; +} + +#balloon-gallery div:nth-child(3n){ + background: #ffce00; + color: #ffce00; +} + +#balloon-gallery div:nth-child(3n-1){ + background:#3f7abe; + color:#3f7abe; +} + +#balloon-gallery div:nth-child(5n){ + background:#8e7a8e; + color:#8e7a8e; +} + +#balloon-gallery div:nth-child(13){ + background:#8e7a8e; + color:#8e7a8e; +} + +#balloon-gallery div:nth-child(10n){ + background:#ff3300; + color: #ff3300; +} + +#balloon-gallery div:nth-child(4n){ + clear:right; +} + +#yay-no-balloons { + display:none; + color:#ff3300; + font-size:100px; +} \ No newline at end of file