Cat clock time project

Cat clock time project
0

#1

I made a small javascript cat clock time feature. Would you like to try the features and see if it works as intended? And if you are really curious look into the javascript/html/css and give me some feedback about coding. Thank you!

https://fromthemolen.github.io/cat-clock/


#2

what is a cat clock?


#3

I stole the idea for a javascript cat clock from this description. In short the summary is in the last three lines.

Blockquote 1. Build a JavaScript Clock
In a post-internet world clocks are kind of a given—any device or app you’re using might have a clock function somewhere on the screen. It’s almost an unconscious expectation, but that speaks to the power of JavaScript. If you’re on a website or using web applications with a self-updating time feature (you know, a clock), there’s a very good chance it’s powered by JavaScript code. This means building your own JavaScript clock it isn’t just a good way of tackling JavaScript coding fundamentals, it’s also a chance to get hands-on with the kind of tasks you’ll be completing day in and day out as a JavaScript professional.

Blockquote To give you an idea of a fun JavaScript clock project, look no further than the Lolcats Clock—a project that’s a staple of the Skillcrush JavaScript course.

Blockquote JavaScript code makes it possible to coordinate the lolcat images with set times picked by the user or by pushing the “Party Time!” button. I can haz time? Yes you can.


#4

ok cool, I still don’t really understand but cool.

I do notice that there is delay on the image change when you click the party time button. So maybe that is something you could improve on


#5

That’s true, and I know it.

I have a setInterval for the clock which checks every second for the current time and the current picture.

When I don’t have a delay on the button, you could intend to make more then one click on the party button and then my script gave the wrong pictures.

It might be that I can solve it I think.


#6

I improved on the delay on the button, it is now in an instance.

I have updated the background-color to an image. I improved on the logic and also on the styling a bit.

Are there people who have a bit more feedback about this small project?


#7

If you add Bootstrap you can take advantage of the select dropdowns and buttons css, you can add the css and keep the transparent css you have on your button though it looks nice over that background


#8

Thank you for pointing out bootstrap. Bootstrap is really good when it really needs to be responsive for mobile and stuff. Despite that my cat-clock site is somewhat responsive and the button aren’t that great as I want them to be, I decide for my learning process on normal css/html to not use a framework like bootstrap in the beginning of my design career.

Thanks for the compliment that it is nice with the transparent button.