Share your repls and programming experiences

← Back to all posts
Analogue clock almost entirely in CSS
RolandJLevy (1083)

Hey guys!

I made an analogue clock almost entirely in CSS - with just 12 lines of JavaScript to calibrate the time.

I set myself the challenge of creating this from scratch without looking at tutorials and only referred to stackoverflow a few times.

Links

Feedback welcome!

Cheers,
Roland

Comments
hotnewtop
ch1ck3n (2028)

@RolandJLevy i mean this is better then most stuff on even codepen!

RolandJLevy (1083)

@ch1ck3n thanks for your feedback - I really appreciate it :)

ch1ck3n (2028)

@RolandJLevy oh yeah speaking of feedback

https://new-website.ch1ck3n.repl.co/
can I have feedback on the css of this site

RolandJLevy (1083)

@ch1ck3n well done. Your website looks good. I like the clean design and layout. The fixed top bar works well. I like the hover effect you've given the games and the subtle shadow around the boxes.

I just have a few suggestions:

  1. Make your elements semantic. Learn more here
  2. None of the links work
  3. None of the text is selectable due to user-select: none. This is only useful in special cases. I would apply this to all the text in the whole website.
  4. There is no space below Doge cuteness box. Maybe you could add a footer?
  5. Can you add more details to the games? What the game is, how you made it etc...

Keep up the good work!

ch1ck3n (2028)

@RolandJLevy OK wow this is the first time someone gave me constructive feedback

Thank you and I will try to fix all of it

RolandJLevy (1083)

@ch1ck3n that's great! let me know how you get on :)

RolandJLevy (1083)

@ch1ck3n take a look at menus like this one which use CSS only - no JavaScript: https://codepen.io/erikterwan/pen/EVzeRP

ch1ck3n (2028)

@RolandJLevy oh yeah i can't seem to make my sidebar animated for some reason?

ch1ck3n (2028)

@RolandJLevy also for 3: all of the text is already unselectable. is it not for you?

RolandJLevy (1083)

@ch1ck3n I made this demo to show how to animate elements using transition: https://replit.com/@RolandJLevy/css-transition-block

RolandJLevy (1083)

@ch1ck3n I'm saying that none of the text is selectable and this is not good. It's better to allow the user to select the text

ch1ck3n (2028)

@RolandJLevy i did apply transition: 0.5s; to the sidebar css

RolandJLevy (1083)

@ch1ck3n in .sidebar, change these:

display: block;
transition: all 0.2s ease;

ch1ck3n (2028)

@RolandJLevy
i did that but now the elements inside shows all the time

ch1ck3n (2028)

@RolandJLevy actually i got it thank you!

ch1ck3n (2028)

@RolandJLevy man where did you learn your css skills

RolandJLevy (1083)

@ch1ck3n haha! I've just been building different projects over the past two years, made lots of mistakes and learnt from the experts who post on websites like https://css-tricks.com

Here are some of my projects: https://rolandlevy.co.uk/#projects

ch1ck3n (2028)

@RolandJLevy woah

you made a sidebar that fast??

RolandJLevy (1083)

@ch1ck3n yes, its just a block moving :)

RolandJLevy (1083)

@ch1ck3n I highly recommend going through this tutorial step by step. I learnt a lot from it: https://www.youtube.com/watch?v=DZg6UfS5zYg