DEV Community 👩‍💻👨‍💻

suhhee1011
suhhee1011

Posted on • Updated on

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.

Top comments (0)

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post