I’m decided to write this post just a few short hours before Hacktober officially starts!
At this point, I’m happy to report that I’ve completed this week’s pull request, and definitely learned some important things. If you’re new to open source, you’ve got to start small.
In my previous post, I showcased some repositories that I was interested in contributing as part of my release. However, upon reflection, I realized that I don’t yet have the skill level (nor the time) to contribute to these projects effectively and meet the weekly deadlines.
So instead, I took the time to read some of my fellow DPS909 peers’ blog posts and find out what projects they were interested in. I came across this repository
Meditate-App is written in React, and allows the user to select the duration and background noise for their session.
One issue that was filed was the addition of a stop button that would reset the timer and stop the noise. At this point in development, the timer would only reset if the background noise was changed.
Resolving the Issue
I added a new button in the render( ) function of the App.js component. To give this button functionality, I created a function endSession() and assigned this function to button’s onClick attribute.
The endSession effectively stops the background noise, resets the current position of the progress bar on the pause button to zero. Below this was a div that contained a timer displaying the time elapsed.
I assigned this div an id of timer, and used the getElementById() method to select the element, and then change its innerHTML property so that it would display “00 : 00”.
Following my changes, this is what the app looks like right now
I’ve sent my pull request, and am eagerly waiting for these changes to be accepted and merged
In the meantime, here is the link to my forked repo of this project, so that you can view the fixed bug for yourself!
The author also noted that a button could be added using a component with React-Sound. However, when google searching, I couldn’t find any explanation on how to do this. This made me realize that I have a lot of concepts left to learn. Developers tend to assume that other developers may be familiar with the libraries they are using in their applications.
So instead, I just added a regular button. I expressed this in my comments, hoped that he would accept my implementation asked for any advice or links on React-Sound.
In the process of completing this week’s pull request, I’ve set some goals to meet for next week
- Brush up on REACT
- Look for bigger issues to solve for next week’s request
- Practice with Git
Thanks for reading!