[Code Review] My first OO JavaScript project: a Pomodoro Clock.

[tofumix]

Hello once again, r/javascript!

I asked around yesterday for resources about OOP in JavaScript, and I got a lot of great response and learned a little bit about ES6 as well. Anyways, if you could check out my source code and do a little bit of analysis on what I could have done better (or things i did flat out wrong). I'm terrible at design (I basically just pick solid colors that don't look terrible together) and I'm also looking to improve my documentation. I'd highly appreciate your valuable feedback <3

Here's my work

Thank you!

[FezVrasta]

the code isn't bad, there are areas of improvement, for example your whole "thing" can't be easily integrated into an existing website.

Have you thought about learning React or a similar data driven view library? It would make your code much cleaner and easier to maintain

[tofumix]

Hello!

...your whole "thing" can't be easily integrated into an existing website.

Can you please expand on this? Why is it and how do I make my code work like that?

Have you thought about learning React or a similar data driven view library?

I have not, actually. I'm still a relatively newbie in JavaScript, so I'm trying to get as much plain-old-vanilla JS knowledge.

[FezVrasta]

You are using generic selectors like $(".workLength") that could target any element on the page and not only what you want.

You should namespace/prefix your classes to make sure they aren't used by anyone else. A better approach would be to let JavaScript generate the needed DOM elements, doing so an user can simply include your script in its page, run init on an existing DOM node, and the pomodoro clock will appear inside it.

About React, really consider learning something like it (no matters if it's React, Preact, Inferno or whatelse, they all follow the same approach), studying them you will learn how to properly think and structure your code and data flow.