Kyu's Pomodoro Clock

Code Feedback
1

Hi guys,

after a few months of lacking motivation and discipline to continue the curriculum I finally got back on track and finished the last Front End challenge.

Here is my Pomodoro Clock: https://codepen.io/Kyur/full/ZgBvpx

I would love to hear your feedback!

Kyu

1 Like
2

It’s good looking, that animated line is a great idea.

The clock changed in a one minute-test as expected from session to break but I did not here the sound. Also the automated test indicates that there are no sounds. (tested on chrome)

Maybe you can add a litte space below the break and session button. (for the case if there are scrollbars)

space-in-scrollbar-case
space-in-scrollbar-case709×417 47 KB

1 Like
3

Hi, thank you for the feedback!

Weird… I tested it on Chrome and Firefox and the sound plays in both browsers. The tests are also all passing.

4

Here the song worked and clock too. Nice design. How you created the animation?

5

My browsererror:
BeepSound.wav:1 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID

When I try to load the sound in browser directly, I got the info that it is not a secure connection, so you do not have https:// on the server where you provide the soundfile.

So it’s not a mistake in programming:)

6

Looking good! :smiley:
Regarding the code, you could split it into more components. :slight_smile:

8

Hey,
thanks for the feedback.

That’s true. Was kinda lazy on that part. :smiley:

Basically it’s one div for the background and one div for the foreground (the moving part). The width of the foreground is set each second via code.
Here is the relevant code including the styling:

The HTML markup:

<div className="loading-bar-bg">
     <div className="loading-bar" style={{ width: this.state.loadingBarWidth + "%" }} />
</div>

The CSS:

.loading-bar-bg {
    width: 100%;
    margin: 40px 0;
    height: 4px;
    border: none;
    background-color: var(--element-muted);
    box-shadow: 10px 6px 12px rgba(0, 0, 0, 0.596);
    border-radius: 50px;
}

.loading-bar {
    background-color: var(--element-color);
    width: 100%;
    height: 100%;
    transition: width 1s linear;
    border-radius: 50px;
}

Calculating the width of the loading bar each second depending on the seconds left:

    const secondsLeft =
      (this.state.breakOngoing
        ? this.state.breakLengthLeft
        : this.state.sessionLengthLeft) * 60 + this.state.seconds;
    const initialTimeInSeconds =
      (this.state.breakOngoing
        ? this.state.breakLength
        : this.state.sessionLength) * 60;
    const loadingBarWidth = secondsLeft / initialTimeInSeconds * 100;
    this.setState({ loadingBarWidth });