Adding new feature on open source project
suhhee1011
Posted on October 30, 2021
This is my second blog post for Hactoberfest. In the last project, I worked on fixing errors on the big project. Hence, for this time, I tried to find smaller projects to add features to the application. And I found a project called match-three-game. The game of this open-source project was candy crush which is my favorite game.
So, I decided to work on this project. In this project, there were lots of issues that were open. But most of them were about UI or functional bugs. As I wanted to add a new feature, I tried to look for an issue about the functional problems.
I found one issue which needs to add a new feature to prompt replay the game when the timer is finished.
This project was quite easy to set up, I just need to use the npm to run and open the index.html file on a browser.
Before I start to fix the problem, I take some time to read the codes. While I am reading the codes, if I cannot understand what is written in the code. I researched it. As this is not a big program. It does not take a lot of time to fully understand the logic of the program.
After I finished understanding the logic, I started to add a prompt pop up first and put the button on the HTML file.
<div class = "replay_popup" id = "replay_popup">
<div class = "replay_popup_content">
<p>GAME OVER</p>
<p>Do you want to play again?</p>
<div id = replay_button>REPLAY</div>
</div>
And I added an event listener on the replay button and let it show only when the timer is over.
const replay_popup = document.getElementById('replay_popup');
const replay_button = document.getElementById('replay_button');
// replay button click event listner
replay_button.addEventListener("click",replayGame)
//function to restart the game if replay button clicked.
function replayGame(){
replay_popup.style.display = "none";
startGame();
}
This is the screenshot after I add a feature.
While I am fixing this code, it was not that difficult which needs research on it, but, it was interested because it was the first experience that I worked on a game with javascript.
After I created a pull request, the project maintainer left a comment "Beautiful". I think it was a good experience to know that there is someone who likes what I developed.
For this issue, everything was going very smoothly. And I also found a bug in this application that, there is some problem in the logic of the application. So, I created an issue on the project about what I found. For the next Issue, I am going to work on that issue what I found.
Posted on October 30, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.