Adding new feature on open source project

suhhee1011

suhhee1011

Posted on October 30, 2021

Adding new feature on open source project

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>
Enter fullscreen mode Exit fullscreen mode

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();

  }
Enter fullscreen mode Exit fullscreen mode

This is the screenshot after I add a feature.

Screenshot of Replay Pop-up

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.

💖 💪 🙅 🚩
suhhee1011
suhhee1011

Posted on October 30, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Adding new feature on open source project
javascript Adding new feature on open source project

October 30, 2021