Javascript Clock | CSS Neumorphism Working Analog Clock UI Design
Vložit
- čas přidán 27. 08. 2024
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
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.c...
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...
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"
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 ' '!
Also watch this awesome working Calculator UI video
czcams.com/video/BuZtAqk5LIY/video.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.
Amazing!
It's really impressive how much we can do with CSS and JS nowadays.
This is just a new fresh style of delivering technical content. I love it. It was both entertaining, to the point and informative.
Mujhe kuch samajh nahi aaya Lekin dekhne me bahoot Maja aaya
🤔🤔😀 LOVE you sir.....!!!!!
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. :)
Really cool project, and finishable in 30 mins! It's a 9 out of 10 for me
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?
Black one is best because it is the one which attracted viewers 😍😍
Great work, as always! Please do a tutorial on Customised Pre-Loaders.
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.
its more than just clocks, thats piece of art, i suppose
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 ! 😂
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.
it was so beautiful.............and the knowledge u have...just mind blowing.
Wow masterpiece 🙏what a knowledge respect maestro ✊
Thanks you brother, I actually love this triturial coding
I am from somalia 🇸🇴
Out of course but interesting & amazing.
👍👍👍👍Good one
I think it will be better if you explain everything in these projects
this is the most helpful channel for me and i have subscribed to this channel
Black is the best , but both are awesome👍👌
That was ridiculously awesome.
Salute to you Sir ❤️ ❤️ ❤️ ❤️ ❤️
awesome you make things clean minimalistic beautiful and easy coding i like your projects they are really cool
Not anew , u are hero 🦸♂️ 🌼
Thank you brother for the great work and for sharing with the community!
0:08 both good when adding the light and dark mode feature in the website
another great hit.. thanks bro
wow, this is simple code and very nice design, thanks
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.
Javascript code doesn't work with me😭😭
Same here😔😔
awesome awesome awesome 🆒🆒🆒🆒🆒 you're absolutely skilled
Excellent,,, It's so Curious 🔥🔥🔥
Bro I have a problem, the clock hands are not centered on the white point.
I m too
I recommend u to upload your code to codepen or jsfiddle and post it here, perhaps we can help
That's my code:
clock | css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #091921;
}
.clock {
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: url(img/clock.png);
background-size: cover;
border: 4px solid #091921;
border-radius: 50%;
box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
inset 0 -15px 15px rgba(255,255,255,0.05),
0 15px 15px rgba(0,0,0,0.3),
inset 0 15px 15px rgba(0,0,0,0.3);
}
.clock:before {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #FFF;
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec,
{
position: absolute;
}
.clock .hour, .hr {
width: 160px;
height: 160px;
}
.clock .min, .mn {
width: 190px;
height: 190px;
}
.clock .sec, .sc {
width: 230px;
height: 230px;
}
.hr, .mn, .sc
{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
border-radius: 50%;
}
.hr:before {
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #ff105e;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #fff;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #fff;
z-index: 12;
border-radius: 6px 6px 0 0;
}
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day= new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
Posner Righ may be comment out .hr, .mn, .sc align-items:center ?
@@miniminiRedPanda Removing align-items: center; will also do
Nice clock👍❤️❤️❤️
Both are supper... But white is more
Cool.. I'll do this on Sunday
You're the best! Thanks a lot for the video
which do you like desktop or laptop for coding?
Both are so beautiful. darkmode and bright/lightmode superb!!
amazing design. I like the black one
You got skills for days like.
Why not create the background in css as well
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?
Both clocksare awesome! it depends on the website
Both looks awesome!!
This is what I am looking for
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!
great thank you very much
Why people are copying two letters? Is it so hard and time consuming to write it on your own?
YES! The content is amazing but this distracted me so much!
And then spend the rest of the day trying to find which letter you have mistyped.
both are amazing..
hi, it doesn't work in my firefox browser. the position from the point was not in the center, and the other hands was the same problem. I have moved the parts with margin-top/left in the right position. But the rotation animation was not working too. Do you know how i can fix this.
same dude im using opera gx
so nice ... fantastic bro....
Your CSS selectrors contains a lot of extra classes. F.e., ".clock .hour .hr" could contain only ".hr".
Why is it wrong? I think that the way he used it is more appropriate because you can instantly see in css what is in DOM structure. It is more readable for other programmers. I am just curious about your opinion. Sinceraly ( :
He should start using sass
Awesome creation
You're the best! Thanks a lot for the video!!!
GJ for juniors.
nice video keep this awesome work up , i followed your steps precisely however , The Js code is not working , all the other stuffs are fine only the code written inside the script code isn't working . is it cuz i'm using opera browser ? i hope anyone give me a hint to that issue
thank you
Both are good!
Use this sign ` with style.transform instead of this '
Why it's not working with ' ?
sanskar srivastava Because you can’t insert variables in a regular ' string you have to use the template string `
sanskar srivastava In this case the variables are the “let” ones
Awesome 🤩, I liked dark one.
The background music made me move my body and dance 😂😂
Blue is good dear sir
There are no errors.
And the clock is not working. Why?
Thank you 🐼
insted of Let write var
Hey, why is querySelector not working?
very nice. Tks
Nice work, keep making such tutorial, it give me a lot of inspiration.
White one is good
tks pro .
t have successfully run the program
how ?i can't
Nice sir❤️❤️
Black is better for battery life . I guess !
If you want a fluid seconds pointer replace day.getSeconds() with day.getTime()/1000 😉
and what for Min and Hour ??
Hello, could you please help me? I got stuck at a point. Would you like to check the code of the project?
Nice, but I didn't understand why you multiplied by 30. can you explain me, please?
I forgot to tell you that I prefer the dark theme for the clock.
if you multiply hour by 30 you get angle of the circle, for example 30 * 1(hr) you get 30 degree, so you have to rotate 30 degree.. if you have 6hr just multiply 6 by 30 and you have 180 degree , so half a circle
@@hofas2007 Thank you.
hofas2007 thx a lot!
that willbe a nice project1.project......alam md.
Great tutorial! Thank you!! Love it!
very nice work!!!
Awesome ... Thanks for share
Awesome
It works 🌸
Thanks
Very nice! Can you replace the clock image by actual divs or a SVG image, so you can change the style of the numbers?
Hi! Could you make a a tutorial for file input designs?
Amazing video
Great tutorial! Could you please help me to solve a problem in this project?
super
your question is > Which One Is Good?
for me number one white clock
Customer : this clock not working.
me : please refresh page with ctrl + f5 or open web site in incognito mode.
Customer : no, not working.
me : okey... which web browser do you use?
Customer : Internet Explorer
me : ?!?!?!?!?!?
@Furkan k. LOL
You should be waiting all kind of clients...Even clients using IE7.
@@Stl71 I see, you're just as outdated as broken clients who can't afford Google Chrome
EDIT: Should developers still stick with DirectX 9 when there's 12?
lool1234566 You've never worked in a company huh? IE7 support is hilarious, yes. But the sad fact that many people still use IE11 is still true. We ignore every use case < 2.5 %
@@daheck81 Well, that's a thing within YOUR company then. Maybe telling your customers to upgrade to a better browser that is not outdated would help you alot. Nobody is forced to use outdated or bad browsers nowadays, so why bother with it then?
thanks
I have so many problems with the clock hand .it can't stay in one place.
Same
pretty cool
Thanks for this but only the hand for seconds is ticking
Nice easy sing
You are best
Wow! Way cool!
That was so cool!
Another great tutorial! Hey man, how can I contact you? I have 1 question.
You can ask here perhaps someone will reply
@@neon13x yeah
The black one :)