JavaScript Balloon Popping Project

Hosted Project

JavaScript Balloon Project (Hosted on Github Pages)

Source Files

https://github.com/romeojeremiah/javascript-balloon-popping-project (Hosted on Github)

Project Objective

This JavaScript balloon popping project challenges you to code the functionality of a balloon popping canvas. Once all the balloons are popped, the user get a message stating all balloons popped!

JavaScript Used

• addEventListener()
• removeEventListener()
• DOM manipulation
• JavaScript CSS manipulation

My Personalize Summary

This was another project where I decided to avoid using the instructor's solution.

I saw that the instructor used over 79 lines of code, 25 of which was used to repeat basically the same JavaScript statement.

So, I didn't want to use his solution because I've learn not to write D.R.Y. code and I take it to heart.

But, the problem is I only got my code partially working.

The instructor's solution makes the word “POP!” disappear upon moving the mouse from the balloon.

My code does not do this but I decided to be ok with it.

If you want to really create the instructor's solution, you'll have to hover over a balloon, make sure it displays the word “POP!”, and then have the word “POP! disappear after leaving the balloon.

I couldn't manage to this without constantly increasing my variables or making all my balloons pop at once.

I'll have to come back to this project in the future.

New Things Learned or Refreshed

I was refreshed on the use of the Element.removeEventListener() function.

For a while, I stared at my code asking how I could get my pop variable from continuously incrementing when the mouse was moved over it.

Then, I remembered there was a function to actually remove the functionality of the mouseover event listener.

So, this worked out pretty well.

What I'm still not sure about though, is if the statements within the callback function itself is actually executed.

For example, in my callback function to the removeEventListener() function I wrote:

 function removeEvent(e){
    e.target.removeEventListener('mouseover', function(){
        console.log('removed');
    })
}; 

But, the removed word never output to the console.

Oh, well.

Hope you enjoy coding this project.

Remember, to see the instructor's explanation of how the project should work you'll have to purchase his course.

For a matter of practice and instruction, though, I think trying to create the action of my solution is good enough.

Time to Code

This project took me about three hours to complete on my own and uses less than 30 lines of JavaScript code.

The greatest amount of work was creating the CSS file.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Balloon Project in action.

Need to see the video solution for this project?

Need to see the video solution for this project? Get Bluelime's JavaScript for Beginners: Create 27 Projects from Scratch Course Now!