Compare the "T🍅️mate" title in the Readme screenshot to what is live on: https://rayhogan.github.io/tomate/

There is currently too much bottom padding. Reduce it so it is closer to what is in the readme.

As a User, I would like to hear an alarm clock noise, so I know when my break starts/ends

Implementation

Find a royalty-free alarm clock sound and play the sound a few seconds before the work time and the break time ends. This will allow the user to know that the state has changed if they have it in a browser tab that isn't visible.

There are many ways to play sounds in React. Here is a blog post that uses a library from npm: https://www.joshwcomeau.com/react/announcing-use-sound-react-hook/

In the PR, please show where you got the noise file so that appropriate credit can be given at the bottom of the readme.

Issue:

The timer input field can be style little more to mate it visually appealing like below:

Please assign this to my name, will fix it Please add hacktoberfest-accepted label

As a User, I would like to see fireworks when it's break time, as fireworks are cool

Using https://fireworks.js.org/ library (or similiar)

Play some fireworks on the screen for 10 or less seconds when it's break time.

Problem During break time, the "work time" div should be hidden, but it's just hiding the label text and not the time div itself.

Solution

Change:

<div>
            <div style={{display: !this.state.break ? 'block' : 'none'}}>Work Time</div>
            <div>{Math.floor(this.state.workTimer / 60)} mins {this.state.workTimer % 60} secs</div>
 </div>

To:

<div style={{display: !this.state.break ? 'block' : 'none'}}>
            <div>Work Time</div>
            <div>{Math.floor(this.state.workTimer / 60)} mins {this.state.workTimer % 60} secs</div>
 </div>

As a User, I would like the app background to change during a break, so I can easily see it is break time

Problem The app's background is #f9b08a. It's not obvious (visually) when work time ends and break time starts.

Implemention/Solution Change the background to a green colour (#86f490) during the break countdown and then revert it back during work time

As a User, I would like to see a tomato favicon, so I can easily identify the tab in the browser

Problem The project is still using the default React favicon -- yuck!

Solution Find a royalty free tomato favicon to swap in it's place (or create one from scratch)

Task completed #35: Add media query to make the website responsive and make consistency between buttons and text view. Update these changes under hacktoberfest'22 accepted.

Remove Twitter and LinkedIn social buttons (tidy up imports at the top and delete the SVGs from the images folder too).

Leave the Github social button but change the link so it points directly to this repo instead: https://github.com/rayhogan/tomate

Reproduce Pause the timer during a break time. Click the reset button. Observe that the "Break Time" text and timer is still showing even though it is meant to change back to "Work Time".

Solution There is a handler that resets the app.

resetSettings(e) {
    clearInterval(this.state.workInterval)
    clearInterval(this.state.breakInterval)
    this.setState({
      running: false,
      paused: false,
      workTimer: this.state.workTime * 60,
      breakTimer: this.state.breakTime * 60,
      backgroundColor: "#f9b08a",
    })
  }

This needs to be updated to include setting the state variable 'break' to false, as the style rule uses the 'break' state to determine which timer to show.

Problem The background colour is meant to switch between red (#f9b08a) and green (#86f490) when in a work and break phase respectively. However, it doesn't go back to red after the first break -- it stays green.

The sizes of the buttons and timer text are not consistent enough in the mobile view as the timer text of is too small to see. Assign me to make a better mobile view experience and for better alignment under hacktoberfest 22