Javascript Clock | CSS Neumorphism Working Analog Clock UI Design
HTML-код
- Опубликовано: 5 мар 2020
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/course/complete...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
In this video i'll teach you how to create a working analog clock using html css & javascript with css neumorphism effect ui design.
------------------
Source Code : / css-neumorphism-36809024
------------------
Also Watch This : Working Analog Clock Using Html5 CSS3 & Javascript
• Working Analog Clock U...
Toggle Between Dark and Light Mode using CSS & Javascript | CSS Neumorphism Working Analog Clock
• Toggle Between Dark an...
------------------
Also wwtch thie : Toggle Between Dark and Light Mode using CSS & Javascript | CSS Neumorphism Working Analog Clock
• Toggle Between Dark an...
Clock.png Image Download Url : drive.google.com/file/d/1DByb...
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...
![DDG & Blueface - Top ft. Swae Lee [Music Video]](http://i.ytimg.com/vi/p2wIDXar9ns/mqdefault.jpg)
Hey all...
Use this ` sign instead of this '
This is wrong
hr.style.transform = 'rotateZ(${hh+(mm/12)}deg)';
This is right
hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
Ok
@@papalouie5517 Why?!
@@erturkyorulmaz7376 It is called "template string". You won't be able to use ${} in string if you use " ' " instead of " ` "
@@VuNguyen-ni4ex Thank yıou.
You can do it with ALT + 96
Both clocks are nice. But I think the black one is the best.
I like black one too, it it good to the eyes !!!
@@lonelyfox6180 kkk aleatorio
Dark mode boys!
Once you go black bro 😂😂
am waiting for the "racism everywhere reply"
This is just a new fresh style of delivering technical content. I love it. It was both entertaining, to the point and informative.
Also watch this awesome working Calculator UI video
ruclips.net/video/BuZtAqk5LIY/видео.html
I like the black one the most. But a cool opportunity would be to have the white one as day time and then the time is for example 20 o'clock, it turns into the dark version. Another idea would be to have a toggle button so you can toggle between the two modes.
it was so beautiful.............and the knowledge u have...just mind blowing.
Nice and clean tutorial.
I love the border of the white clock above the border of the gray/black clock. But i love the colors of the gray/black clock.
Amazing!
It's really impressive how much we can do with CSS and JS nowadays.
Thank you brother for the great work and for sharing with the community!
Wow masterpiece 🙏what a knowledge respect maestro ✊
Out of course but interesting & amazing.
👍👍👍👍Good one
Really cool project, and finishable in 30 mins! It's a 9 out of 10 for me
That was ridiculously awesome.
Both looks awesome!!
You're the best! Thanks a lot for the video!!!
awesome you make things clean minimalistic beautiful and easy coding i like your projects they are really cool
this is the most helpful channel for me and i have subscribed to this channel
wow, this is simple code and very nice design, thanks
You're the best! Thanks a lot for the video
Excellent,,, It's so Curious 🔥🔥🔥
Download Source Code : www.patreon.com/posts/css-neumorphism-36809024
Omg thank you so much for the code source , really it's help us alot
My clock is not working 😣
I have same copy your code but it still not working
@@shubbhumourya Its `` - above tab button and not apostrophees ' '!
@@shubbhumourya Its `` - above tab button and not apostrophees ' '!
another great hit.. thanks bro
Cool.. I'll do this on Sunday
Amazing! I think there is something nice that you could add: A transition of the transform at: .hr, .mn, .sc {..., transition: transform 500ms ease;}
Looks smooth but at 60 they will go left wise and not right :D
@@peybro Yeah I was also going to say the same thing. :)
both are amazing..
Great work, as always! Please do a tutorial on Customised Pre-Loaders.
Thanks you brother, I actually love this triturial coding
I am from somalia 🇸🇴
Great work brother. Thanks a bunch for such a small and effective software creation. Lastly, thanks a bunch for poviding us the source code for free!!
Where is the source code? Could you please help me? I got stuck at a point. Would you like to check the code of the project?
amazing design. I like the black one
Mujhe kuch samajh nahi aaya Lekin dekhne me bahoot Maja aaya
🤔🤔😀 LOVE you sir.....!!!!!
Awesome 🤩, I liked dark one.
You got skills for days like.
great thank you very much
the intro sounds like a mixed version of another one bites the dust.
Lolololololo
It's really
no shet sherlock
i was just about to comment this. but you know, another bites the dust ! 😂
awesome awesome awesome 🆒🆒🆒🆒🆒 you're absolutely skilled
That was so cool!
so nice ... fantastic bro....
Not anew , u are hero 🦸♂️ 🌼
very nice work!!!
Thank you bro. I have seen few videos online about clock. I was desperately waiting for yours. Your method is so clear and easy to understand. Thank you bro.
Both are good!
very nice. Tks
Black is the best , but both are awesome👍👌
Both clocksare awesome! it depends on the website
Awesome creation
Wow! Way cool!
Great tutorial! Thank you!! Love it!
Awesome ... Thanks for share
This is what I am looking for
Salute to you Sir ❤️ ❤️ ❤️ ❤️ ❤️
Nice clock👍❤️❤️❤️
Both are so beautiful. darkmode and bright/lightmode superb!!
Black one is best because it is the one which attracted viewers 😍😍
Amazing, thank you!
Awesome!
Thanks
Great bro 👌
tks pro .
t have successfully run the program
how ?i can't
Thank you.
0:08 both good when adding the light and dark mode feature in the website
pretty cool
Awesome,💓
Nice sir❤️❤️
pretty damn genius
Awesome
awesome
thanks
GJ for juniors.
Amazing
that willbe a nice project1.project......alam md.
Amazing video
It works 🌸
You could have added transition to make the tick look slightly better
And overall smooth experience
Hello, could you please help me? I got stuck at a point. Would you like to check the code of the project?
Interesting, I made a widget for iOS for iWidgets a couple of years ago and using milliseconds so the indicators move smooth continuously. But this one is very close and easy to understand what and why.
What programm are you using for editing?
I write this all in simple text-files, lol, one mistake in a little more complex code and I have to search for it longer than I would need to write a new code.
He's using Sublime, it's not considered an IDE, but it's one of the best. However, there is Microsoft's, which is Visual Studio Code, or rather, VS Code. Take a look!
amazing
I will try this,,,,
Thank
VERY NICE
which do you like desktop or laptop for coding?
Wow really awesome ❤️🔥
Nice
Both are supper... But white is more
I like this music :)
Thank's
You are best
Nice easy sing
Hi! Could you make a a tutorial for file input designs?
its more than just clocks, thats piece of art, i suppose
Blue is good dear sir
:) You are master
Ty
Nice! :)
very nice
Beatiful
Nice work, keep making such tutorial, it give me a lot of inspiration.
super
good stuff
perfect
Show de bola! Parabéns!
Pensei que fosse o único BR aqui.
Kkkkkkkkkk
É Brazil !!!!!!!!!!!!!!!!!!!!!!!!
🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷🇧🇷
@@gustanobreza estamos ae
The problem with neumorphism is that it's not great for accessibility. Look at the white clock...much crisper than the black. I'd also say that the number and line contrast on the black clock would only barely pass WCAG standards. I mean, technically, it's the outline/border of the clock that is unclear and it's usable without that. But, not as great a user experience.